-----8일차------

안녕하세요!
오늘의 주제는 바로!
구조!분해!할당!
구조를 분해해서 할당하겠다!!!라는걸까요??
구조분해할당이란 무엇일까요??

오늘은 구조분해할당이 무엇인지에 대해서 알아보도록 하겠습니다!

1. 구조분해할당이란?

정의
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
이라고 공식문서인 MDN에서는 설명하고있습니다

잘 이해가 안가시죠??
말 그대로 구조를 분해하여서 개별변수에 재 할당하는것을 의미합니다
이렇게 된다면 변수명을 가지고서 특정 객체나 배열의 속성또는값을 가지고 올수있게 되겠죠!

특히 구조분해 할당시 초기값을 설정할수가 있어서 에러를 방지할때에도 큰 도움이 됩니다!
예를 들어볼까요??

let x,y
[x,y=2]=[1]

console.log(x)
// 1
console.log(y)
//2

이런식으로 초기값을 설정할수가 있습니다
그런데 이런의문이 드실수도 있어요!

그럼 초기값을 설정해준곳에 다른값이 들어오면어떻게 되냐! 에러가 발생하는거 아니냐!
음...코드를 통해서 한번 봐볼까요??

let x,y
[x=3,y=2]=[1,10]
console.log(x)
//1
console.log(y)
//10

자 ! 여기서 알수있는것!
초기값이 있더라도 새로운 값이 들어오게 된경우 그 값을 반환할수있곘죠??

여기에서 구조분해할당의 장점을 알수있습니다!
눈여겨 보신분들은 바로 아실건데요~~
바로!

값에 undefined가 오게될 경우 undefined대신에 defaultValue를 반환하게 된다는거죠!
이렇게 된다면 오류 해결에 큰 도움이 되겠죠?!

자 이번엔 객체의 부분에서 봐볼까요??

객체에서는 구조분해 할당을 어떻게 사용할까요??
코드로 한번 보시죠!

const apple ={
	red:1000,
    green:1500
}

자 apple이라는 객체에 red와 green의 key와 value가 각각 있습니다!
이때!

apple이라는 객체에 green을 semigreen으로 바꾸고싶습니당
이때 구조분해할당을 사용하면

const {green:semigreen} = apple;

이렇게 할수가있겠는데요!
과연 바꼇을까요~??

확인해보죠!

console.log(semigreen)
//1500

깔끔하게 바꼇네요

뭔가 기존에 바꾸던 방식보다 더 어려운것 같다고요??
물론 이렇게 짧고 간단한 객체에서는 왜 이걸? 꼭?
이렇게 생각하실수도있지만 실제로 큰 객체 또는 data와 같은 다중의 객체를 가져올때는 훨씬 효과적이기에 학습하실때부터 연습해 놓으신다면 나중에 큰 도움이 되겠죠??

오늘의 포스팅은
여!기!까!지!
입니당!

오늘은 구조분해 할당에 대해서 이야기를 나눠봤는데요
잘쓰면 정말 유용한 도구이기도 하고 훨씬 효율적이기에 오늘소개해 드렸습니다!

그럼 오늘도 즐거운 하루!!

밸~~바!