ECMAScript란?

Ecma (European Computer Manufacturers Association) International에서 ECMA-262와 ISO / IEC 16262에 정의된 내용을 바탕으로 만든 표준화된 스크립트 언어의 사양
JS를 표준화하기 위해 만들어졌으며 Action Script, JScript와 같이 ECMAScript의 다른 구현체도 물론 존재

ES는 표준이고 JS는 그 표준을 구현한 언어

ES(ECMAScript) 탄생과 발전

1. JavaScript의 표준화 시작
   1996년 3월, 넷스케이프에서 JavaScript를 지원하기 시작
   이후 ECMA International은 1997년 6월 ECMA-262 기술 규격을 채택하여 JavaScript를 표준화하기 위한 ECMAScript를 만듬

2. 브라우저 전쟁
   브라우저 전쟁 시기에 Netscape는 JavaScript와 CSS를 개발했고, Microsoft는 JScript로 대응
   비록 Netscape가 기술적 우위를 점했지만, Microsoft의 마케팅 전략으로 Internet Explorer가 승리

⚠️ECMAScript가 JavaScript를 선택한 이유

• Netscape의 JavaScript 선점
  Netscape가 먼저 JavaScript를 개발하고 웹 브라우저에 적용했기 때문에, ECMAScript는 이를 표준화하는 것이 자연스러웠음

• JavaScript의 인지도와 보편성
  JavaScript는 Netscape 브라우저에서 널리 사용되며 개발자들에게 익숙한 언어
  ECMAScript가 JavaScript를 선택함으로써 기존 JavaScript 생태계를 활용할 수 있었음

• Microsoft의 JScript 배제
  Microsoft가 개발한 JScript는 JavaScript와 호환되지만, 기술적으로 뒤처졌기 때문에 ECMAScript에서 배제

3. ECMAScript 버전 발전
   ECMAScript는 지속적으로 발전
   ES5(2009년), ES6(2015년), ES7(2016년) 등 다양한 버전이 출시되었고, 각 버전마다 새로운 기능과 문법이 추가
   위키피디아

비유

• 사용 언어 : 국어 - javascript
• 일상생활에서 쓰는 언어의 기준이 되는 국어 : 표준어 - ECMA-262
• 표준어를 관리하는 곳 : 국립국어원 - ECMA 인터내셔널
• 국립국어원이 정한 표준어의 여러 가지규칙들(발음 또는 맞춤법) - ECMAScript
  (JAVASCRIPT) ESMAScript란? ES6 / ES7

---

ES6

ES6가 왜 자주 언급이 되고 주목이 되는 걸까?

• 새로운 기능 도입 등 대규모 변화 => 아래에서 자세히👇
• 이전 버전과의 호환성
• 브라우저 지원 확대
• Node.js 등 서버 환경에서의 활용
• 생산성 향상
  도입된 새로운 기능들은 개발자들의 생산성을 높이고 코드의 가독성과 유지보수성을 향상
  => 개발 프로세스 전반에 걸쳐 긍정적인 영향

문법 소개

1. let(변수), const(상수) ⭐
   2015년 이전 => var

   *재할당, 재선언 등의 차이

2. arrow function ⭐

// 함수 선언문
function add () {}

// 함수 표현식
let add = function () {}

// 화살표 함수 (괄호 열고 닫고 x2)
let add = (x) => {return 1;}

// 매개변수 1개 일때 소괄호 생략 가능
// 한줄일때 중괄호 생략가능
let add = x => return 1;

3. 삼항 연산자
   condition ? true : false

4. 구조분해할당 : destructuring
   de = not / structure = 구조
   배열이나, 객체의 속성의 값을 분해해서 하나하나 요소에 담을 수 있게 함.

// 배열의 경우
let [value1, value2, value3] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"
console.log(value3); // undefined

// 기본값
let [value1, value2, value3 = 4] = [1, "new"];
console.log(value3); // 4

// 객체인 경우
let {name, age} = {
  name : "nbc",
  age: 30
};

console.log(name); // nbc
console.log(age); // 30

// 새로운 이름으로 할당
let user = {
  name : "nbc",
  age: 30
};

let {name:newName, age:newAge} = user;
console.log(newName); // nbc
console.log(newAge); // 30

// 기본값
let {name, age, birthday = "today"} = user;
console.log(birthday); // "today"

5. 단축 속성명(property shorthand)
   key, value가 같으면 생략 할 수 있음

const obj = {name, age};
// const obj = {name: name, age: age};

6. 전개 구문(spread operator)

let arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]
console.log(...arr); // 1 2 3

7. 나머지 매개변수(rest parameter)

function exampleFunc(a,b,c, ...args) {
}

8. 템플릿 리터럴(Template Literal)⭐

const testValue = "안녕하세요!";
console.log(`Hello World ${testValue}`);

---

참고자료
ECMAScript와 그 역사

w3s