[LG CNS AM CAMP 1기] 단축 속성명, 계산된 속성명, 전개 연산자, 배열 & 객체 비구조화 개념 정리

🔑그냥 버티자, 버티면 다 나한테 돌아온다

💡 단축 속성명(Shorthand Property Name)

📃 동적인 자바스크립트는 객체를 생성할 때, 속성이름과 속성 값이 필요하지만, 아래와 같이 속성 이름을 생략할 수 있는 경우가 있습니다

💻CODE

const name = "Jayden"

const obj = {
  name,
  age: 21
}

console.log(obj) //{name: 'Jayden', age: 21}

⬆️ 객체를 만들 때, 속성 이름이 변수 이름과 같다면 name: name과 같이 길게 작성할 필요 없이 name만 적어, name이라는 속성에 해당하는 값을 name 변수의 값으로 자동 할당합니다.

💻Use Case 1

const returnObj = (name, age) => { //original
  return { name: name, age: age }
}

const returnObj = (name, age) => {  //SPN
  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: 'jayden', age: 24 }

⬆️ 자바스크립트는 객체 리터럴에서 name과 age가 변수로 존재하면 이를 단축 속성명으로 해석하여 { name: name, age: age }처럼 자동으로 변환합니다

💡 계산된 속성명(Computed Property Names)

📃 객체 리터럴에서 속성 이름을 동적으로 계산하여 설정하는 방법입니다. 속성 이름을 변수나 표현식으로 설정할 수 있습니다

💻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);  // { key_1: 2, key_2: 4, key_3: 6 }

⬆️ 위에 두 가지 사례에서 볼 수 있듯이 condition에 따라 객체 key 값을 동적으로 설정해 줄 수도 있고, 반복문을 통해 동적으로 속성명을 생성해 줄 수도 있습니다

💡 전개 연산자(Spread Operator)

🟠 전개 연산자는 실무에서 매우 유용하게 사용됩니다. 배열이나 객체를 효율적으로 다루는 데 큰 도움이 되죠. 실제로 실무에서는 배열이나 객체를 통해 가져오는 데이터가 많기 때문에, 전개 연산자가 특히 중요한 역할을 합니다

💻CODE

⬆️ 다음 문제는 my_string라는 문자열이 주어졌을 때, 문자 구간마다 n씩 반복해서 최종 문자열을 return 해주는 문제입니다 이때 자바스크립트에서는 이러한 문자열을 전개 연산자를 통해 배열로 만들어줄 수 있습니다.

💻CODE

const list = [...my_string] // ["h", "e", "l", "l", "o"]

⬆️ 여기서부터는 너무 간단하죠? 문자열 하나씩 접근해서 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) //{name: 'jayden', age: 24}
console.log(obj2) //{name: 'jayden', age: 20, email: 'qkrwoghd04@naver.com'}

⬆️ 너무 간편하지 않나요? 전개 연산자는 그 간편함과 유연한 특성 덕분에 실무 프로젝트에서 매우 자주 사용되는 연산자입니다. 특히, 다양한 데이터 구조를 효율적으로 다룰 수 있어 활용도가 높습니다

🟢 함수의 가변인수로 사용

📃 하나 가정을 해보죠. 우리가 함수에 가변적인 인수를 받아 평균값을 계산해야 한다고 해봅시다. 하지만 입력될 값이 몇 개인지 미리 알 수 없습니다. 이런 경우, 전개 연산자를 사용하여 해결할 수 있습니다

💻CODE

function calculateAverage(...numbers) {
  const sum = numbers.reduce((total, num) => total + num, 0);
  return sum / numbers.length;
}

console.log(calculateAverage(10, 20, 30));  // 20
console.log(calculateAverage(5, 15));       // 10
console.log(calculateAverage(7));           // 7

⬆️ 위 코드에서 ...numbers는 함수로 전달된 모든 인수를 배열로 모아줍니다. 이를 활용해 입력값이 몇 개든 평균값을 쉽게 계산할 수 있습니다

💡 배열의 비구조화(Array Destructuring)

📃 배열의 요소를 쉽게 추출하여 변수에 할당할 수 있는 편리한 문법입니다. 이 문법을 사용하면 배열의 구조를 "분해"하여 개별 값을 변수에 바로 할당할 수 있습니다.

💻 기본 사용법

const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

⬆️ 배열의 순서에 따라 변수 a, b, c에 각각 값이 할당됩니다

💻 Swap

let a = 10;
let b = 20;

console.log({ a, b });

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

console.log({ a, b });

⬆️ 자바에서는 두 변수의 값을 교환하려면 temp라는 임시 변수를 선언하여 처리해야 합니다. 하지만 자바스크립트에서는 배열 비구조화를 활용해 간단히 값을 교환(swap)할 수 있습니다

💡 객체의 비구조화(Destructuring Assignment for Objects)

📃 객체 비구조화는 객체의 속성을 쉽게 추출하여 변수에 할당하는 편리한 문법입니다. 이를 사용하면 객체 속성의 값을 간단히 변수에 담을 수 있습니다.

💻 기본 사용법

let obj1 = {name: "jayden", age: 20}

let {name, age} = obj1

console.log(name) // jayden
console.log(age) // age

⬆️ 객체의 name과 age 속성을 추출하여 변수에 바로 할당할 수 있습니다. 객체 속성 이름과 변수 이름이 동일해야 합니다

💻 다른 이름으로 변수 할당(Aliasing)

const obj = { name: "Jayden", age: 24 };

const { name: userName, age: userAge } = obj;

console.log(userName); // "Jayden"
console.log(userAge);  // 24

⬆️ 객체 속성의 값을 다른 변수 이름으로 저장할 수 있습니다. 여기서는 name을 userName으로, age를 userAge로 할당했습니다.

💻 Rest와 함께 사용하기

const obj = { name: "Jayden", age: 24, country: "Korea" };

const { name, ...rest } = obj;

console.log(name); // "Jayden"
console.log(rest); // { age: 24, country: "Korea" }

⬆️ 객체의 name 속성을 추출하고, 나머지 속성들은 rest 객체로 저장됩니다.

📝 SUMMARY

📌 단축 속성명: 객체 리터럴 작성 시, 변수 이름과 속성 이름이 같다면 속성 이름을 생략하여 간결하게 표현 가능

예: { name, age }는 { name: name, age: age }와 동일

📌 계산된 속성명: 객체 속성 이름을 조건식이나 표현식으로 동적으로 설정 가능
예: { [key]: value }, 반복문으로 동적 속성 생성 가능

📌 전개 연산자: 배열/객체를 복사, 병합, 수정, 또는 함수의 가변인수 처리에 활용
예: { ...obj, newProp: value }, [...arr]

📌 배열/객체 비구조화: 배열/객체의 요소를 추출해 변수에 바로 할당 가능
예: [a, b] = [1, 2], { name, ...rest } = obj

저작자표시 비영리 변경금지

💡 단축 속성명(Shorthand Property Name)

📃 동적인 자바스크립트는 객체를 생성할 때, 속성이름과 속성 값이 필요하지만, 아래와 같이 속성 이름을 생략할 수 있는 경우가 있습니다

💻CODE

⬆️ 객체를 만들 때, 속성 이름이 변수 이름과 같다면 name: name과 같이 길게 작성할 필요 없이 name만 적어, name이라는 속성에 해당하는 값을 name 변수의 값으로 자동 할당합니다.

💻Use Case 1

⬆️ 단축 속성명은 ES6에서 도입된 기능으로, 객체 리터럴을 작성할 때 변수 이름과 객체 속성 이름이 동일하면, name: name처럼 속성 이름을 반복할 필요 없이 name만 사용하여 더 간결하게 코드를 작성할 수 있습니다

💻Use Case 2

⬆️ 자바스크립트는 객체 리터럴에서 name과 age가 변수로 존재하면 이를 단축 속성명으로 해석하여 { name: name, age: age }처럼 자동으로 변환합니다

💡 계산된 속성명(Computed Property Names)

📃 객체 리터럴에서 속성 이름을 동적으로 계산하여 설정하는 방법입니다. 속성 이름을 변수나 표현식으로 설정할 수 있습니다

💻CODE

⬆️ 위에 두 가지 사례에서 볼 수 있듯이 condition에 따라 객체 key 값을 동적으로 설정해 줄 수도 있고, 반복문을 통해 동적으로 속성명을 생성해 줄 수도 있습니다

💡 전개 연산자(Spread Operator)

💻CODE

⬆️ 다음 문제는 my_string라는 문자열이 주어졌을 때, 문자 구간마다 n씩 반복해서 최종 문자열을 return 해주는 문제입니다 이때 자바스크립트에서는 이러한 문자열을 전개 연산자를 통해 배열로 만들어줄 수 있습니다.

💻CODE

⬆️ 여기서부터는 너무 간단하죠? 문자열 하나씩 접근해서 n번씩 반복해 주면 됩니다

💻CODE

⬆️ 이처럼 전개구문은 다양한 유즈케이스와 배열이나 객체를 유연하게 다룰 수 있다는 장점이 존재합니다

🟣 배열값 복사

💻CODE

⬆️ for문과 같이 반복문을 수행할 필요없이 전개 연산자를 통해 배열을 복사할 수 있습니다

🔵 객체값 복사 && 새로운 속성 추가 및 변경

💻CODE

⬆️ 너무 간편하지 않나요? 전개 연산자는 그 간편함과 유연한 특성 덕분에 실무 프로젝트에서 매우 자주 사용되는 연산자입니다. 특히, 다양한 데이터 구조를 효율적으로 다룰 수 있어 활용도가 높습니다

🟢 함수의 가변인수로 사용

📃 하나 가정을 해보죠. 우리가 함수에 가변적인 인수를 받아 평균값을 계산해야 한다고 해봅시다. 하지만 입력될 값이 몇 개인지 미리 알 수 없습니다. 이런 경우, 전개 연산자를 사용하여 해결할 수 있습니다

💻CODE

⬆️ 위 코드에서 ...numbers는 함수로 전달된 모든 인수를 배열로 모아줍니다. 이를 활용해 입력값이 몇 개든 평균값을 쉽게 계산할 수 있습니다

💡 배열의 비구조화(Array Destructuring)

📃 배열의 요소를 쉽게 추출하여 변수에 할당할 수 있는 편리한 문법입니다. 이 문법을 사용하면 배열의 구조를 "분해"하여 개별 값을 변수에 바로 할당할 수 있습니다.

💻 기본 사용법

⬆️ 배열의 순서에 따라 변수 a, b, c에 각각 값이 할당됩니다

💻 Swap

⬆️ 자바에서는 두 변수의 값을 교환하려면 temp라는 임시 변수를 선언하여 처리해야 합니다. 하지만 자바스크립트에서는 배열 비구조화를 활용해 간단히 값을 교환(swap)할 수 있습니다

💡 객체의 비구조화(Destructuring Assignment for Objects)

📃 객체 비구조화는 객체의 속성을 쉽게 추출하여 변수에 할당하는 편리한 문법입니다. 이를 사용하면 객체 속성의 값을 간단히 변수에 담을 수 있습니다.

💻 기본 사용법

⬆️ 객체의 name과 age 속성을 추출하여 변수에 바로 할당할 수 있습니다. 객체 속성 이름과 변수 이름이 동일해야 합니다

💻 다른 이름으로 변수 할당(Aliasing)

⬆️ 객체 속성의 값을 다른 변수 이름으로 저장할 수 있습니다. 여기서는 name을 userName으로, age를 userAge로 할당했습니다.

💻 Rest와 함께 사용하기

⬆️ 객체의 name 속성을 추출하고, 나머지 속성들은 rest 객체로 저장됩니다.

📝 SUMMARY

📌 단축 속성명: 객체 리터럴 작성 시, 변수 이름과 속성 이름이 같다면 속성 이름을 생략하여 간결하게 표현 가능

예: { name, age }는 { name: name, age: age }와 동일

📌 계산된 속성명: 객체 속성 이름을 조건식이나 표현식으로 동적으로 설정 가능예: { [key]: value }, 반복문으로 동적 속성 생성 가능

📌 전개 연산자: 배열/객체를 복사, 병합, 수정, 또는 함수의 가변인수 처리에 활용예: { ...obj, newProp: value }, [...arr]

📌 배열/객체 비구조화: 배열/객체의 요소를 추출해 변수에 바로 할당 가능예: [a, b] = [1, 2], { name, ...rest } = obj

티스토리툴바

📌 계산된 속성명: 객체 속성 이름을 조건식이나 표현식으로 동적으로 설정 가능
예: { [key]: value }, 반복문으로 동적 속성 생성 가능

📌 전개 연산자: 배열/객체를 복사, 병합, 수정, 또는 함수의 가변인수 처리에 활용
예: { ...obj, newProp: value }, [...arr]

📌 배열/객체 비구조화: 배열/객체의 요소를 추출해 변수에 바로 할당 가능
예: [a, b] = [1, 2], { name, ...rest } = obj