JS 구조 분해 할당/나머지 매개변수,전개 구문

---

구조 분해 할당(Destructuring assignment)

---

구조분해 할당이란?

• 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식이다

배열의 구조분해 할당

• 예제1

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

• 예제2

let users= ["Mike","Tom","Jane"];
let [user1,user2,user3]=users;
console.log(user1)//"Mike"
console.log(user2)//"TOm"
console.log(user3)//"Jane"

• 예제3

let [a,b,c] =[1,2];
console.log(a)//1
console.log(b)//2
console.log(c)//undefined

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

• 예제4

let [user1, ,user2]=["Mike","Tom","Jane","Tony"]
console.log(user1)//"Mike"
console.log(user2)//"Jane"

• 예제5(바꿔치기)

let a =1;
let b =2;
[a,b]=[b,a];

객체의 구조분해 할당

순서를 신경쓰지 않아도됨

• 예제1

let user={name:"Mike",age:30};
let {age,name}=user;
console.log(name);//"Mike"  (let name =user.name)
console.log(age);//30       (let age = user.age)

새로운 변수 이름으로 할당

• 예제2

let user ={name:"Mike",age:30};
let{name:userName ,age:userAge} =user ;
console.log(userName) //'Mike'
console.log(userAge)//30

-예제3

let user ={name:'Mike',age:30};
let {name,age,gender}=user;
console.log(gender)//undefined
let {name,age,gender='male'}=user;
console.log(gender)//'male'

• 예제4

let user ={
  name:'Jane',
  age:18,
  gender:'female'
};
let {name,age,gender ='male'} =user;
console.log(gender)//'female'

---

나머지 매개변수

---

함수의 인수

1.특징

• 함수에 넘겨주는 인수의 개수는 제약이 없다
• 아무것도 전달하지 않는경우 undefined가 찍힌다

function showName(name){
  console.log(name);
}
showName('Mike');//'Mike'
showName('Mike','Tom')//'Mike'
showName();//undefined

2.인수 접근방법
1)arguments이용

• 함수로 넘어 온 모든 인수에 접근가능
• 함수 내에서 이용 가능한 지역변수
• length/index
• Array 형태의 객체
• 배열의 내장 메서드 없음(forEach,map)

function showName(name){
  console.log(arguements.length);
  console.log(arguements[0]);
  console.log(arguements[1]);
}
showName('Mike','Tom');
//2
//'Mike'
//'Tom'

2)나머지 매개 변수(Rest parameters)

• 정해지지않은 개수의 인수를 배열로 나타낼수있게 한다

function showName(...names){
  console.log(names);
}
showName();[]
showName('Mike');//['Mike']
showName('Mike',Tom);//['Mike','Tom']

• 함수에 매번 인수의 개수가 다를때 유용

function add(...numbers){
  let result =0;
  numbers.forEach((num)=>{result+=num});
  console.log(result);
}
add(1,2,3); //6
add(1,2,3,4,5,6,7,8,9,10); //55

• 나머지 매개변수는 맨끝자리에 있어야 한다

function User(name,age,...skills){
  this.name =name;
  this.age =age;
  this.skills=skills;
}
let user1 =user('jiwoong',26,'js','react')
console.log(user1)
//{name:'jiwoong',age:26,skils:['js','react']}

---

전개구문(병합)

---

배열에 전개구문

• 예제1/병합

let arr1 =[1,2,3];
let arr2= [4,5,6];
let result=[0,...arr1,...arr2,7,8,9]//[0,1,2,3,4,5,6,7,8,9]

• 예제2/배열복제(참조아님)

let arr= [1,2,3];
let arr2 =[...arr]; //[1,2,3]

객체에서 전개구문

• 예제1/병합

let user ={name:'Mike'}
let mike={...user,age:30}
console.log(mike)//{name:'Mike',age:30}

• 예제2/객체 복제(참조아님)

let user ={name:'Mike',age:30};
let user2={...user}
user2.name="Tom";
console.log(user.name);// "Mike"
console.log(user2.name)//"Tom"

• 예제3/병합

let user ={name:'Mike'};
let info={age:30};
let fe=["js","React"];
let lang=["korean","English"];

user ={
  ...user,
  ...info,
  skils:[...fe,...lang]
};
console.lig(user)//{name: 'Mike', age: 30, skils: Array(4)}