🔥아이티 부수기🔥

💡 Destructuring Assignment (구조 분해 할당)

구조 분해 할당이란 말 의미 그대로 객체, 배열의 구조를 분해하여 분해한 값을 변수에 할당한다고 생각하면 된다.

(구조 분해 할당 구문은 배열의 값이나 객체의 속성을 별개의 변수로 추출할 수 있게하는 자바스크립트 식)

💡 배열 구조 분해 할당 

let arr = ["dong","hwi"];

// 배열 구조 분해 
let [firstName, surname] = arr;

console.log(firstName);
console.log(surname);

// 배열으로 접근하지 않고 변수로 사용 할 수 있게 됐다.

split(' ') 함수를 활용 할 수도 있다.

let [firstname, surname] = "kim dong".split(' ');

* 구조 분해 할당을 한다고 해서 기존의 arr는 바뀌지 않는다.

1. 쉼표를 사용하여 요소를 무시할 수 있다.

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

2. 할당 연산자 좌측엔 뭐든지 올 수 있다.

할당 연산자 좌측엔 할당 할 수 있는 것이라면 어떤 것이든지 올수 있다.(객체 프로퍼티도 가능)

let user = {};
[user.name, user.surname] = "kim hwi".split(' ');

console.log(user.name);

3. entries()로 반복할수 있다.

let user = {
	name : 'john',
	age:30
};

for(let[key, value] of Object.entries(user)){
	console.log(`${key} : ${value}`);
}

4.'...'로 나머지 요소 배열로가져오기

let [name1, name2, ...rest] = ['a','b','c','d','e'];

console.log(name1);
console.log(name2);

console.log(rest[0]);	// c
console.log(rest[1]);	// d

rest말고 다른 변수명도 사용 가능하다. 하지만 변수명 앞에 . 세개를 꼭 지켜줘야한다.

💡 객체 구조 분해 할당

let options = {
	title: "menus",
    width:100,
    height:200
};

let {title, width, height} = options;

console.log(title);
console.log(width);
console.log(height);

참고

ko.javascript.info/destructuring-assignment

💡 Template Literals

- 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.

- 여기서 리터럴(Literal)은 변하지 않는 데이터를 의미한다.

- 고로 템플릿 리터럴은 표현식을 가지고 있는 문자열 리터럴이라는 것이다.

- 템플릿 리터럴은 백틱(`` , 숫자 1 옆에 있다)(grave accent)과 ${expression}으로 구성된다. 

[특징]

- 항상 문자열을 사용하여 줄바꿈 할 때 \n을 사용했지만 템플릿 리터럴은 그냥 엔터를 사용하여 띄어주면 된다.

- 백틱(``)을 사용하기 때문에 작음따옴표(''), 큰따옴표("")를 이스케이스문 없이 사용할수 있다. 

💡 예시

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

참고)

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals