06.자바스크립트[배열과 객체의 구조분해 할당,spread 와 rest ]

1. 배열과 객체의 구조분해 할당

구조 분해 할당이란 

배열이나 객체의 요소 및 프로퍼티들을 분해해서 그 값을 각각의 변수에 할당하는 표현식

구조 분해 할당을 이용하면 배열이나 객체 안에 있는 값을 쉽고 간편하게 추출가능.

구조분해 할당 예

 

선언분리 할당

-변수를 선언을 분리해서 배열의 값을 할당하는 방

선언분리 할당 예시

 

변수가 배열보다 적은경우는 2개만 할당받음

배열의 길이보다 변수가 더 많이 할당했을경우, 배열을 할당받지 못하면 undefined 출력됨

 

- 두 변수의 값을 서로 바꾸는 코드

• 두 변수의 값을 교환하기 위해 tmp라는 임시 변수가 필요

-배열의 구조분해 할당을 통한 두 개의 변수의 값을 서로 바꾸는 코드

구조분해할당

-객체 구조분해 할당

= 인덱스를 이용해 인덱스의 순서대로 변수의 값을 할당하는 배열의 구조분해와는 달리 키값을 기준으로 객체를 분해해

변수에 할당함

왼쪽 중괄호는 변수 / 오른쪽은 분해할 객체

colors 객체의 c1,c2,c3를 각각 color1, color2, color3 로 변경하겠다는 의미이며 코드 실행결과 각각 변수의값이 할당됨

colors 객체의 값이 c4라는 변수에 할당되지 않아 undefined라는 값이 할당되었을때 새로운 변수에 기본값을 할당해주면

---

2. spread 와 rest ( 스프레드와 레스트 문법)

spread... 

• ... 점 세 개의 기호를 사용해 특정 객체가 가진 프로퍼티들을 펼쳐주는 역할을 함
•  객체나 배열에서 반복적인 값을 퍼트려주는 역할
• 스프레드는 직역하면 확산, 퍼짐 , 전파라는 뜻이다
• 실제로 특정 배열의 요소나 객체의 프로퍼티 값들을 펼치는 역할을 한다 

배열에서도 spread ...  스프레드 문법을 사용할 수  있음

 

-rest 

= 특정 부분들을 하나의 배열이나 객체로 묶어주는 문

= 나머지 매개 변수 , 점... 를 사용하지만 다른 역할

= 객체에서 rest는 구조분해 할당과 함께 사용된다

= rest 문법은 spread와는 다르게 순서에 상관없이 여러 번 작성할 수 없고 항상  맨 마지막에 작성해야 함

rest 변수는 객체의 형태로 출력됨

※ rest 문법은 가장 마지막에 작성해야 함

 

배열에서의 rest문법 사용해 보기 

 

-함수에서 rest문법 사용해보기

rest 매개변수는 함수의 매개변수가 매우 많거나 몇 개가 될지 모를 때 함수에서 받아 온

매개변수들을 배열로 나타낼 때 유용

 

 

spread와 rest 문법 모두 사용하는 코드

1, spread

• 배열에 10개가 넘는 요소가 존재했다면 코드가 길어지고 작성하기 어려움 그래서 spread를 사용할 것임
• spread는 배열이나 객체의 값을 퍼뜨리는 역할을 함 
• 문법은 객체나 배열에서 중복된 부분을 퍼뜨릴 때 혹은 함수를 호출할 때인수로 전달할 값을 퍼뜨릴 때 사용됨

 

2. rest

• 매개변수를 rest로 전달받을 때 깔끔한 코드가 됨
• 문법은 객체나 배열로 묶어야 할 때 혹은 구조분해 할당을 사용해 배열이나 객체의 값을 묶어서 할당할 때
• 함수의 매개변수로 많은 값들을 전달받거나 특정 매개변수들을 제외한 나머지 매개변수들을 묶어서  사용되는 문법