🔑그냥 버티자, 버티면 다 나한테 돌아온다
📃 동적인 자바스크립트는 객체를 생성할 때, 속성이름과 속성 값이 필요하지만, 아래와 같이 속성 이름을 생략할 수 있는 경우가 있습니다
💻CODE
const name = "Jayden"
const obj = {
name,
age: 21
}
console.log(obj)
⬆️ 객체를 만들 때, 속성 이름이 변수 이름과 같다면 name: name과 같이 길게 작성할 필요 없이 name만 적어, name이라는 속성에 해당하는 값을 name 변수의 값으로 자동 할당합니다.
💻Use Case 1
const returnObj = (name, age) => {
return { name: name, age: age }
}
const returnObj = (name, age) => {
return { name, age }
}
console.log(returnObj("jayden", 24))
⬆️ 단축 속성명은 ES6에서 도입된 기능으로, 객체 리터럴을 작성할 때 변수 이름과 객체 속성 이름이 동일하면, name: name처럼 속성 이름을 반복할 필요 없이 name만 사용하여 더 간결하게 코드를 작성할 수 있습니다
💻Use Case 2
const name = "jayden";
const age = 24;
const obj = {
name,
age
}
console.log({ name, age });
⬆️ 자바스크립트는 객체 리터럴에서 name과 age가 변수로 존재하면 이를 단축 속성명으로 해석하여 { name: name, age: age }처럼 자동으로 변환합니다
📃 객체 리터럴에서 속성 이름을 동적으로 계산하여 설정하는 방법입니다. 속성 이름을 변수나 표현식으로 설정할 수 있습니다
💻CODE
const condition = true;
const obj = {
[condition ? "isActive" : "isInactive"]: true
};
console.log(obj);
const arr = [1, 2, 3];
const obj = {};
arr.forEach(num => {
obj[`key_${num}`] = num * 2;
});
console.log(obj);
⬆️ 위에 두 가지 사례에서 볼 수 있듯이 condition에 따라 객체 key 값을 동적으로 설정해 줄 수도 있고, 반복문을 통해 동적으로 속성명을 생성해 줄 수도 있습니다
💻CODE
⬆️ 다음 문제는 my_string라는 문자열이 주어졌을 때, 문자 구간마다 n씩 반복해서 최종 문자열을 return 해주는 문제입니다 이때 자바스크립트에서는 이러한 문자열을 전개 연산자를 통해 배열로 만들어줄 수 있습니다.
💻CODE
const list = [...my_string]
⬆️ 여기서부터는 너무 간단하죠? 문자열 하나씩 접근해서 n번씩 반복해 주면 됩니다
💻CODE
const list = [...my_string];
return list.map(str => str.repeat(n)).join("");
⬆️ 이처럼 전개구문은 다양한 유즈케이스와 배열이나 객체를 유연하게 다룰 수 있다는 장점이 존재합니다
💻CODE
const obj1 = [1, 2, 3]
const obj2 = [...obj1]
⬆️ for문과 같이 반복문을 수행할 필요없이 전개 연산자를 통해 배열을 복사할 수 있습니다
💻CODE
const obj1 = { name: "jayden", age: 24 }
const obj2 = { ...obj1, age: 20, email: "qkrwoghd04@naver.com" }
console.log(obj1)
console.log(obj2)
⬆️ 너무 간편하지 않나요? 전개 연산자는 그 간편함과 유연한 특성 덕분에 실무 프로젝트에서 매우 자주 사용되는 연산자입니다. 특히, 다양한 데이터 구조를 효율적으로 다룰 수 있어 활용도가 높습니다
📃 하나 가정을 해보죠. 우리가 함수에 가변적인 인수를 받아 평균값을 계산해야 한다고 해봅시다. 하지만 입력될 값이 몇 개인지 미리 알 수 없습니다. 이런 경우, 전개 연산자를 사용하여 해결할 수 있습니다
💻CODE
function calculateAverage(...numbers) {
const sum = numbers.reduce((total, num) => total + num, 0);
return sum / numbers.length;
}
console.log(calculateAverage(10, 20, 30));
console.log(calculateAverage(5, 15));
console.log(calculateAverage(7));
⬆️ 위 코드에서 ...numbers는 함수로 전달된 모든 인수를 배열로 모아줍니다. 이를 활용해 입력값이 몇 개든 평균값을 쉽게 계산할 수 있습니다
📃 배열의 요소를 쉽게 추출하여 변수에 할당할 수 있는 편리한 문법입니다. 이 문법을 사용하면 배열의 구조를 "분해"하여 개별 값을 변수에 바로 할당할 수 있습니다.
💻 기본 사용법
const [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
⬆️ 배열의 순서에 따라 변수 a, b, c에 각각 값이 할당됩니다
💻 Swap
let a = 10;
let b = 20;
console.log({ a, b });
[a, b] = [b, a];
console.log({ a, b });
⬆️ 자바에서는 두 변수의 값을 교환하려면 temp라는 임시 변수를 선언하여 처리해야 합니다. 하지만 자바스크립트에서는 배열 비구조화를 활용해 간단히 값을 교환(swap)할 수 있습니다
📃 객체 비구조화는 객체의 속성을 쉽게 추출하여 변수에 할당하는 편리한 문법입니다. 이를 사용하면 객체 속성의 값을 간단히 변수에 담을 수 있습니다.
💻 기본 사용법
let obj1 = {name: "jayden", age: 20}
let {name, age} = obj1
console.log(name)
console.log(age)
⬆️ 객체의 name과 age 속성을 추출하여 변수에 바로 할당할 수 있습니다. 객체 속성 이름과 변수 이름이 동일해야 합니다
💻 다른 이름으로 변수 할당(Aliasing)
const obj = { name: "Jayden", age: 24 };
const { name: userName, age: userAge } = obj;
console.log(userName);
console.log(userAge);
⬆️ 객체 속성의 값을 다른 변수 이름으로 저장할 수 있습니다. 여기서는 name을 userName으로, age를 userAge로 할당했습니다.
💻 Rest와 함께 사용하기
const obj = { name: "Jayden", age: 24, country: "Korea" };
const { name, ...rest } = obj;
console.log(name);
console.log(rest);
⬆️ 객체의 name 속성을 추출하고, 나머지 속성들은 rest 객체로 저장됩니다.
📌 단축 속성명: 객체 리터럴 작성 시, 변수 이름과 속성 이름이 같다면 속성 이름을 생략하여 간결하게 표현 가능
예: { name, age }는 { name: name, age: age }와 동일
📌 계산된 속성명: 객체 속성 이름을 조건식이나 표현식으로 동적으로 설정 가능
예: { [key]: value }, 반복문으로 동적 속성 생성 가능
📌 전개 연산자: 배열/객체를 복사, 병합, 수정, 또는 함수의 가변인수 처리에 활용
예: { ...obj, newProp: value }, [...arr]
📌 배열/객체 비구조화: 배열/객체의 요소를 추출해 변수에 바로 할당 가능
예: [a, b] = [1, 2], { name, ...rest } = obj
