JAVASCRIPT.INFO PART1: 5.5 ~ 6.1

프롤로그

배열 메서드에 대한 복습을 마치고, javascript.info Part 1의 나머지 주요 개념들을 학습했습니다. 오늘은 배열을 넘어 Map, Set과 같은 다양한 자료구조를 익히고, 구조 분해 할당처럼 코드의 편의성을 높여주는 문법을 점검했습니다. 마지막으로 프로그래밍의 근본적인 사고방식 중 하나인 '재귀'의 개념을 다시 한번 정리하는 시간을 가졌습니다.

---

1. 다양한 자료구조: Map, Set, 그리고 Weak Collection

배열과 객체 외에도, 특정 목적에 더 효율적인 자료구조들이 존재했습니다.

Map과 Set

• Map: 키-값 쌍을 저장하는 컬렉션입니다. 객체와 달리 키의 타입에 제약이 없다는 점이 가장 큰 차이점입니다. 객체를 키로 사용할 수 있어 유용합니다.
• Set: 중복을 허용하지 않는 값들의 컬렉션입니다. 배열에서 중복된 값을 쉽게 제거하는 용도로 자주 사용됩니다.

        // Set을 이용한 배열 중복 제거
        let arr = [1, 2, 2, 3, 4, 4, 5];
        let uniqueArr = Array.from(new Set(arr)); // [1, 2, 3, 4, 5]

WeakMap과 WeakSet

• 핵심 개념: '약한 참조(Weak Reference)'를 사용합니다. Map이나 Set은 키로 참조하는 객체가 있으면, 다른 곳에 참조가 없어도 가비지 컬렉션(GC)의 대상이 되지 않습니다. 하지만 WeakMap과 WeakSet은 GC를 막지 않으므로, 참조하는 객체가 사라지면 함께 메모리에서 제거됩니다.
• 주요 용도: 객체에 대한 부가적인 정보를 저장하되, 정보 때문에 객체의 메모리 누수를 유발하고 싶지 않을 때 사용됩니다.

Object.keys, values, entries

일반 객체는 for...of로 직접 순회할 수 없지만, 이 메서드들을 사용하면 객체의 키, 값, 또는 [키, 값] 쌍을 배열로 변환하여 forEach, map 등 배열 메서드를 활용할 수 있게 됩니다.

    let user = {
      name: "John",
      age: 30
    };

    // user 객체를 [ ['name', 'John'], ['age', 30] ] 배열로 변환
    for (let [key, value] of Object.entries(user)) {
      console.log(`${key}:${value}`); // name:John, age:30
    }

---

2. 유용한 도구들: 구조 분해 할당과 JSON

구조 분해 할당 (Destructuring Assignment)

객체나 배열의 값을 변수로 더 쉽게 할당할 수 있게 해주는 매우 유용한 문법입니다. 코드의 길이를 줄이고 가독성을 크게 향상시킵니다.

객체 구조 분해

    let options = {
      title: "My menu",
      width: 100,
      height: 200
    };
    
    let { title, width, height } = options;
    // title = "My menu", width = 100, height = 200

배열 구조 분해

    let arr = ["John", "Smith"];
    let [firstName, surname] = arr;
    // firstName = "John", surname = "Smith"

JSON.stringify와 JSON.parse

• JSON.stringify: 자바스크립트 객체를 서버와 통신하거나 데이터를 저장하기 위한 표준 포맷인 JSON 문자열로 변환합니다.
• JSON.parse: JSON 문자열을 다시 자바스크립트 객체로 변환합니다.

---

3. 새로운 사고방식: 재귀 (Recursion)

재귀는 함수가 자기 자신을 호출하는 프로그래밍 기법입니다. 복잡한 문제를 동일한 구조의 더 작은 문제로 나누어 해결할 때 유용합니다.

재귀 함수는 반드시 두 부분으로 구성되어야 합니다.
1. 종료 조건 (Base Case): 더 이상 재귀 호출을 하지 않고 값을 반환하는 부분. 무한 루프를 방지합니다.
2. 재귀 단계 (Recursive Step): 문제를 더 작은 단위로 쪼개어 자기 자신을 다시 호출하는 부분.

예시: 팩토리얼 계산

    function factorial(n) {
      // 종료 조건: n이 1이거나 그보다 작으면 1을 반환
      if (n <= 1) {
        return 1;
      }
      // 재귀 단계: n * (n-1의 팩토리얼)을 반환
      else {
        return n * factorial(n - 1);
      }
    }
    
    console.log(factorial(5)); // 120

재귀는 실행 컨텍스트가 스택에 계속 쌓이는 방식으로 동작하므로, 깊이가 너무 깊어지면 'Maximum call stack size exceeded' 에러가 발생할 수 있습니다.

---

오늘의 다짐

오늘은 데이터를 담는 다양한 그릇(Map, Set)과 코드를 꾸미는 유용한 도구(구조 분해 할당)를 익혔습니다. 더 나아가, 재귀라는 새로운 문제 해결 방식을 통해 사고의 폭을 넓힐 수 있었습니다.

각 자료구조와 패턴의 장단점을 명확히 이해하고, 주어진 문제에 가장 적합한 해결책을 선택하는 것이 좋은 개발자의 역량임을 다시 한번 느꼈습니다.