꼭 알아야할 ES6 문법 (1)

상수/변수 선언

var 대신 상수는 const 변수는 let을 사용
실제 개발에서는 const를 주로 사용하게 될 것
const는 재할당 불가능하지만 내부 속성값은 수정 가능

const tom = {
  "lang": "Python"
};
console.log(tom["lang"]);  // Python

tom.lang = "JavaScript"
console.log(tom["lang"]);  // JavaScript

Object 선언

파이썬에서처럼 문자열로 이루어진 key를 따옴표로 묶지 않아도 된다.
아래 tom1과 tom2는 동일

let tom1 = {
  name: "Tom",
  age: 10,
  region: "Seoul"
};

let tom2 = {
  "name": "Tom",
  "age": 10,
  "region": "Seoul"
};

Key 이름 연산이 필요한 경우엔 대괄호로 묶어야 한다.

const tom = {
  "name": "Tom",
  "age": 10,
  "region": "Seoul",
  ["score" + "1"] : 100
};

참고) 파이썬이었다면?

tom = {
  "name": "Tom",
  "age": 10,
  "region": "Seoul",
  "score" + "1" : 100
}

선언한 변수를 Key 이름으로 사용하려면 대괄호로 묶어야 한다.

const key1 = "location";

const tom = {
  name: "Tom",
  [key1]: "Seoul"
};

참고) 파이썬이었다면?

key1 = "location"

tom = {
  "name": "Tom",
  key1: "Seoul"
}

Key와 값 이름이 동일하면 단축해서 사용할 수 있다.
아래 tom1과 tom2는 동일

let name = "Tom";
let age = 10;

let tom1 = {
  name: name,
  age: age
}

let tom2 = {
  name,
  age
}

객체 복사

객체나 배열을 대입했을 때 얕은 복사(Shallow Copy)가 일어나므로 대입 이후 원 객체에서 변화한 값도 반영된다.

const obj1 = {value1: 10};
const obj2 = obj2

obj1.value1 += 1;

이때 obj2의 value1 값도 obj1을 따라서 11이 된다.

깊은 복사처럼 대입 후에는 영향이 없도록 별개 객체로 만들어줄 수도 있다.

const obj1 = {value1: 10};
const obj3 = JSON.parse(JSON.stringify(obj1));

obj1.value1 += 1;

이때 obj3.value1은 그대로 10이다.

Template Literals

문자열 여러 줄을 표현할 때 백틱 사용

`string text line1
string text line2`

선언한 변수를 대입하고 싶을 때는 달러사인과 중괄호 사용

`string text ${expression} line1
string text line2`

참고) 파이썬이었다면?

'''string text line1
string text line2'''

f'''string text {expression} line1
string text line2'''

배열 비구조화

리액트에서 자주 쓰는 문법!!!

// "Tom"만 name에 할당
let [name] = ["Tom", 10, "Seoul"];

// 10만 age에 할당
let [,age,] = ["Tom", 10, "Seoul"];

// height에는 undefined 할당
// ValueError 같은 건 나지 않는다... 띠용
let [name, age, region, height] = ["Tom", 10, "Seoul"];

// height에는 지정한 default값 할당
let [name, age, region, height=150] = ["Tom", 10, "Seoul"];

default 값을 함수로 지정할 수도 있다. default 값이 필요할 때, 즉 undefined 상황에서 함수를 호출한다.

function get_default_height() {
  return 150;
}

// get_default_height 함수를 호출해 height에 함수 리턴값(150)을 할당
let [name, age, region, height=get_default_height()] = ["Tom", 10, "Seoul"];

Published 17 Feb 2021