구조분해할당 (Destructuring)
배열이나 객체의 요소, 속성을 분해해서 그 값을 변수에 담을 수 있도록 함
배열
let arr = [1, "new"];
let [value1, value2] = arr;
console.log("value1: ", value1); // value1: 1
console.log("value2: ", value2); // value2: new
// 분해하려는 구조보다 더 많은 변수에 할당하려는 경우
let arr = [1, "new"];
let [value1, value2, value3] = arr;
console.log("value1: ", value1); // value1: 1
console.log("value2: ", value2); // value2: new
console.log("value3: ", value3); // value3: undefined
분해하려는 구조보다 더 많은 변수에 할당하려는 경우, 할당해줄 값이 없기때문에 undefined를 확인할 수 있다. 이런 경우를 대비하여 초기값을 설정할 수 있다!
let arr = [1, "new"];
let [value1, value2, value3 = 3] = arr;
console.log("value1: ", value1); // value1: 1
console.log("value2: ", value2); // value2: new
console.log("value3: ", value3); // value3: 3
value3에 초기값 3을 지정해주었으며, arr에는 세번째 요소가 없어 초기값을 확인할 수 있다.
초기값이 있더라도 요소를 할당하는 것이 그 이후 과정이므로 arr에 세번째 요소가 있다면 세번째 값을 확인할 수 있다.
객체
let { name, age } = {
name: 'Kim',
age: 30,
};
console.log(name); // Kim
console.log(age); // 30
key와 같은 이름의 변수에 할당할 경우 위와 같이 사용하면 된다.
만약 다른 이름의 새로운 변수에 할당하고 싶은 경우 아래와같이 사용하자!
let user = {
name: 'Kim',
age: 30,
};
let { name: userName, age: userAge, birthday: userBirthday = "today" } = user;
console.log(userName); // Kim
console.log(userAge); // 30
console.log(userBirthday); // today -> 할당할 수 있는 기존 속성이 없으므로 기본값 할당
단축속성명 (Property shorthand)
객체의 key, value를 지정할 때 key와 value의 이름이 같으면 생략하여 작성할 수 있음
const name = 'Kim';
const newAge = 30;
const obj = {
name: name,
age: newAge,
};
const obj2 = {
name, // key와 value로 대입할 변수명이 같다면 생략 가능
age: newAge,
}
const obj3 = { name, newAge }; // obj3의 keys가 name, newAge인 경우 속성을 모두 단축하여 적어줄 수 있음
전개 구문 (Spread operator)
배열의 요소, 객체의 속성들의 값을 가져와야할 때 사용할 수 있음
let arr = [1, 2, 3];
let newArr = [...arr, 4]; // [1, 2, 3, 4]
let user = {
name: 'Kim',
age: 30,
};
let user2 = { ...user }; // { name: 'Kim', age: 30 }
나머지 매개변수 (Rest parameter)
함수를 선언할 때 매개변수의 수가 변할 수 있는 경우 사용할 수 있음
function exFunc(a, b , c, ...args) {
console.log(...args);
console.log(args);
}
exFunc(1, 2, 3, 4, 5, 6);
// 4 5 6
// [4, 5, 6]
앞서 선언된 매개변수들(예시에서 a, b, c)를 제외하고 추가로 들어온 매개변수들을 모두 포함하는 것이므로, 나머지 매개변수는 마지막 매개변수여야 한다.
템플릿 리터럴 (Template literal)
`${ }` 를 사용해 문자열 내부에 Javascript 코드, 변수 등을 사용할 수 있음
또한 백틱은 여러줄을 표현하는 것이 가능하다.
const message = "안녕하세요.";
console.log(`${message} 2 + 3 = ${2 + 3}`);
'JavaScript' 카테고리의 다른 글
[JavaScript] Map과 Set (0) | 2024.07.22 |
---|---|
[JavaScript] 일급 객체로서의 함수 (0) | 2024.07.22 |
[JavaScript] 객체 메서드와 객체 비교 (0) | 2024.07.22 |
[JavaScript] 삼항연산자와 단축평가 활용하기 (조건부실행, 기본값지정) (1) | 2024.07.22 |
[JavaScript] 형변환 (0) | 2024.07.22 |