Destructuring Assignment ( 구조분해할당) ++

---

구조분해 할당

---

객체와 배열은  JS에서 가장 많이 쓰이는 자료 구조 이다 

함수에 객체나 배열을 전달해야 하는 경우 생긴다 

객체나 배열에 저장된 데이터 전체가 아닌 일부만 

필요해서 사용 되는 경우도 있다  이 외에도

매개변수가 많거나 매개변수 기본값이 필요한 경우 

구조 분해를 많이 사용한다 

---

배열 분해하기

---

 

let arr = ["kim","sang"];

let [firstname,subname] = arr;

console.log(firstname)

"kim"

console.log(subname)

"sang"

 

인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게 되었다

---

'....' 로 나머지 요소 가져오기

---

 

베열 앞쪽에 위치한 값 몇 개만 필요 나머지 값들은 모아서 저장하고 싶을 떄가 있다  그럴 떄 점 세 개 ...를 붙인 매개변수 하나 추가 

나머지 (rest) 요소를 가져올 수  있다

---

기본값

---

할당하고자 하는 변수 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생 하지 않는다 

할당 값이 없으면 undefined로 취급되기 떄문

 

let [first name, surname] = [];

console.log(firstName);

console.log(surName);

 

= 을 이용하면 할당 값이 없을 때 기본으로 할당해 줄 값 '기본 값' 설정

let [name = "Guest", surName= "anonymous"] =["Julius"];

 

console.log(name); Julius

console.log(surName); anonymous

 

---

객체 분해하기

---

구조 분해 할당으로 객체도 분해할 수 있다 

 

할당 연산자 우항에 분해하고자 하는 객체 좌항에 는 객체 프로퍼티 패턴을 넣는다 분해하려는

객체 프로퍼티의 키 목록으로 사용

let option = { title : "안녕", width:100, heigth:100};

 

let {title,width, height } = option;

console.log(title);  안녕

console.log(width); 100

console.log(height); 100 

---

정리

---

+구조 분해 할당을 사용하면 객체나 배열을 변수로 연결

+할당 연사자 좌항의 패턴과 우측의 구조가 같으면 객체가 있는 복잡한 구조에서도 원하는데이터를 뽑아낼 수 있다 

+배열 분해하기 arry 의 첫 번쨰 요소는 item1에 두번쨰요소는 변수 item2 에 할당 되고 나머지 요소둘은 배열 rest에 저장