ECMAScript

 1. ECMAScript란?
 2. 버전별 특징
 3. 예시

ECMAScript란?

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

출처 : 위키백과

버전별 특징

S1, ES2, ES3, ES4

ES1(1997년 6월) — ES2(1998년 6월) — ES3(1999년 12월) — ES4(Abandoned)
처음 3판이 해마다 나왔고 4번째 판은 언어에 얽힌 정치적인 차이로 인해 버려졌다.

ES5

이전 버전에서 10년만인 2009년 12월에 발표됐으며 이후 버전과 거의 6년 차이가 난다.

ES6(ES2015)

ES6는 class, template tag, arrow function 등과 같은 새로운 개념들이 있으며, 이전 버전과 새로운 개념들이 많이 나와 개발자들에게 많은 공부가 필요했다. 아직 ES5 문법을 따르고 있다면 ES6로 변경하는 것을 추천한다.

1. let, const 키워드
블로스코프를 가지고 재선언 불가 재할당 가능한 let 변수 선언 키워드와 상수 선언 키원드 const가 추가되었다.
기존 var 키워드만 있었을 때 보다 예측 가능한 코드를 작성 할 수 있게 되었다.

2. 템플릿 리터럴
사용법은 “(back tick)으로 가능하다.
${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.

// ES5
var str1 = ', ';
var str2 = 'World!';
var str3 = 'Hello' + str1 + str2;

// ES6
let str1 = ', ';
let str2 = 'World!';
let str3 = `Hello ${str1} ${str2}`;

3. 객체 리터럴
이전 보다 훨씬 간결해진 코드로 객체를 선언할 수 있다.
메소드에 더 이상 콜론(:)이나 function을 붙이지 않아도 된다.
함수명이 겹치는 경우에는 한 번만 쓸 수 있다.
객체의 프로퍼티를 동적으로 생성하려면 객체 리터럴 바깥에서 [text + 1]과 같이 선언했어야 했는데, ES6부터는 객체 안에서 바로 속성으로 사용할 수 있다.

const myFn = function() {
  console.log('myFn');
};

const text = 'TEXT';

const obj = {
  inside() {
    console.log('객체 안에 바로 함수를 선언');
  },
  myFn,
  [text + 1]: '하나몬'
};

obj.inside(); // 출력값: 객체 안에 바로 함수를 선언
obj.myFn(); // 출력값: myFn
console.log(obj.TEXT1); // 출력값: 하나몬

4. 화살표 함수
함수 표현식을 화살표 함수로 표현할 수도 있다.
화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다.
만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다.
return문에서 소괄호는 사용가능하다.

// ES5
const myArrary = ['진수', '영철', '영희', 5];

let arr1 = myArrary.map(function(item) {
	return item;
});

console.log(arr1); // 출력 => (4) ["진수", "영철", "영희", 5]

// ES6
let arr2 = myArrary.map((item) => item);

console.log(arr2); // 출력 => (4) ["진수", "영철", "영희", 5]

5. 구조 분해 할당
구조분해 할당이란 펼치다란 뜻으로 객체나 배열에서 사용하며, 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.

// 배열에서 Spread 사용
const arr = [1, 2, 3];

const [one, two, three] = arr;

console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

// 객체에서 Spread 사용
const obj = {
 firstName: '하나',
 lastName: '몬'
};

const { firstName, lastName } = obj;

console.log(firstName); // 하나
console.log(lastName); // 몬

6. Promise
자바스크립트에서 비동기 처리를 기존에는 콜백 함수를 사용한, 콜백 패턴을 사용하였다.
결과론적으로, 콜백헬을 발생시켰다.
이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메소드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.

// 콜백 예시
function async(callback) {
  setTimeout(() => {
    callback("1초 후 실행");
  }, 1000);
}

async(function (msg) {
  console.log(msg);
});

// promise 예시
function async() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("1초 후 실행");
    }, 1000);
  })
}

async().then(res => {
  console.log(res);
});

// async await 예시 (ES7/ES2016)
function async() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("1초 후 실행");
    }, 1000);
  })
}

async().then(res => {
  console.log(res);
});

then은 promise를 리턴받는 함수에 대하여 절차지향적에게 실행하기 때문에 promise를 내뱉는 함수에게도 사용이 가능하다.

const axios = require('axios');

axios
  .get('https://jsonplaceholder.typicode.com/todos/1')
  .then((result) => {
    console.log(result.data);
    return result.data.title;
  })
  .then((title) => {
    console.log(title);
  });

7. Class
자바스크립트는 프로토타입 기반의 객체 지향 언어이다.
클래스 기반의 객체 지향 프로그래밍도 할 수 있게 Class 키워드를 도입하였다.
자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌다.
클래시는 사실 특별한 함수이다.
클래스는 호이스팅이 let, const 키워드 처럼 동작한다.

캡슐화가 가능한 장점이 있지만 개인적으로는 안좋아함 (Typescript interface로 대체 가능하다고 생각하기 떄문에?)

class myClass {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	sayHello() {
		console.log(`안녕 ${this.name} 너의 나이는 ${this.age}살이다`);
	}
}

// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
	userName() {
		console.log(this.name);
	}
}

const profile = new UserProfile('영희', 22);

profile.sayHello(); // 안녕 영희 너의 나이는 22살이다.
profile.userName(); // 영희

8. Multi-line String
문자열이 라인을 넘어가게 되면 ‘\n’ 과 덧셈 연산자를 사용했어야했다.
백틱을 사용하게 되면서 여러줄의 문자열 관리도 편해졌다.

// ES5
var str = 'asdhasfhfsahsfhfshasfhsfahsfahsfahasfh.\n' + 
'mxmxmxmxmxmxmxmmxmxmxmxmxmmxmxmxmxmxm.\n'
// ES6
let str = `asdhasfhfsahsfhfshasfhsfahsfahsfahasfh
mxmxmxmxmxmxmxmmxmxmxmxmxmmxmxmxmxmxm`;

9. Default Parameter
기존에는 함수의 매개변수에 초기화를 하려면 내부 작업이 필요했으나, ES6 에서는 필요 없어졌다.

const myFunc = (name, age = 22) => {
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 22살 이니?

10. Module
모듈이란, 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드이다.
type에 module을 추가시키고 확장자를 mjs로 변경하여 사용한다.
모듈은 모듈 스코프를 가지며, import와 export 키워드를 이용하여 사용한다.

<script type="module" src="lib.mjs"></script>

11.Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)
Rest parameter는 배열의 인수를 가져오고 새 배열을 반환하는데 사용됩니다.

const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];

// 비구조화를 이용한 값을 얻기
const [ val1, val2, val3, ...rest ] = arr;

const Func = (restOfArr) => {
	return restOfArr.filter((item) => {return item}).join(" ");
};

console.log(Func(rest)); // 안녕 지수 어떻게 지내니?

Spread operator는 Rest parameter와 구문이 동일하지만 Spread operator는 인수뿐만 아니라 배열 자체를 가집니다. for 반복문이나 다른 메서드를 사용하는 대신 Spread operator를 사용하여 배열의 값을 가져올 수 있습니다.

const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];

const Func = (...anArray) => {
	return anArray;
};

console.log(Func(arr));
// 출력 => ["영희", 20, "열성적인 자바스크립트", "안녕", "지수", "어떻게 지내니?"]

ES7(ES2016)

1. String Method (includes, startsWith, endsWith)
포함되어있는지(includes), 시작하는지(startsWith), 끝나는지(endsWith)
boolean 타입을 return 해준다.

const str = 'Hello World Hanamon';
str.includes("Hana"); // true
str.startsWith("Hello"); // true
str.endsWith("mon"); // true

2. Exponentiation Operator(제곱연산자)

let cubed = 2 ** 3;
// same as: 2 * 2 * 2

let a = 2;
a **= 2;
// same as: a = a * a;

let b = 3;
b **= 3;
// same as: b = b * b * b;

ES8(ES2017)

1. 문자 앞뒤 간격을 조절할 수 있습니다.

//앞으로 10칸
console.log("hello".padStart(10)) // "          hello"

//뒤로 10칸
console.log("hello".padEnd(10)) // "hello          "

2. key와 value로 되어있는 객체(json형식)에 대해서 손쉬운 반복문이 가능 합니다.

let datas = {
  data1 : "데이터1",
  data2 : "데이터2",
  data3 : "데이터3",
};


//#1. key와 인덱스를 통한 출력
Object.keys(datas).forEach((key, index) => {
  console.log(key, datas[key]);
});

//#2. 데이터만 출력
Object.values(datas).forEach((value) => {
  console.log(value);
});

//#3. 객체를 배열로 변환(key가 0번째, 데이터가1번째 순서로)
Object.entries(datas).forEach((value) => {
  console.log(value);
});

ES9

1. 비동기 반복자

(async function () {
  const promises = [1000, 2000, 3000, 4000].map(
    timer =>
      new Promise((resolve, reject) => {
        setTimeout(() => resolve(timer), timer);
      })
  );

  for await (const result of promises) {
    console.log(result);
  }
})();

ES10

1. Optional Catch
기존에 try catch에서 catch에 error를 썼다면, 이제는 error를 쓰지 않을 때는 생략해도 된다!

// 기존
try{
 new Error('hello');
} catch(error){
 console.log('error를 쓰지 않는다~!');
}

// ES10
try{
 new Error('hello');
} catch {
 console.log('에러!!');
}

ES11

1. Optional chaining

{
    const Book = {
    	name : '동화책',
        publisher : '동화출판사',
        detail : {
            price : '20000',
            date : '20201130'            
        }
    }
    const Book2 = {
    	name : '소설책',
        publisher : '소설출판사'
    }
}

function printBookPrice(book){
    console.log(book.detail.price)
}

위 코드에서 printBookPrice 함수에 Book2 변수를 넣으면 에러가 발생한다.
일반적으로 함수를 작성하면 파라미터 값의 유효성을 검증하여 에러를 방지하는데 보통 아래와 같이 했었다.

console.log(book && book.detail && book.detail.price)

그러나 이제는 좀 더 가독성과 코드의 심미성?을 위해 아래와 같이 사용할 수 있다.

console.log(book?.detail?.price);