구조 분해 할당

배열

배열 구조 분해 할당 [ ]=arr

let fruits = ["사과","딸기","바나나"]
let [fruit1, fruit2, fruit3] =fruits;
=> 이렇게 작성하면 각 1,2,3에 사과,딸기,바나나가 담긴다.
위의 구조 분해 할당 구문은 아래와 같다.
let fruit1= fruits[0];
let fruit2= fruits[1];
let fruit3= fruits[2];
// fruit1 = 사과
// fruit3 = 바나나

• 즉, 값이 []안에 작성된 변수에 할당된다.
• 직접 변수에 할당하는 것 보다 코드를 줄일 수 있다.

만약, let [fruit1, ,fruit3] = fruits; 이렇게 입력하면(, 사용) 필요하지 않는 배열요소는 제외시킬 수 있다.

• 배열의 요소를 직접 변수에 할당하는 것보다 코드를 줄일 수 있다.
• ... 스프레드 구문을 사용하여 나머지 요소들을 배열로 받을 수 있다.

  let [name="green",hobby="study"] = ["blue"] 할당할 값이 없을 때 기본값을 설정할 수 있다.

---

변수 교환 [ ] = [ ]

let str1 = "green"
let str2 = "blue"

//서로의 값을 교환하고 싶을때, (str1에 blue, str2에 green)

[str1, str2] = [str2, str1]

//위와 같이 작성한다.

---

스프레드 구문 ...

나머지 요소를 배열로 반환하여 저장

let newArr= ["a","b","c","d","e","f","g"];
let [str1,str2,str3,...str4] = newArr;
//str1에는 a / str2에는 b / str3에는 c / str4에는 나머지 d e f g를 할당 (,...를 이용)
//...str4=["d","e","f","g"];

let [name="green", hobby="study"] = ["blue"]

객체

객체 구조분해 할당 { }

let student={
    name: "green",
    age: 20;
    haJob: true;
}

let { name,age,hasJob } = student;
{ 객체 keyname: 변수이름 }
배열 구조할당과 같이, 값이 {}안에 작성된 변수에 할당된다.

let{ name: n, hasJob: job, age } = student;
{ 객체 keyname: 변수이름 }으로도 value를 지정할 수 있다.
// let name = student.name;
// let age = student.age;
// let hasJob = student.hasJob

let obj = { title: "green", height: 200, width: 200 }
let { title, ...rest } = obj;

스프레드 구문 ...

나머지 요소를 오브젝트로 반환하여 저장

let obj = { title:"green", height:100, width:200 };
let { title, ...rest } = obj;
👉 title = "green";
👉 rest = { height: 100, width: 200 };

함수 매개변수

function 함수명({ object의 key명 }){
함수 안에서 object의 key를 사용할 수 있다.
}
함수명(사용할 object명)

함수 안에서 object의 key값을 object.key로 작성하지 않고 key만으로 호출 할 수 있다.

let options = {
    title: "MyTitle",
    items: [ "item1","item2" ]
}

function showMenu({ title, items }){
    console.log(title) // 👉"MyTitle"
    console.log(items) // 👉["item1","item2"]
}
showMenu(options)    

↓ 다른 예제로 다시 작성

//객체 리터럴
let dog1={
  name: "구름",
  age: 3,
  sound(){
    console.log("hi");
  }
  // sound가 key가 되고 function이 value가 된다.
}
// 객체는 key와 value로 구성되어있다.
let name = dog1.name; // = "구름" 
let sound = dog1.sound; // sound(){console.log("hi")}함수가 담기게 된다.

let { name, sound } = dog1;
// name이라는 변수, sound라는 변수를 만들었다.
// dog1에서 {}의 key로 값을 받아온 값과 동일하다. 
console.log(name); // = "구름" 
console.log(dog1.sound); // sound(){console.log("hi")}함수가 담기게 된다.