ES6 자주 사용하는 문법 정리

 단축 속성명(Shorthand property names)

 

객체의 속성값이  변수로 할당되어 있다면, 변수 이름만 적을 수 있다.

 

let a = "foo", b = 42, c = {} // 객체의 속성값이  변수로 할당되어 있다면,

let object = {a: a, b: b, c: c};
let es6 = { a, b, c }; // 변수 이름만 적을 수 있다.


console.log(object.a === es6.a);  // true

 

 

 

 중복된 속성명(Duplicate property names)

 

ECMAScript 5 엄격 모드 코드에서, 중복된 속성명은 SyntaxError로 간주됐습니다. 런타임에 중복을 가능케 하는 속성 계산명 도입으로, ECMAScript 2015는 이 제한을 제거했습니다.

 

var a = {x: 1, x: 2};

console.log(a); // {x: 2}

 

 

 

 

 단축 메서드명(Shorthand method names)

 

ECMAScript 2015에서는, 단축 표기법을 이용할 수 있습니다, 그래서 키워드 "function"은 더 이상 필요치 않습니다.

 

var o = {
  property: function ([parameters]) {},
  get property() {},
  set property(value) {},
};

// 아래와 같이 단축해서 쓸 수 있음

var o = {
  property([parameters]) {},
}

 

 

 

 

 계산된 속성명(computed property name)

 

ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 [] 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다.

 

var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

var param = 'size';
var config = {
  [param]: 12,
  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};

console.log(config); // { size: 12, mobileSize: 4 }

 

 

 

 

 전개 속성(

Spread properties

)

 

let obj1 = { foo: 'bar', x: 42 }
let obj2 = { foo: 'baz', y: 13 }

let clonedObj = { ...obj1 }
// Object { foo: "bar", x: 42 } // 얕은 복제(Shallow-cloning)

let mergedObj = { ...obj1, ...obj2 }
// Object { foo: "baz", x: 42, y: 13 } // 객체 머지해서 새로운 객체로 할당(merging objects)

 

 

 

 

 구조 분해 할당(

Destructuring assignment

)

 

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

 

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

 

 

구조 분해 할당의 구문은 위와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

 

 

변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용합니다.

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

 

 

일부 반환 값 무시하기 : 다음과 같이 필요하지 않은 반환 값을 무시할 수 있습니다.

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3


// 반환 값을 모두 무시할 수도 있습니다.

[,,] = f();

 

 

 

 

 기본값 함수 매개변수(

Default function parameter

)

 

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

 

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// expected output: 10

console.log(multiply(5));
// expected output: 5

 

 

 

 

 삼항 조건 연산자(Ternary Operator

)

 

// 구문 condition ? exprIfTrue : exprIfFalse 

var elvisLives = Math.PI > 4 ? "Yep" : "Nope";

// 다중 삼항 평가(주의: 조건 연산은 우측부터 그룹핑 됩니다.)

var firstCheck = false,
    secondCheck = false,
    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";

console.log( access ); // logs "Access granted"

// 다중 조건 IF 문과 같은 방식으로 여러개의 조건을 사용할 수도 있습니다.(괄호는 필수는 아님)
var condition1 = true,
    condition2 = false,
    access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");

console.log(access); // logs "true false"

 

 

 

 

 템플릿 리터럴(Template Literals

)

 

템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) (grave accent) 을 이용합니다.  템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있습니다.

 

let a = 'hi';

console.log(`string text ${a} string text`);

 

 

 

 

 

 결론

 

자주 사용하는 ES6문법이 더 있다면 댓글로 남겨주세요~! 

 

 

 

 

 출처

[객체초기자] - developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

[기본값 함수 매개변수] - developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters

[삼항연산자] - developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

[템플릿리터럴] - developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

[구조 분해 할당] - developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment