ECMA Script(ES)?

ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다. -위키백과

1990년대 넷스케이프에서 최초 개발된 자바스크립트가 시장의 흥행을 일으키자, MS의 Jscript와 같은 모방/추종 언어가 생겨나면서 쉽게는 '자장면이 맞아?, 짜장면이 맞아?'라는 혼란을 빚게 된다.(현재는 둘다 표준어지만..) 그래서 넷스케이프는 자바스크립트의 표준의 정립을 위해 자바스크립트 기술규격을 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고, ECMA-262라는 초판이 1997년에 채택된다. 현재는 자바스크립트와 J스크립트 모두 ECMA스크립트와의 호환을 목표로 한다. 약간 국립국어원에 의해 정립된 표준어가 주축을 이루고, 그 외에 여러 지역방언이 있는 것으로 생각하면 좋을 듯하다. 또한 전국민이 못알아듣는 제주 방언이 있는 것처럼 ECMA 규격에 포함되지 않는 확장 기능을 제공하기도한다.

ES5와 ES6의 차이

채용 공고를 확인해보면 ES6+를 많이 요구한다. 그렇다고 과거의 문법은 몰라도되느냐? 그건 레거시 코드(누군가 남기고 간 코드)를 최신 문법으로 리팩토링하는데 문제가 될 것이다. 앞으로 ES20이런게 나오면 그전 버전은 레거시가 돼버리기에..

ES6 추가 문법

Shorthand property names

{
  const ellie1 = {
    name: 'Ellie',
    age: '18',
  };

  const name = 'Ellie';
  const age = '18';

  // 💩
  const ellie2 = {
    name: name,
    age: age,
  };

  // ✨ key와 value가 같으면 축약이 가능!
  const ellie3 = {
    name,
    age,
  };

  console.log(ellie1, ellie2, ellie3);
  console.clear();
}

Destructuring Assignment(구조분해 할당)

{
  // object
  const student = {
    name: 'Anna',
    level: 1,
  };

  // 💩
  {
    const name = student.name;
    const level = student.level;
    console.log(name, level);
  }

  // ✨
  {
    const { name, level } = student;
    console.log(name, level);

    const { name: studentName, level: studentLevel } = student;
    console.log(studentName, studentLevel);
  }

  // array
  const animals = ['🐶', '😽'];

  // 💩
  {
    const first = animals[0];
    const second = animals[1];
    console.log(first, second);
  }

  // ✨
  {
    const [first, second] = animals;
    console.log(first, second);
  }
  console.clear();
}

Spread Syntax

{
  const obj1 = { key: 'key1' };
  const obj2 = { key: 'key2' };
  const array = [obj1, obj2];

  // array copy
  const arrayCopy = [...array];
  console.log(array, arrayCopy);

  const arrayCopy2 = [...array, { key: 'key3' }];
  obj1.key = 'newKey';
  console.log(array, arrayCopy, arrayCopy2);

  // object copy
  const obj3 = { ...obj1 };
  console.log(obj3);

  // array concatenation
  const fruits1 = ['🍑', '🍓'];
  const fruits2 = ['🍌', '🥝'];
  const fruits = [...fruits1, ...fruits2];
  console.log(fruits);

  // object merge
  const dog1 = { dog: '🐕' };
  const dog2 = { dog: '🐶' };
  const dog = { ...dog1, ...dog2 };
  console.log(dog);
  console.clear();
}

Default parameters

{
  // 💩
  {
    function printMessage(message) {
      if (message == null) {
        message = 'default message';
      }
      console.log(message);
    }

    printMessage('hello');
    printMessage();
  }

  // ✨
  {
    function printMessage(message = 'default message') {
      console.log(message);
    }

    printMessage('hello');
    printMessage();
  }
  console.clear();
}

Ternary Operator

{
  const isCat = true;
  // 💩
  {
    let component;
    if (isCat) {
      component = '😸';
    } else {
      component = '🐶';
    }
    console.log(component);
  }

  // ✨
  {
    const component = isCat ? '😸' : '🐶';
    console.log(component);
    console.log(isCat ? '😸' : '🐶');
  }
  console.clear();
}

Template Literals

{
  const weather = '🌤';
  const temparature = '16°C';

  // 💩
  console.log(
    'Today weather is ' + weather + ' and temparature is ' + temparature + '.'
  );

  // ✨
  
  console.log(`Today weather is ${weather} and temparature is ${temparature}.`);

}

ES11

Optional Chaining (ES11)

{
  const person1 = {
    name: 'Ellie',
    job: {
      title: 'S/W Engineer',
      manager: {
        name: 'Bob',
      },
    },
  };
  const person2 = {
    name: 'Bob',
  };

  // 💩💩💩💩💩💩
  {
    function printManager(person) {
      console.log(person.job.manager.name);
    }
    printManager(person1);
    // printManager(person2);
  }

  // 💩💩💩
  {
    function printManager(person) {
      console.log(
        person.job
          ? person.job.manager
            ? person.job.manager.name
            : undefined
          : undefined
      );
    }
    printManager(person1);
    printManager(person2);
  }

  // 💩
  {
    function printManager(person) {
      console.log(person.job && person.job.manager && person.job.manager.name);
    }
    printManager(person1);
    printManager(person2);
  }

  // ✨
  {
    function printManager(person) {
      console.log(person.job?.manager?.name);
    }
    printManager(person1);
    printManager(person2);
  }
  console.clear();
}

Nullish Coalescing Operator (ES11)

{
  // Logical OR operator
  // false: false, '', 0, null, undefined
  {
    const name = 'Ellie';
    const userName = name || 'Guest';
    console.log(userName);
  }

  {
    const name = null;
    const userName = name || 'Guest';
    console.log(userName);
  }

  // 💩 나는 공백을 넣고 싶고 0을 넣고싶은데 안돼!!
  {
    const name = '';
    const userName = name || 'Guest';
    console.log(userName);

    const num = 0;
    const message = num || 'undefined';
    console.log(message);
  }
	
  // ✨ 그래서 단순히 값이 전혀 없으면 다른 게 출력되도록!
  {
    const name = '';
    const userName = name ?? 'Guest';
    console.log(userName);

    const num = 0;
    const message = num ?? 'undefined';
    console.log(message);
  }
}

참조:
https://github.com/dream-ellie/learn-javascript/blob/master/notes/es6-11/es6.js
위키백과