구조분해할당(Destructuring Assignment)
키를 가진 데이터 여러개를 하나의 엔티티에 저장할 때는 객체를, 컬렉션에 데이터를 순서대로 저장할 때는 배열을 사용한다. 개발을 하다 보면 함수에 객체나 배열을 전달해야하는 경우가 있는데 가끔 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 있다.
이 때 객체나 배열을 ‘변수’로 ‘분해’할 수 있게 해주는 문법이 구조 분해 할당이다. 배열과 객체의 각 요소에 변수를 지정할 수 있을 뿐만아니라, 묶음으로 지정이 가능하며 useState도 배열의 구조 분해 할당을 사용하 것을 알 수 있다.
const [state,setState] = useState()
외에도 함수의 매개변수가 많거나, 매개변수 기본값이 필요한 경우 등에서 구조 분해 할당의 역할이 필요하다.
구조 분해 할당이라는 명칭은 어떤 것을 복사한 이후에 변수로 ‘분해’ 해준다는 의미로 붙여졌다. 이 과정에서 분해 대상은 수정 또는 파괴되지 않는다.
- 엔티티: 데이터의 집합을 의미한다. 저장되고 관리되어야하는 데이터, 개념/장소/사건 등을 가리킴, 유형 또는 무형의 대상을 가리킴
배열을 변수로 분해하기
// soheyon과 kimg을 요소로 가진 배열
let name = ["sohyeon", "kim"]
// 구조 분해 할당을 이용해 선언과 동시에 할당
// firstName엔 arr[0]
// surName엔 arr[1]을 할당
let [firstName, surName] = name;
console.log(firstName) // sohyeon
console.log(surName) // kim[ ]는 배열의 경우에 사용하고, 객체인 경우에는 {}로 선언한다.
구조 분해 할당이란 명칭은 어떤 것을 복사한 이후에 변수로 '분해(destructurize)'해준다는 의미 때문에 붙여졌다. 이 과정에서 분해 대상은 수정 또는 파괴되지 않는다.
배열의 요소를 직접 변수에 할당하는 것보다 코드 양이 줄어든다는 점만 다르다.
// let [firstName, surName] = name;
let firstName = name[0];
let surName = name[1];객체 분해하기
const obj = {
name : "sohyeon",
age : 20,
position : "frontend"
}
// 이름과 나이만 뽑아서 새로운 변수에 담는다.
const { name,age } = obj
console.log(name) //sohyeon
console.log(age) //20배열 선언부의 변수 이름은 마음대로 해도 되는 반면 객체는 선언부를 key값으로 지정해야한다. 배열에서는 선언과 할당이 따로 일어나도 되지만, 객체는 선언과 할당이 동시에 일어나야한다.
매개변수(parameter)
함수 선언에서 활용하기 위해 사용하는 변수를 '매개변수'라고 한다.
이름에서 나타나듯이 나중에 함수를 호출할 때 '매개역할'을 하는 변수이다.
여기서 함수를 호출할 때 사용하는 것을 '인자, 인수(arguement)'라고 한다.
function 함수명(매개변수1, 매개변수2, ...){
실행문;
}
함수명(인자1, 인자2, ...);파라미터 기본값 지정(default parameter)
파라미터가 비어있는 경우 기본값을 지정하는 방법이다. 아래와 같이 파라미터 중 하나인 e2를 받지 않은 상태에서 출력하게 되면 undefined가 출력된다.
JavaScript에서, 함수의 매개변수는 undefined가 기본이다.
function message(surName, firstName){
console.log(`My name is ${surName} ${firstName}`)
}
message('sohyeon')
//'My name is sohyeon undefined'여기서 파라미터에 / ='기본값'/ 을 지정하면, 파라미터가 비어있을 경우 기본값으로 대채해 출력한다.
function message(surName, firstName='Kim'){
console.log(`My name is ${surName} ${firstName}`)
}
message('sohyeon')
//'My name is sohyeon Kim'나머지 매개변수 (Rest parameters ES6)
Rest parameters 는 이름을 정해주지 않은 파라미터의 배열을 말한다. 파라미터 이름 앞에 ... 를 더해 임의의 매개변수를 정의하는 것으로 나머지 전달인자를 하나의 배열로 반환한다.
아래처럼 전달인자가 매개변수보다 많은 경우, 매개변수 만큼만 처리가 된다.
function print(a){
console.log(a);
}
print(1,2,3,4,5)
// 첫번째 전달인자 1이 출력여기서 나머지 매개변수는 ... 기호를 이용해서 매개변수를 임의로 만드는 것으로 나머지 전달인자를 모두 하나의 배열로 반환하게 된다. 매개변수의 갯수에 따라 반환되는 나머지 매개변수가 달라진다고 볼 수 있다. 만약 매개변수 없이 나머지 매개변수만 있다면 처음부터 끝까지 모든 전달인자를 하나의 배열로 반환한다.
function print(a, ...b){
console.log(a); // 첫번째 전달인자 1이 출력
console.log(b); // 나머지 2 ~ 5 까지의 전달인지가 배열로 출력
}
print(1,2,3,4,5)
// 1
// [2, 3, 4, 5]arguments와 rest parameter의 차이
rest parameter은 이름을 정해주지 않은 파라미터를 말한다. 반면에 arguments는 함수로 전달되는 모든 파라미터이다. arguments는 배열이 아니다. 하지만 rest parameter은 배열이기 때문에, sort, map, forEach, pop 메소드 사용이 가능하다.
출처 및 참고
구조분해할당
https://ko.javascript.info/destructuring-assignment
https://beomy.tistory.com/18
https://www.youtube.com/watch?v=lV7ulA7R5Nk
매개변수
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters
https://www.youtube.com/watch?v=WPoORBtCQa8
