[JavaScript] 객체 리터럴 정의, 구조 분해 할당

0. 요약

• 위 2개는 비슷하면서도 다르다. 하지만 아래 코드를 보면 대략적인 차이를 느낄 수 있다.

const obj = { key_id: 1, key_data: '12345' };
const { key_id: id, key_data: data } = obj;
console.log(id, data); // 출력: 1, '12345'

• 객체 리터럴은 변수를 초기화한다. 그래서 변수명 : 할당값 형식으로 표현된다.
• 반대로 구조 분해 할당은 기존의 파라미터를 이용해 값을 할당한다. 그래서 할당값: 변수명 형식으로 표현된 것을 볼 수 있다.
• 객체 리터럴은 새롭게 정의하고, 구조 분해 할당은 말 그대로 어떤 구조를 분해해서 값을 할당해준다.
• 아래 예시들에 좀더 다양한 활용법들이 있다.
• 기존에 쓰고있더라도 정식 명칭이 뭔지도 모르고 사용했을 수 도 있다.

 

1. Object Literal Definition(객체 리터럴 정의)

• JS에서 객체를 생성하는 기본적인 방법을 말한다.
• 장점
  • 간결하고 직관적인 문법으로 빠르게 객체 생성 가능
  • 데이터를 그룹화하거나 상태를 관리하기 적합
  • JS 함수 및 배열과 자연스럽게 통합
• 단점
  • 동적인 객체 생성이 복잡한 경우, 팩토리 함수나 클래스를 사용하는게 낫다.
  • 대규모 프로그램에서 타입 관리와 재사용성 측면에서 제한적
• 사용 예시

// 1 : 키-값 쌍의 구조
const obj = { key: value };

// 2 : 단축 속성명
const name = "Alice";
const age = 25;
const person = { name, age }; // { name: "Alice", age: 25 }

// 3 : 동적 속성명
const dynamicKey = "name";
const obj = { [dynamicKey]: "Alice" }; // { name: "Alice" }

// 4: 메서드 정의 간소화
const obj = {
  greet() {
    return "Hello";
  }
};
console.log(obj.greet()); // "Hello"

// 5 : 중첩 객체
const nestedObj = {
  user: {
    name: "Alice",
    age: 25
  }
};

 

2. Destructuring Assignment(구조 분해 할당)

• 개인적으로 정의하자면 객체 리터럴 정의와 유사하지만, 반대로 기존에 있던 배열이나 객체를 분해해서 새로운 변수에 값을 할당하는 방법이라고 생각한다.
• 장점
  • 코드 간결화
  • 가독성 향상
  • 매개변수 처리 간소화
• 단점
  • 구조 복잡성 : 중첩이 심해지면 가독성이 떨어짐
  • 키가 없는 경우 에러 발생하여 undefined 반환
• 예시

1. 배열 구조 분해
기본 예제
const arr = [1, 2, 3];
const [a, b, c] = arr;

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

기본값 설정 : 배열에 값이 없을 경우 기본값 설정 가능
const [x = 10, y = 20] = [5];
console.log(x); // 5
console.log(y); // 20

나머지 요소 모으기
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]

2. 객체 구조 분해
기본 예제
const obj = { name: "Alice", age: 25 };
const { name, age } = obj;

console.log(name); // Alice
console.log(age);  // 25

다른 이름으로 할당
const { name: userName, age: userAge } = obj;
console.log(userName); // Alice
console.log(userAge);  // 25

기본값 설정
const { city = "Unknown" } = obj;
console.log(city); // Unknown

3. 중첩 구조 분해
const nestedArray = [1, [2, 3]];
const [a, [b, c]] = nestedArray;

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

객체의 중첩
const nestedObj = { user: { name: "Alice", age: 25 } };
const { user: { name, age } } = nestedObj;

console.log(name); // Alice
console.log(age);  // 25

4. 함수 매개 변수에서 사용
객체 매개 변수
function greet({ name, age }) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}
greet({ name: "Alice", age: 25 }); // Hello, Alice. You are 25 years old.

배열 매개 변수
function sum([a, b]) {
  return a + b;
}
console.log(sum([1, 2])); // 3

5. 유용한 활용
스왑 변수 값
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

함수의 여러 반환값 처리
function getCoordinates() {
  return [10, 20];
}
const [x, y] = getCoordinates();
console.log(x, y); // 10 20

REST API 응답 처리
const response = { data: { id: 1, name: "Alice" }, status: 200 };
const { data: { id, name }, status } = response;

console.log(id, name, status); // 1 Alice 200

 

 

3. 참조

1) Object initializer : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

Object initializer - JavaScript | MDN

2) Destructuring assignment : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Destructuring assignment - JavaScript | MDN