[Javascript] 매개변수에 객체를 구조 분해 할당해서 전달해보자

객체 안의 키(key)를 상수로 사용하고 싶을 때, 구조 분해 할당을 활용해 보자!

const students = {
    apple: "애플",
    banana: "바나나",
    orange: "오렌지"
}
const { apple, banana, orange } = students;

//키(key)값 만으로 호출할 수 있게 됨!
console.log(apple); //애플
console.log(banana); //바나나
console.log(orange); //오렌지

 

배열은 인덱스(index)를 기준으로 구조 분해할 수 있다

const user = ["1", "2", "3"]
const [ one, two, three ] = user;
//즉 배열은 인덱스 기준으로 구조분해 할 수 있다

console.log(one); //1
console.log(two); //2
console.log(three); //3

매개변수로 객체를 전달할 때, 구조 분해 할당을 통해 전달할 수 있다

const cat = {
    name: "콩이",
    age: 10,
    weight: 5
}
const introduceMyCat = (cat) => {
    console.log(`우리집 고양이의 이름은 ${cat.name}입니다. 그리고 나이는 ${cat.age}살이구요. 무게는 ${cat.weight}kg입니다`);
}

const introduceMyCat = ({name, age, weight}) => {
    console.log(`우리집 고양이의 이름은 ${name}입니다. 그리고 나이는 ${age}살이구요. 무게는 ${weight}kg입니다`);
}

 

⭐️ 중요

1. 매개변수도 구조 분해 할당으로 접근할 수 있다
단점) 축약되어 있어서 문서화가 덜 되어 있다, 키(key)가 뭔지 벨류(value)가 뭔지 알기 힘들다

introduceMyCat({name, age, weight});

2. 객체를 직접 넣어주면 된다
단점) 키(key)와 벨류(value)를 알 수 있지만 코드가 길어진다

introduceMyCat({
    name: cat.name,
    age: cat.age,
    weight: cat.weight
});

 

구조 분해 할당으로 객체를 매개변수로 전달하면서 다양한 형태로 전달할 수 있게 되었다

function a(key, value){ //매개변수 2개
    console.log(key, value);
}

function b({key, value}){ //매개변수가 객체 1개
    console.log(key, value);
}

a("token_key", 1234); //매개변수가 어떤 기능을 하는지 알기 힘들다
b({
    key: "token_key",
    value: 1234
}); //객체로 키(key)와 벨류(value)를 함께 전달한다

//더 디벨롭하자면,
function c(name, {key, value}){ //매개변수 2개
    console.log(name, key, value);
}

const key = {key: "string", value: "123"}

c("커밋", key); //커밋, string, 123