[JS 문법 1주차] 기초 문법 다시 정리 - JS 역사와 특징

1. JS 의 역사

• 1995년에 만들어짐. 
  • 넷스케이프 커뮤니케이션즈라는 미국의 인터넷, 소프트웨어, 통신 산업을 하는 회사에서 만든 언어로 원래는  LiveScript 였는데 당시 Java가 인기가 많아서 우리도 java처럼 이름 바꾸자해서 java랑 전혀 연관이 없음에도 이름이 Javascript가 되어버림.
  • JS는 브라우저에 동작하기 위해 쓰이는 언어임: JS = 브라우저 동작 스크립트 언어
  • 1999년 자바스크립트 표준화(ECMA-262) 완료: 보다 널리 사용되고, 브라우저 간 호환성을 높이기 위함.
    • European Computer Manufacturers Association의 약자로, 정보 통신 시스템을 표준화하는 기구.
    • 자바스크립트가 브라우저나 환경에 상관없이 일관되게 작동할 수 있도록 정의된 규칙서
• 2005 AJAX(에이작스) 등장: JS를 더욱 많이 사용하게됨.
• 예전에는 웹 페이지에서 버튼 하나만 눌러도 전체 페이지를 새로고침을 해야 업데이트가 되는 형식이었음.
• 하지만, AJAX 덕에 그 버튼과 변경되는 부분만 새로고침되는 형식으로 바뀜. 
• 즉, AJAX는 웹 애플리케이션에서 페이지 전체를 새로 고침하지 않고도 서버와 비동기적으로 데이터를 주고받는 기술
• 웹 페이지가 더욱 동적으로 작동할 수 있게함/ 폭발적인 UX(User Experience: 사용자 경험) 향상/ 비동기 웹 애플리케이션 개발 가능.
• 2008년 V8 엔진 출시(google): 자바스크립트를 빠르게 실행할 수 있도록 설계된 고성능 엔진으로, 구글 크롬 웹 브라우저와 나중에 등장한 Node.js에서 사용되고 있음.
  • 자바스크립트를 기계어(machine code)로 변환해 직접 실행하는 방식
  • Garbage Collection:  V8은 메모리 관리 기능을 내장하고 있어서, 불필요한 데이터를 자동으로 정리함.
  • JIT(just in time)  컴파일러를 사용해서 프로그램이 실행되는 도중에 자바스크립트 코드를 컴파일함.
    • 코드 실행 속도 상당부분 개선
    • 컴파일러, 메모리 관리 시스템이 좋아짐.
  • 2009년 Node.js 등장, 서버 개발 활성화
    • 앞서 JS가 브라우저 내에서 동작하기 위해 쓰였다면, Node.js는 그것을 깨고 나온 언어. 즉, 서버 사이드에서 자바스크립트를 실행할 수 있도록 해주는 오픈 소스 런타임 환경. 
      • 원래 자바스크립트는 웹 브라우저 안에서만 실행되었지만, Node.js 덕분에 브라우저 외부, 특히 서버에서 자바스크립트를 사용할 수 있게됨.
    • 서버개발의 지각변동: PHP, Ruby, Python, Java --> JS(Node.js)
    • 하나의 언어로 풀스택 개발 가능 --> FrontEnd + BackEnd + DB(MongoDB) = FullStack
  • 2015년 ECMAScript 6(ES6) 버전 출시 🚀
    • var 대신 let과 const를 사용하여 블록 스코프를 명확하게 관리
    • 화살표함수, this 바인딩도 개선
    • 템플릿 리터럴(Template Literals): 문자열을 다룰 때 백틱(``)을 사용하여 문자열 내에서 변수 삽입
    • 클래스(Class): 객체 지향 프로그래밍이 더 쉬워짐
    • Promise: 비동기 작업을 더 깔끔하고 체계적으로 처리할 수 있는 기능

      const myPromise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('Success!'), 1000);
      });
      myPromise.then(result => console.log(result));

      
      
    • 모듈(Module): 모듈 시스템이 도입되어 import와 export 키워드를 사용하여 파일 간에 코드를 쉽게 공유

      // module.js
      export const hello = () => console.log('Hello, world!');
      
      // main.js
      import { hello } from './module.js';
      hello();

      
      
    • 디스트럭처링 할당(Destructuring Assignment): 배열이나 객체의 값을 쉽게 분해하여 변수에 할당

      const [a, b] = [1, 2];
      const { name, age } = { name: 'Bob', age: 30 };

      
      
  • 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 🌟
• 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있음.

 

2. JS의 특징

[1]  객체 지향 프로그래밍 지원

       자바 스크립트는 객체지향 프로그래밍이 가능한 언어: 객체를 생성하고 관리하는 것이 강점!

 객체지향 vs 절차지향

• 절차지향 프로그래밍(Procedural Programming): 코드가 위에서 아래로 순차적으로 실행됨. 즉, 순서대로 실행되는 일련의 과정을 단계적으로 기술해서 프로그램을 만드는 것. 
• 객체지향 프로그래밍(Object-Oriented Programming, OOP): 데이터와 함수를 객체라는 그룹으로 묶어서 처리하는 방식.
  • 캡슐화 (Encapsulation): 객체의 내부 상태(속성)와 그 상태를 조작하는 방법(메소드)을 하나로 묶고, 외부에서 직접 접근하지 못하도록 보호하는 개념
  • 상속 (Inheritance): 상속은 한 클래스가 다른 클래스의 속성과 메소드를 상속받아, 새로운 클래스를 만드는 기능(즉, 클래스 재사용 가능, 계충 구조 만들기 가)
  • 다형성 (Polymorphism): 다형성은 같은 이름의 메소드가 여러 클래스에서 다르게 동작할 수 있는 능력
  • 프로그램은 객체들의 상호작용으로 구성됨
    • 객체는 속성(property)과 메소드(행동)를 가짐.
• 예를 들어, 절차지향 프로그래밍에서는 첫 번째 일을 처리한 다음에 두 번째 일을 처리하고, 그 다음에 세 번째 일을 처리하는 순서대로 프로그램을 만듭니다. 반면 객체지향 프로그래밍에서는 데이터와 함수를 객체라는 그룹으로 묶어서 처리합니다.
• 자바스크립트에서 객체를 만들 때는 중괄호({})를 사용하여 객체를 만들고, 각 속성을 쉼표(,)로 구분하여 추가합니다. 속성은 이름과 값을 가지며, 이름은 문자열로 작성하고, 값은 다양한 데이터 타입을 사용할 수 있습니다. 객체 내부의 함수를 메소드(method)라고 부르며, 속성의 값으로 함수를 추가할 수 있습니다. 객체를 만들어서 필요한 속성과 메소드를 추가하여 사용합니다.

 

 [2] 동적 타이핑

자바스크립트는 동적 타이핑을 지원하는 언어로서, 변수를 선언할 때 타입을 지정하지 않음.

• 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다는 것을 의미
  • 런타임(Runtime)? 런타임 시점이란, 프로그램이 실행되는 동안의 시점을 의미. 즉, 코드가 실행되는 동안에 발생하는 시점!! 반대의 의미로는 컴파일 시점이 있음.
  • 예시: 

let myVariable = "Hello, world!"; // 변수 선언 및 문자열 데이터 타입으로 할당
console.log(typeof myVariable); // "string" 출력

myVariable = 123; // 숫자 데이터 타입으로 할당
console.log(typeof myVariable); // "number" 출력

myVariable = true; // 불리언 데이터 타입으로 할당
console.log(typeof myVariable); // "boolean" 출력

 

[3] 함수형 프로그래밍 지원

자바스크립트는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급 객체로 취급하고, 고차 함수를 지원합니다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다.

• 일급객체란(first-class object)? 함수를 일반 값과 마찬가지로 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 객체를 의미

// 함수를 변수에 할당
const add = function(a, b) {
  return a + b;
}

// 함수를 인자로 받는 함수
function calculate(func, a, b) {
  return func(a, b);
}

// 함수를 반환하는 함수
function getAddFunction() {
  return add;
}

// 함수를 일급 객체로 다루어 코드의 재사용성을 높임
console.log(calculate(add, 2, 3)); // 5
console.log(getAddFunction()(2, 3)); // 5

• 고차함수(higher-order function)란? 함수를 인자로 받거나, 함수를 반환하는 함수를 의미

// 고차 함수 예시: 함수를 인자로 받는 함수
function operate(func, a, b) {
  return func(a, b);
}

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

console.log(operate(add, 2, 3)); // 5
console.log(operate(multiply, 2, 3)); // 6

 

[4] 비동기 처리

      작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있는 프로그래밍 패턴. 이는 주로 시간 소요가 큰 작업(예: 데이터베이스 쿼리, 네트워크 요청, 파일 I/O 등)에서 사용 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는데 쓰임.

• 콜백(Callback): 함수의 인자로 다른 함수를 전달하여 작업이 완료된 후에 호출되는 방식.
  • 그러나 콜백을 많이 사용하면 콜백 지옥(Callback Hell)이라는 가독성이 떨어지는 문제를 초래

function fetchData(callback) {
  setTimeout(() => {
    callback('Data received');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // 1초 후 "Data received" 출력
});

• 프로미스(Promise): 비동기 작업의 완료 또는 실패를 나타내는 객체.
  • then(), catch(), finally() 메서드를 사용해 결과를 처리

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data); // 1초 후 "Data received" 출력
  })
  .catch((error) => {
    console.error(error);
  });

• async/await: ES2017에 도입된 문법으로, 프로미스를 더 간단하게 처리 .
  • async로 정의된 함수 내에서 await를 사용하여 프로미스가 해결될 때까지 기다릴 수 있음.

async function fetchData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
  console.log(data); // 1초 후 "Data received" 출력
}

fetchData();

 

[5] 클라이언트 및 서버 측 모두에서 사용가능

 

자바스크립트는 클라이언트 측에서만 사용되는 것이 아니라, Node.js를 이용하여 서버 측에서도 사용됨. 이를 통해 웹 개발 전반에 걸쳐 자바스크립트를 활용가능.

 

 

JS에 관한 기본 배경지식(역사, 특징)을 정리하고 강의를 듣게 되어 더욱 공부하기 편할 것 같다 ㅎ.ㅎ