티스토리 뷰

javacsript/공부

js 구조분해할당 [destructuring]

실전압축코딩 2023. 7. 11. 13:53

1. 배열 디스트럭처링:

let arr = [1,2,3]
const [a,b,c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

rest 문법 사용

let arr = [1,2,3,4,5]
const [a, b, ...c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5]

 

빈 값 & 기본값 

const arr = [1,2,3,4,5]
const [a, ,b] = arr
console.log(a, b); // 1 3

const arr = [1,2]
const [a,b,c=3] = arr
console.log(a, b, c); // 1 2 3

 

 

 

 

2. 객체 디스트럭처링:

const obj = {a:1, b:2, c:3, d:4}

const {a, b} = obj
console.log(a,b) // 1 2

프로퍼티의 키객체의 키가 일치해야 함!

const obj = {a:1 ,b:2, c:3}
const {a, obj2} = obj
console.log(a,obj2) // 1, {b:2, c:3}

// 프로퍼티 키가 prop1인 프로퍼티의 값을 변수 p1에 할당
// 프로퍼티 키가 prop2인 프로퍼티의 값을 변수 p2에 할당
const { prop1: p1, prop2: p2 } = { prop1: 'a', prop2: 'b' };
console.log(p1, p2); // 'a' 'b'
console.log({ prop1: p1, prop2: p2 }); // { prop1: 'a', prop2: 'b' }

rest & 프로퍼티의 키 이름 변경

'javacsript > 공부' 카테고리의 다른 글

[TS] 옵셔널 파라미터  (1) 2023.07.21
Active Record패턴과 Data Mapper 패턴  (0) 2023.07.20
js spread/rest 문법  (0) 2023.07.11
js call appy bind  (0) 2023.06.07
TDZ와 호이스팅, let const var  (0) 2023.06.07