ES6(ECMAScript6) 정리

 

ES6란?

• 개선된 JavaScript문법
• 자바스크립트는 ES5와 ES6기준으로 문법과 표현에서 많은 개선이 일어났다.

 

---

  1   화살표 함수 (Arrows Function)

일반 함수 표현보다 구문이 짧고 this를 바인딩 하지 않아도 된다.

화살표 함수는 항상 익명함수이다.

// 매개변수가 없는 경우
var foo = () => console.log('bar');
foo(); // bar

// 매개변수가 하나인 경우
var foo = x => x;
foo('bar'); // bar

// 매개변수가 여려개인 경우
var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다.
foo(1, 2); // 3

 

 

  2   변수의 선언 (let, const)

 let은 변수 (변하는 수, 재할당이 가능)를 정의할때 사용하고,

const는 상수(변하지 않는 수, 직접적인 재할당이 불가능)를 정의할때 사용한다.

 let과 const를 이용하면 좀 더 이해하기 쉽고, 직관적인 코드를 짤 수 있다.

 

 

  3   전개연산자 ( spread operator)

 함수를 호출하는 인자로 배열을 사용하고 싶을 때나 배열을 정의하는 리터럴 내에서 사용할 수 있다.

전개 연산자 ( ...)  는 배열 혹은 객체요소를 펼쳐서 풀어주는 역할을 한다 

 

[배열]

const a = [1, 2];
const b = [3, 4];
const c = [...a, '추가', ...b];
console.log(c); //[ 1, 2, '추가', 3, 4 ]

console.log(Math.max(a)); // NaN
console.log(Math.max(...a)); // 2

 

[객체]

const dog = { name: 'namo', age: 8 };
console.log(dog); //{ name: 'namo', age: 8 }

//기존의 것을 건드리지 않고, 새로운 객체를 만들 때 유용
const dogColorAdd = { ...dog, color: 'black' };
console.log(dog); //{ name: 'namo', age: 8, color: 'black' }

 

 

  4   기본 매개 변수 (Default Parameters)

기본값이 제공된 함수 매개 변수

매개 변수의 값이 지정되지 않았을 경우에만 사용되는 기본값

const addfunc = (a = 1, b = 2) => a + b;

addfunc(); // (1+2) 3 출력
addfunc(3); //(3+2) 5 출력
const c; // 값이 할당되지않은 c 선언
addfunc(c, 5); // ("기본값 사용"1+5) 6 출력

 

  5    템플릿 리터럴 ,  멀티 라인 문자열  (Template Literals , Multi-line Strings)

템플릿 리터럴은 백틱 `  을 사용하여 공백이나 여러 줄에 걸쳐 문자열을 정의할 수 있고,

자바스크립트의 변수를 문자열 안에 바로 연결 ${  } 할 수 있는 문자열 입력 방식이다.

 

const name = 'star';

//es5
const expressionES5 = 'my name is ' + name + '\nand i like ' + name;

//es6
const expressionES6 = `my name is ${name}
and i like ${name}
`;

// 결과는 같음!
//'my name is star
//and i like star'

 

  6   구조분해 할당 , 나머지 연산자 (Destructuring Assignment  , Rest Parameter)

구조분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.

나머지 연산자 ...변수명 으로 선언하며 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모은다.

(그래서 가장 마지막 파라미터로 사용해야 한다)

 

[ 배열 ]

const [a,b,c] = ["a","b","c"]
console.log(a)  // "a"
console.log(b)  // "b"
console.log(c)  // "c"

const arr = [1,2,3,4,5]
const [one,two,...rest] = arr
console.log(one)  // 1
console.log(two)  // 2
console.log(rest)  // [ 3, 4, 5 ]

[ 객체 ]

const obj = { a: 'a', b: 'b' };
const { a, b } = obj;
console.log(a); //"a"
console.log(b); //"b"

const { a: newA, b: newB } = obj;
console.log(newA); //"a"
console.log(newB); //"b"

const dog = { name: 'namo', age: 8, color: 'black' };
const { name, ...other } = dog;
console.log(name); //'namo'
console.log(other); // { age: 8, color: 'black' }

 

---

 

✓ 참고

blog.asamaru.net/2017/08/14/top-10-es6-features/acaroom.net/ko/blog/youngdeok/es6-%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9A%94%EC%95%BD-%EC%A0%95%EB%A6%AC#%EC%9A%A9%EC%96%B4%EC%97%90%EB%8C%80%ED%95%9C%EC%A0%95%EB%A6%AC

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

poiemaweb.com/es6-extended-parameter-handling

pro-self-studier.tistory.com/13