728x90
// 구조 분해 할당 (Destructuring assignment)
// 구조 분해 할당은 배열 데이터와 객체 데이터 에서 사용 가능 하다.
// 각 데이터의 구조에 맞게 개별 변수를 손쉽게 만들 수 있어서 편리 하다.
const arr = [1, 2, 3]
const a = arr[0]
const b = arr[1]
const c = arr[2]
console.log(a, b, c) // 1 2 3
// 원래 위와 같이 작성 했는데, 이것을 구조 분해 할당 개념을 사용 해서 표현 할 수 있다.
const arr2 = [4, 5, 6]
const [d, e, f] = arr2
console.log(d, e, f) // 4 5 6
// 기존에 변수를 세번 선언 하고 값을 할당 했던것과 달리,
// 배열을 의미하는 대괄호 기호 [] 를 사용 해서 표현 할 수 있다.
// 아래와 같이, 변수 h, i, j에 값을 할당 하고,
// 변수 arr3에 새로운 배열 데이터를 저장 했다.
// 이때, arr3 배열 데이터를, h, i, j 변수가 담겨있는 배열에 대입을 하는 상황인데,
// 위와 다른점은, 배열 데이터 [h, i, j]에 const 라던지 이런 키워드를 붙히지 않은 경우에는,
// 그대로 작성 하게 되면, 다음과 같은 에러가 발생 하게 된다.
// Uncaught ReferenceError: Cannot access 'arr3' before initialization
// '초기화가 되기 전에 arr3 변수로 접근 하는 것은 불가능 하다' 라는 의미 이다.
// 왜 이런 에러가 발생 했냐면, const arr3 = [7, 8, 9] 뒤에 세미콜론 ( ; ) 이 없기 때문 이다.
// 따라서, 세미콜론을 붙혀 주면 해결 된다.
// 세미콜론은 보통 일반적으로 붙혀도 되고, 붙히지 않아도 되지만,
// 현재 상황 에서는 세미콜론은 붙히지 않았고,
// 특수한 경우 에만 붙혀주면 되는데, 그 특수한 상황이 바로 이러한 경우 이다.
// 세미콜론은 뒤에 붙혀 줘도 되지만, 다음 라인의 앞에 붙혀 줘도 된다.
// 예시)
// ;[]
// ;()
// 그리고, 변수 h, i, j 는 값이 재할당이 되어야 하기 때문에,
// const 키워드를 붙히면 에러가 발생하므로, 주의.
let h = 0
let i = 0
let j = 0
const arr3 = [7, 8, 9]
;[h, i, j] = arr3
console.log(h, i, j) // 7 8 9
// 구조 분해 할당 문법으로 아래와 같이 표현 할 수도 있다.
// 대신에, 값을 할당해주는 대괄호 부분에서, 값의 순서를 유지 하기 위해서,
// 콤마를 잘 체크해 줘야 한다.
// let aa = 0
let bb = 0
let cc = 0
const abcArr = [10, 11, 12]
;[, , cc] = abcArr
console.log(bb, cc) // 0 12
const testArr = [1, 2, 3]
const [aaa, rest] = testArr
console.log(aaa, rest) // 1 2 로 출력 된다. => 3은 포함 되지 않는다.
// 3도 표현 하고 싶으면 어떻게 해야 할까 ?
// 전개 연산자를 사용 한다. == ...
// 앞에 4는 bbb에 정상적으로 들어가고,
// 숫자 5만 rest2 에 들어 가는데,
// 이때, rest2 에 전개 연산자 (...) 를 사용 하면,
// 숫자 5 와 6 을 포함하는 배열 데이터가 되기 때문에,
// 4 [5, 6] 으로 출력 된다.
const testArr2 = [4, 5, 6]
const [bbb, ...rest2] = testArr2
console.log(bbb, rest2) // 4 [5, 6]
// 구조 분해 할당 => 객체편
const obj = {
aaaa: 1111,
bbbb: 2222,
cccc: 3333
}
// const aaaa = obj.aaaa
// const bbbb = obj.bbbb
// const cccc = obj.cccc
// console.log(aaaa, bbbb, cccc) // 1111 2222 3333
// 위와 같이 작성 하면 조금 번거 롭다.
// 아래와 같이 객체 구조 분해 할당 문법으로 작성 할 수 있다.
const {aaaa, bbbb, cccc} = obj
console.log(aaaa, bbbb) // 1111 2222
// 배열 구조 분해 할당 문법의 단점은, 배열 안에 데이터가 나열 되어 있기 때문에,
// 데이터의 개수가 많아지면 작성 자체가 어려워지는 문제점이 발생 한다.
// 예)
// const arr = [1, 2, 3] 일 때, 값 3 을 뽑아 내고 싶으면,
// const [, , c] = arr 이라고 표현 하면 됬었다.
// 그런데 만약에, const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] 일 때,
// 값 9를 뽑아 내고 싶으면, const [, , , , , , , , n] = arr 으로 표현 하게 된다.
// 하지만, 객체 구조 분해 할당 문법은 이러한 단점이 없다.
// 객체 선언 내부에, 속성 이름이 유일하기 때문에 (key), 해당 하는 데이터를 쉽게 찾을 수 있다.
// 예시)
const obj2 = {
dddd: 1,
eeee: 2,
ffff: 3,
gggg: 4
}
const {ffff} = obj2
console.log(ffff) // 3
const obj2 = {
dddd: 1,
eeee:2,
ffff: 3,
gggg: 4
}
// 만약에 없는 속성 값을 출력 하면 undefined 가 뜨게 된다.
// 그런데 이 때 값을 부여 해 줄 수 있다.
// 예시)
const {x = 96} = obj2
console.log(x) // 96 (속성 x 는 존재 하지 않지만, 객체 구조 분해 할당 문법으로 작성 가능)
// 만약에 x 라는 속성이 있고 값도 부여 되어 있을 때,
// 이것을 위와 같이 작성 하면, 숫자 96은 무시 된다.
// 즉, 위의 방법은, x 라는 속성에 값이 없는 경우때, 어떤 특정한 값을 디폴트로 지정 할 때 사용 한다.
// =======================================================
// 추가로, 아래와 같이 속성 이름을 변경 할 수도 있다.
const {y = 28, gggg: Hwanii} = obj2
// console.log(y, gggg) // gggg is not defined 에러가 뜬다.
console.log(y, Hwanii) // 28 4 (객체 속성의 gggg가 Hwanii로 변경 되었다)
// [ 정리 ]
// 구조 분해 할당 문법은 배열과 객체 데이터 에서 사용 된다.
// 그리고, 배열과 객체 데이터가 사용 할 수 있는 전개 연산자를 조합 해서 응용이 가능 하다.
// 통상적으로 전개 연산자를 사용 하면, 나머지 값들이 들어가게 되는 변수로 rest 라는 이름을 사용 한다.
// 구조 분해 할당 문법에 전개 연산자를 사용 하는 이유는 JS 코드를 굉장히 많이 줄여줄 수 있기 때문 !
5회 반복 하기
23.11.02 [ 1회 ]
반응형