[ JavaScript 문법 종합반 2주차 (1)] ES6문법, 구조분해할당

ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었다.

ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선하였다.

( 이런 이유로, 2015년도에 대규모 문법적 향상 및 변경이 있었다고 한다 ! ) 

 

• let, const :  기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용 되는 키워드.

선언: 변수명을 자바스크립트 엔진에 알리는 것

할당: 변수에 값을 저장하는 것 (= 할당연산자)

 

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

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

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

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

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

const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

* (참조) var : 재할당, 재선언이 가능.

var name = "name1"
console.log(name) // name1

var name = "name2"
console.log(name) // name2

 

---

 

• 화살표함수 (Arrow Function) : funtion이나, return키워드 없이 함수를 만드는 방법. ES6에서 처음 소개된 개념이다.

// ES5
function func() {
	return true
}

//ES6
const func = () => true
const func = () => {
	return true
}

() => {}
parm => {}
(parm1, parm2, ...parms) -> {}

// 익명 화살표 함수
() => {}

* function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다. 

 

 

 

---

 

• 삼항 연산자 (ternary operator) 

condition ? expr1 : expr2

console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓

 

---

 

• 구조 분해 할당 (Destructuring) : 배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법.

1) 배열의 경우 

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

 

---

구조분해할당 'Destructuring'

=  de + structure + ing

de = not 그리고, structure = 구조를 의미

 

해석하자면, 배열(대괄호 안의 하나하나)를 객체의 속성(중괄호 안의 하나하나) 변수에 담을 수 있게 해준다 정도로 될 것 같다.

 

따라 왼쪽의 예시와 같이 값이 value에 1,과 new의 값을 출력 시킬 수 있다.

 

 

 

 

 

 

 

 

 

 

---

왼쪽부터 시계방향으로 이미지 1-2-3-4

위 예시는 arr로 진행한 예시 -

2) 값이 없을경우 undefind가 출력된다. ( 자바스크립트는 값이 없을경우 null / undefind  두가지로 출력되나, null값은개발자가 직접 설정해야함. )

3) 초기값을 설정하여 출력되도록 할 수 있다.

4 ) value4 를 지정해 놓으면, 초기값이 아닌 value4로 출력된다.

 

 

---

2) 객체의 경우

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

 

 

---

 

3) 새로운 이름으로 할당

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today