ES6 문법 복습 ( Variable, Destructuring, Property-shorthand )

variable

변수 : 프로그램 실행 중 언제든지 값 변경 가능

• (변수) 선언 => let

• let : 재할당은 가능하고, 재선언은 불가능.

let value = "value1";
console.log(value); // value1

value = "value2"; // 재할당 가능
console.log(value); // value2

* let value = "value3" // 재선언 불가능
// 블록 범위 변수 'value'를 다시 선언할 수 없습니다.

상수 : 한 번 값이 설정되면 프로그램 실행 동안 그 값이 유지됨.

• (상수) 선언 => const

• const : 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능.

const value; // 초기값 없이 선언 불가능

const value = "value4";
console.log(value); // value4

value = "value2"; // 오류 출력, 재할당 불가능

const value = "value2"; // 오류 출력, 재선언 불가능

---

구조 분해 할당 (Destructuring)

배열이나 객체의 속성을 분해해서 그 값을, 변수에 담을 수 있게 해주는 문법.

( 1 ) 배열인 경우

let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // new

1과, "new"가 value1과 value2의 위치로 들어감

구조분해할당이 실행되어 ''가 빠진 상태로 출력

let arr = ["value1", "value2", "value3", "value4"];
let [a, b, c, d] = arr; // 위 arr 값과 같음, 각 자리에 할당

console.log(a); // value1
console.log(b); // value2
console.log(c); // value3
console.log(d); // undefined

배열에 없는 값을 추가했으니 컴퓨터가 자동적으로 undefined값 지정함.

따라서 d의 초기 값을 세팅해주면 적용됨, 초기값이 적용된 상태에서 새로 배열 하나를 추가하면 초기값은 우선순위에서 밀려 적용 X.

( 2 ) 객체인 경우

let user = {
  name: "nbc",
  age: 30,
};

let { name, age } = {
  name: "nbc",
  age: 30,
};

console.log("name =>", name); // nbc, string타입
console.log("age =>", age); // 30, number타입

ex1 ) 새로운 이름으로 할당하기

let person = {
  name: "nbc",
  age: 30,
  birthday: "tomorrow",
};

let { name: newName, age: newAge } = person;
console.log(newName); // nbc
console.log(newAge); // 30

ex1-1 ) 값 추가하기

let { name, age, birthday = "yesterday" } = person;
console.log(name); // nbc
console.log(age); // 30
console.log(birthday); // undefined

birthday의 초기 값 지정해주기
birthday = "yesterday"; // 초기 값 지정
console.log(birthday); // yesterday

이미 객체 내부에 지정된 값이 있을경우 초기값은 무시하고 "tomorrow" 반환
console.log(birthday); // tomorrow

---

단축 속성명 : property shorthand (!중요) 많이 쓰임

객체의 key와 value 값이 같다면, 생략 가능

const name = "Jinsu";
const personAge = 26;

const person = {
  name, // 생략 가능, 위에서 선언한 const의 name값으로 인해 key와 value 값이 서로 같음.
  age: personAge, // 생략 불가능, 위에서 선언한 변수명을 변경한다면 생략 가능해짐.
};

console.log(person); // { name: 'Jinsu', age: 26 }

---