221207.til

모던 자바스크립트 스터디 1일차

구조 분해 할당에 대해서 알아보자

Destructuring

: 객체나 배열을 변수로 분해 할 수 있게 해주는 ES6 구문

함수의 매개변수가 많거나 기본값이 필요한 경우 유용하다.

React 의 state 는 대부분 객체나 배열로 이루어져 있어서 자주 사용하기에

JS 스터디 시간에 정리해보려고 한다.

배열 해체분석기

let arr = ['soo', 'kim']
let [name1, name2] = arr

console.log(name1, name2)
// soo, kim

배열에 직접 인덱스로 접근하지 않아도 변수에 배열의 요소를 할당할 수 있다.

이 때, 배열의 요소를 복사 할 뿐, 수정이나 삭제는 일어나지 않는다.

건너 뛰어 할당하기

let [a, , c] = [1,2,3]
console.log(c)

// 3

쉼표로 구분하여 원하는 인덱스의 요소를 할당할 수 있다.

위 코드의 경우 1 index를 건너뛰고 number 3을 할당받은 모습.

할당 연산자 좌 우측

// 할당연산자의 우측에는 반복가능한 객체라면 뭐든지
let [a,b,c] = "abc" // 문자조차 가능하다 !

// 할당연산자 좌측에는 할당할 수 있다면 뭐든지
let obj = {};
[obj.name, obj.name2] = 'soo kim'.split(' ') // 메소드로 분해한 요소라도 !

우측에는 반복가능한 객체, 예를들어 set 자료형이나 nodeList 조차도 가능하고

좌측에는 할당을 할 수 있는 그 어떤 것이라도 가능하다.

변수끼리의 교환

let king = 'me';
let slave = 'you';

[king, slave] = [slave, king];

console.log(`king: ${king}, slave: ${slave}`);

// king: you, slave: me

왕에서 노예가 된 모습이다.

원래 변수간의 교환은 하나의 변수를 만들어서 A=B, B=C, C=A 이런식으로 진행했는데,

조금 더 쉽게 진행하는 모습.

rest parameter 활용

let [a, ...rest] = [1,2,3,4,5,6,7,8,9]

console.log(rest.length)
rest.forEach(e=>console.log(e))

// 8
// 2,3,4,5,6,7,8,9

rest parameter 로 이처럼 뒤에 올 모든 파라미터를 배열로 묶을 수도 있다.

기본값 설정

let[name = 'soo', age=19] = []
console.log(name, age)
// soo, 19

let[name = 'soo', age=19] = ['kim']
console.log(name, age)
// kim, 19

아예 할당을 해서 기본값으로 넣어줄 수도 있다.