자바스크립트와 모던자바스크립트

모던자바스크립트란, ECMAScript(2015) 이후의 방법론을 구현한 자바스크립트다.

모던자바스크립트에서 '모던'은 현재의 개발 표준과 관행을 따르며, 최신 브라우저와 웹 개발 도구에서 지원되는 자바스크립트 버전 및 기술을 가리킨다. ES6 이후의 기능과 개선된 개발 방법론을 포함한다.

자바스크립트의 그간 역사에서 ES6를 빼놓고 이야기할 수 없을 정도로 많은 발전이 있었다. 이때문에 이를 기점으로 'modern'이라는 용어가 생긴것이다.

더불어 ES5와 ES6 출판 시기간의 간극이 크기도 해서, 다수의 개발자들이 비공식적으로 ES6와 그 이후의 판을 구현한 자바스크립트를 '모던 자바스크립트'라고 부르기도 했다.

자바스크립트와 모던 자바스크립트의 차이는 주로 ES6 이후의 개선된 문법과 새로운 기능들에 있습니다. 모던 자바스크립트는 코드의 가독성과 유지보수성을 높이고, 개발자의 생산성을 향상시키는 데 중점을 둔 변화들로 구성되어 있습니다.

자바스크립트와 모던 자바스크립트의 주요 차이점

• 문법의 변화

  • var: 전통적인 자바스크립트에서 변수를 선언할 때 주로 사용된 키워드입니다. 그러나 이 방식은 변수 스코프(scope) 관리에서 문제가 있을 수 있었습니다.
  • let, const: 모던 자바스크립트에서는 새로운 변수 선언 키워드인 let과 상수 선언 키워드인 const가 추가되었습니다. 이들은 블록 스코프(block scope)를 가지고 있어서 스코프 관리를 더 잘할 수 있습니다.

• 화살표 함수(Arrow Functions)

  • 전통적인 자바스크립트에서 함수는 function 키워드를 사용해 정의됩니다.
  • 모던 자바스크립트에서는 더 짧은 문법의 화살표 함수(arrow functions)를 사용할 수 있습니다. 또한, this의 바인딩 규칙이 기존 함수와 다릅니다.

```
// 전통적인 함수 선언 
    function sum(a, b) { return a + b; } 
// 화살표 함수 
    const sum = (a, b) => a + b;
```

• 클래스 (Class)

  • 전통적인 자바스크립트에서는 객체 지향 프로그래밍을 위해 함수와 프로토타입 체인을 사용해야 했습니다.
  • 모던 자바스크립트에서는 ES6부터 클래스 문법이 추가되어 객체 지향 프로그래밍을 더 직관적으로 구현할 수 있습니다.

  // ES6 클래스 
  class Person { 
      constructor(name, age) { 
          this.name = name; 
          this.age = age;
      } 
      greet() { 
          console.log(\`Hello, my name is ${this.name}.\`); 
      }
  }

• 템플릿 리터럴 (Template Literals)

  • 전통적인 자바스크립트에서는 문자열을 연결할 때 + 연산자를 사용해야 했습니다.
  • 모던 자바스크립트에서는 템플릿 리터럴을 통해 문자열 내에서 변수를 삽입하거나 다중 라인 문자열을 쉽게 작성할 수 있습니다.

  // 전통적인 방식 
      const greeting = 'Hello, ' + name + '!'; 
  // 모던 자바스크립트 방식 (템플릿 리터럴) 
      const greeting = \`Hello, ${name}!\`;

• 모듈 시스템 (Modules)

  • 과거에는 자바스크립트 모듈 시스템이 표준화되지 않았기 때문에 require() 같은 방식을 사용하거나 모든 코드를 하나의 파일에 넣어야 했습니다.
  • ES6부터는 import와 export를 사용해 파일 간에 모듈을 주고받을 수 있는 표준화된 모듈 시스템이 도입되었습니다.

  // 모듈 가져오기 
      import { myFunction } from './myModule.js'; 
  // 모듈 내보내기 
      export const myFunction = () => { /\* ... \*/ };

• 비동기 처리 (Promises, async/await)

  • 전통적인 자바스크립트에서는 콜백 함수를 통해 비동기 처리를 많이 했습니다. 하지만 콜백 지옥(callback hell) 문제가 발생할 수 있었습니다.
  • 모던 자바스크립트에서는 Promises와 async/await 키워드를 통해 비동기 코드를 더 직관적이고 깔끔하게 작성할 수 있습니다.

  // Promise 
  function fetchData() { 
      return new Promise((resolve, reject) => { 
          // 데이터 처리
      }); } 
  
  // async/await
  async function fetchData() { 
      const response = await fetch(url); 
      const data = await response.json(); 
      return data; 
   }