자바스크립트 구조분해할당(배열과 객체)

구조분해할당 (Destruncturing assignment)

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

 

1. 배열 구조분해

배열은 순서가 들어있다. 그래서 1번째에 넣은 값은 첫번째에, 두번째에 넣은 값은 두번째에 차례로 들어간다.

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

console.log(x); // 1
console.log(y); // 2

아래와 같이 순서대로 들어가서 x=1, y=2 가 들어간다.

users라는 이름의 배열이 있다. 

user1, user2, user3라는 이름의 변수를 대괄호를 묶어서 선언하고 users 배열을 할당했다.

let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users;

이 의미는 아래와 같다.

user1은 users의 첫번째, user2은 users의 두번째, user3은 users의 3번째이다.

구조분해할당을 통해서 순서대로 할당된다.

 

split을 이용하여 '-'를 기준으로 잘라서 구조분해할당을 하는 응용도 해볼 수 있다.

let str = "Mike-Tom-Jane";
let [user1, user2, user3] = str.split('-');

console.log(user1); // 'Mike'
console.log(user2); // 'Tom'
console.log(user3); // 'Jane'

str.split을 하면 아래와 같이 ['Mike', 'Tom', 'Jane']이 나오고 

그것을 배열에 구조분해할당을 할 수 있다.

 

🔫  배열 구조 분해 : 기본값

아래와 같이 배열의 수가 맞지 않게 값을 넣어주면, c의 값에는 undefined가 나온다.

이러면 에러가 발생할 수 있는데 이러한 것을 방지하기 위해서 기본값을 설정해줄 수 있다.

아래와 같이 c가 undefined인 경우, 기본값으로 c=5가 들어있기때문에 콘솔을 찍어보면 c는 5가 나오는것을 알 수 있다.

 

🔫 배열 구조 분해 : 일부 반환값 무시

공백과 쉼표를 이용해서 필요하지 않은 배열 요소를 무시할 수 있다.

첫번째 요소는 'Mike'가, 두번째 요소는 생략하고 ('Tom'은 무시됨), 세번째 요소에는 'Jane'이 할당된다.

네번째 요소도 사용하는 값이 없기 때문에 무시된다.

 

🔫  배열 구조 분해 : 바꿔치기

 

 

2. 객체 구조 분해

user라는 이름의 객체가 있고, 거기에 name과 age 프로퍼티가 있다.

{중괄호}를 이용한 변수선언을 하고 user객체를 선언해주었다

let user = {name: 'Mike', age: 30};
let {name, age} = user;

console.log(name); // 'Mike'
console.log(age); // 30

let {name, age} = user;

위의 코드는 아래의 코드와 동일하다.

let name = user.name;
let age = user.age;

 

기본적으로 배열의 구조분해할당과 같지만,

한가지 다른점은 순서를 신경쓰지 않아도 된다는 점이다.

아래와 같이 name과 age의 순서를 바꿔도 동일하게 작동한다.

 

🔫 객체 구조 분해 : 새로운 변수 이름으로 할당 (key값 변경)

프로퍼티의 키값을 무조건 사용해야 하는건 아니다.

 

name과 age로만 사용할 수 있는게 아니라 변수이름을 바꿀수 있다.

name: userName으로, age는 userAge로 바꿨다.

(name ➡️ userName, age ➡️ userAge로 키값 변경)

 

🔫 객체 구조 분해 : 기본값

객체 구조 분해에서도 기본값을 줄 수 있다.

let user = {name: 'Mike', age: 30};
let {name, age, gender} = user;

gender변수에는 아무것도 해당되는것이 없어서 undefined가 들어간다.

이럴때 기본값을 사용해주면 된다.

user 객체에 gender가 없다면 'male'이 기본으로 할당된다.

 

하지만 user 객체에 gender가 있다면 기본값을 추후에 넣어준다고 하더라도 원래 있던 값이 사용된다.

그래서 아래와 같이 gender에 'male'을 넣어준다고 하더라도 'female'이 콘솔값으로 나온다.

 

 

📚 영상을 통해 공부한 뒤, 일일이 정리한 내용입니다.✍️

 

참고자료

코딩앙마 자바스크립트 중급 강좌 #구조분해할당