[JS] 구조 분해 할당 (Destructuring assignment)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 기본적인 배열 구조 분해
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1, 2, 3

// 일부만 가져오기
const [first, , third] = numbers;
console.log(first, third); // 1, 3

// 나머지 요소 가져오기
const [head, ...tail] = numbers;
console.log(head, tail); // 1, [2, 3]

// 기본값 설정
const [x = 0, y = 0, z = 0, w = 0] = [1, 2];
console.log(x, y, z, w); // 1, 2, 0, 0

// 변수 교환하기
let a1 = 1,
  b1 = 2;
[a1, b1] = [b1, a1];
console.log(a1, b1); // 2, 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 기본적인 객체 구조 분해
const user = {
  name: "김코딩",
  age: 20,
  email: "kim@test.com",
};

const { name, age } = user;
console.log(name, age); // "김코딩", 20

// 새로운 변수명으로 할당
const { name: userName, age: userAge } = user;
console.log(userName, userAge); // "김코딩", 20

// 기본값 설정
const { name, age, gender = "남성" } = user;
console.log(gender); // "남성"

// 중첩된 객체 구조 분해
const student = {
  name: "박해커",
  scores: {
    math: 90,
    science: 85,
  },
};

const {
  name,
  scores: { math, science },
} = student;
console.log(math, science); // 90, 85

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 객체 매개변수 구조 분해
function printUser({ name, age, email = "없음" }) {
  console.log(`이름: ${name}, 나이: ${age}, 이메일: ${email}`);
}

printUser({ name: "김코딩", age: 20 });
// "이름: 김코딩, 나이: 20, 이메일: 없음"

// 배열 매개변수 구조 분해
function getFirstTwo([first, second]) {
  return [first, second];
}

console.log(getFirstTwo([1, 2, 3, 4])); // [1, 2]

// 복잡한 객체의 특정 데이터만 추출
function processUser({ name, age, scores: { math = 0, science = 0 } = {} }) {
  return `${name}(${age}세) - 수학: ${math}, 과학: ${science}`;
}

const result = processUser({
  name: "김코딩",
  age: 20,
  scores: { math: 90 },
});
console.log(result); // "김코딩(20세) - 수학: 90, 과학: 0"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
class DataProcessor {
  // API 응답 데이터 처리
  static processResponse(response) {
    const {
      data: {
        user: { name, email },
        posts = [],
      },
      status,
    } = response;

    return {
      userName: name,
      userEmail: email,
      postCount: posts.length,
      isSuccess: status === 200,
    };
  }

  // 설정 객체 처리
  static processConfig({
    debug = false,
    timeout = 1000,
    endpoints: { api = "/api", auth = "/auth" } = {},
  } = {}) {
    return {
      isDebug: debug,
      timeoutMs: timeout,
      urls: { api, auth },
    };
  }
}

// 사용 예시
const response = {
  data: {
    user: {
      name: "김코딩",
      email: "kim@test.com",
    },
    posts: [
      { id: 1, title: "게시글1" },
      { id: 2, title: "게시글2" },
    ],
  },
  status: 200,
};

console.log(DataProcessor.processResponse(response));
console.log(DataProcessor.processConfig({ debug: true }));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
class Utils {
  // 객체에서 필요한 속성만 추출
  static pick(object, keys) {
    return keys.reduce((picked, key) => {
      const { [key]: value } = object;
      return value !== undefined ? { ...picked, [key]: value } : picked;
    }, {});
  }

  // 객체에서 특정 속성 제외
  static omit(object, keys) {
    const { ...rest } = object;
    keys.forEach((key) => delete rest[key]);
    return rest;
  }

  // 중첩 배열 평탄화
  static flatten(arr) {
    return arr.reduce((flat, item) => {
      const [first, ...rest] = Array.isArray(item)
        ? Utils.flatten(item)
        : [item];
      return [...flat, first, ...rest];
    }, []);
  }
}

// 사용 예시
const user = {
  name: "김코딩",
  age: 20,
  email: "kim@test.com",
  password: "1234",
};

console.log(Utils.pick(user, ["name", "email"]));
// { name: "김코딩", email: "kim@test.com" }

console.log(Utils.omit(user, ["password"]));
// { name: "김코딩", age: 20, email: "kim@test.com" }

console.log(Utils.flatten([1, [2, 3], [4, [5, 6]]]));
// [1, 2, 3, 4, 5, 6]

1
2
3
4
5
6
7
8
9
10
11
function required(param) {
  throw new Error(`${param} is required!`);
}

function createUser({ name = required("name"), age = required("age") } = {}) {
  return { name, age };
}

// createUser();  // Error: name is required!
// createUser({ name: "김코딩" });  // Error: age is required!
createUser({ name: "김코딩", age: 20 }); // OK

1
2
3
4
5
6
7
8
9
10
11
const key = "name";
const value = "김코딩";

// 객체 생성 시 동적 속성
const user = {
  [key]: value,
};

// 구조 분해 시 동적 속성
const { [key]: userName } = user;
console.log(userName); // "김코딩"