[JavaScript] 자바스크립트 배열 및 객체 구조 분해 할당, 나머지 매개변수(restParameter) | [x, y] = [1, 2], ...args

📝배열의 구조 분해 할당

let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users;
console.log(`user1 : ${user1}, user2 : ${user2}, user3 : ${user3}`)
// user1 : Mike, user2 : Tom, user3 : Jane

배열의 구조 분해 할당이란 기본적인 구조로 A라는 배열의 요소를 서로 다른 변수에 담고 싶을 때 되게 유용합니다

 

let [a1,b1,c1] = [1,2];
console.log(`a1 : ${a1}, b1 : ${b1}, c1 : ${c1}`);
// a1 : 1, b1 : 2, c1 : undefined

let [a2=3, b2=4, c2=5] = [1,2];
console.log(`a2 : ${a2}, b2 : ${b2}, c1 : ${c2}`);

값이 없는 경우는 undefined을 반환하고 초기값 설정을 줄 수 있습니다

 

/** --- 활용 1 --- **/
let str = "Mike-Tom-Jane";
let [user1, user2, user3] = str.split('-');
console.log(`user1 : ${user1}, user2 : ${user2}, user3 : ${user3}`)
// user1 : Mike, user2 : Tom, user3 : Jane

/** --- 활용 2 --- **/
let X = 1; let Y = 2;
console.log(`X : ${X}, Y : ${Y}`); // X : 1, Y : 2
[X, Y] = [Y, X];
console.log(`X : ${X}, Y : ${Y}`); // X : 2, Y : 1

/** --- 활용 3 --- **/
[first, second] = [second, first]; // swap variables

/** --- 활용 4 --- **/
let [first] = [1, 2, 3, 4];
console.log(first); // outputs 1

/** --- 활용 5 --- **/
function f([first, second]: [number, number]) {
  console.log(first);
  console.log(second);
}
f([1, 2]);

X, Y의 변수 값을 서로 바꿀 때 아주 유용하고 split로 나눈 변수를 바로 넣는 등 다양하게 활용이 가능합니다

 

 

📝객체의 구조 할당 분해

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

console.log(`name : ${name}, age : ${age}`); // name : Mike, age : 30
console.log(`userName : ${userName}, userAge : ${userAge}`); // userName : Mike, userAge : 30

객체도 구조 할당 분해가 동일하게 가능합니다

 

let player = {
    name: "Jane",
    age: 18
};

let {name:playerName, age:playerAge, gender:playerGender} = player;
console.log(`playerName : ${playerName}, playerAge : ${playerAge}, playerGender : ${playerGender}`)
// playerName : Jane, playerAge : 18, playerGender : undefined

let redPlayer = {
    name: "Jane",
    age: 18,
    gender : "female"
};

let {name:redName, age:redAge, gender:redGender = "male"} = redPlayer;
console.log(`redName : ${redName}, redAge : ${redAge}, redGender : ${redGender}`)
// redName : Jane, redAge : 18, redGender : female

초기값이 없는 경우 동일하게 undefined를 반환하며 초기값 설정이 가능합니다

 

 

📝나머지 매개변수

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", 30, "React");

console.log(user1); // User { name: 'Mike', age: 30, skills: [ 'html', 'css' ] }
console.log(user2); // User { name: 'Tom', age: 30, skills: [ 'React' ] }

나머지 매개변수란 함수에서 인자값이 여러개가 필요할 때 하나하나 추가할 수 없으니 공통된 특성을 ...을 이용해 배열로 받을 수 있습니다 여기에서 보면 ...skills가 나머지 매개변수로 쓰였고 나머지 매개변수를 쓰려면 맨 마지막에 둬야합니다

 

let numbers1 = [1, 2, 3, 4];
let numbers2 = [5, 6, 7];
let totalNumbers = [...numbers1, ...numbers2, 8, 9];
console.log(totalNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

...을 배열에 사용하면 요소들로 분해가 됩니다 배열을 합치거나 등 다양하게 활용이 가능합니다

 

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

console.log(arr);  // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2, 3 ]

let user = {name: "Mike", age: 30};
let user2 = {...user, numbers: [...numbers1, 5, 6]};

user2.name = "Tom";
console.log(user.name);    // Mike
console.log(user2.name);   // Tom
console.log(user2.numbers) // [ 1, 2, 3, 4, 5, 6 ]

배열뿐만 아니라 객체도 동일하게 이용이 가능합니다