자바스크립트 중급 개념 3 - 구조 분해 할당

6. 구조 분해 할당 (Destructuring assignment)

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

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

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

배열 구조 분해

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

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

split 이용

let str = "Mike-Tom-Jane";

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

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

• 만약 해당하는 값이 없으면 undefiend가 할당 됨

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

// a = 1, b = 2, c = undefiend

• 이럴 때 기본 값을 주면 에러를 방지할 수 있음

let [a=3, b=4, c=5] = [1, 2];

console.log(a); // 1
console.log(b); // 2
console.log(c); // 5

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

let [user1, ,user2] = ["Mike", "Tom", "Jane","Tony"];

console.log(user1); // "Mike"
console.log(user2); // "Jane"

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

배열 구조 분해 : 바꿔치기

let a = 1;
let b = 2;

• a와 b의 값을 바꾸고 싶으면 c를 만들어서 코드 작성하기
• c에 a를 잠시 저장해두고, b를 a로 옮기고, 임시로 저장했던 c의 값을 b로 옮김

let c = a;
a = b;
b = c;

• 이때 구조 분해 할당을 사용하면 간단하게 구현 가능

[a, b] = [b, a];

객체 구조 분해

let user = { name: "Mike", age: 30 };
let {name, age} = user;
// 위 코드는 아래와 같다
// let name = user.name;
// let age = user.age;

let {name, age} = user; // 이렇게 순서를 바꿔도 동일하게 동작함

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

• 배열 구조 분해 할당과 다른 점은 순서를 신경쓰지 않아도 된다는 점임

let user = { name: "Mike", age: 30 };
let {name: userName, age: userAge} = user;

console.log(userName); // "Mike"
console.log(userAge); // 30

• 이렇게 변수 이름 바꿔서 사용해도 됨

객체 구조 분해 : 기본값

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

• user객체에 gender가 없다면 male이라는 기본값을 설정해줄 수 있음
• 객체로부터 받은 값이 undefined일때만 기본값 사용하다는 점 기억하기

---

7. Rest parameters(나머지 매개변수), Spread syntax(전개 구문)

인수 전달

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

showName(); // undefiend

• JavaScript에서 함수에 남겨주는 인수의 개수는 제약이 없음
• 인수의 개수를 정해놓고 함수로 만들어도 실제 호출할 때 정확히 그 개수를 맞출 필요 없음
• 함수의 인수를 얻는 방법은 두 개가 있음

1. arguments로 접근
2. 나머지 매개 변수 사용

• 과거에는 arguments만 사용 가능했지만 지금은 여러 장점이 있는 나머지 매개 변수를 많이 사용함(권장함)
• 결정적으로 화살표 함수에는 arguments가 없음

arguments

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

function showName(name){
	console.log(arguments.length);
  	console.log(arguments[0]);
  	console.log(arguments[1]);
}

showName('Mike', 'Tom');
// 2
// 'Mike'
// 'Tom'

나머지 매개변수(Rest parameters)

• 정해지지 않은 개수의 인수를 표로 나타낼 수 있게 함
• ... 점 세개를 찍고 배열 이름을 정해줌
• 그럼 임시 배열 안에 전달된 인수들이 들어감
• 아무것도 전달하지 않으면 undefiend가 아닌 빈 배열을 나타냄

function showName(...names){
	console.log(names);
}

showName(); // []
showName('Mike'); // ['Mike']
showNmae('Mike', 'Tom'); // ['Mike', 'Tom']

전달 받은 모든 수 더하는 예제

function add(...numbers) {
    let result = 0;
    numbers.forEach((num) => {
        result += num;
    });
    console.log(result);
    return result;
}

add(1, 2, 3); // 콘솔에 6 출력 후 6 반환
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 콘솔에 55 출력 후 55 반환

function add(...numbers) {
    let result = 0;
    numbers.reduce((prev, cur) => {
        prev + cur
    });
    console.log(result);
    return result;
}

add(1, 2, 3); // 콘솔에 6 출력 후 6 반환
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 콘솔에 55 출력 후 55 반환

user 객체 만들어주는 생성자 함수 예제

// name, age는 일반적인 변수로 받고 skills는 나머지 매개 변수로 받음
function User(name, age, ...skills) {
	this.name = name;
  	this.age = age;
  	this.skills = skills;
}

const user1 = new User("Mike", 30, "HTML", "CSS");
const user2 = new User("Tom", 20, "JS", "React");
const user3 = new User("Jane", 10, "English");

console.log(user1);
console.log(user2);
console.log(user3);

• 나머지 매개 변수는 항상 마지막에 있어야함

전개 구문(Spread syntax) : 배열

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = [...arr1, ...arr2];

console.log(result); // [1, 2, 3, 4, 5, 6]

• ...arr1은 arr1을 풀어서 쓴 것
• ...arr2는 arr2를 풀어서 쓴 것

---

참고

• 코딩앙마 유튜브