JAVASCRIPT.INFO PART1: 4.5 ~ 5.5

프롤로그

익숙하게 사용하던 자바스크립트의 객체 생성 방식과 배열 메서드들을 다시 학습하며 기본기를 점검하는 시간을 가졌습니다. 이번 학습의 목표는 단순히 기능을 사용하는 것을 넘어, 각 기능의 정확한 동작 원리를 이해하고 코드의 품질을 높이는 데 있었습니다.

---

1. new 연산자와 생성자 함수

객체 리터럴과 달리, 생성자 함수와 new 연산자는 일관된 구조를 가진 객체 인스턴스를 생성하는 데 사용됩니다.

• 동작 원리: new 키워드로 생성자 함수를 호출하면, 1) 빈 객체가 생성되고 this에 바인딩됩니다. 2) 함수 본문이 실행되며 this에 프로퍼티가 추가됩니다. 3) this가 암시적으로 반환됩니다.
• this 컨텍스트: 생성자 함수 내에서 this는 새로 생성되는 인스턴스를 명확히 가리킵니다.

`Calculator` 예제는 `this`를 통해 상태와 메서드를 캡슐화하는 과정을 잘 보여줍니다.

    function Calculator() {
      this.read = function() {
        this.a = +prompt('값 1', 0);
        this.b = +prompt('값 2', 0);
      };
    
      this.sum = function() {
        return this.a + this.b;
      };
    
      this.mul = function() {
        return this.a * this.b;
      };
    }
    
    let calculator = new Calculator();
    calculator.read();
    
    alert( "Sum=" + calculator.sum() );
    alert( "Mul=" + calculator.mul() );

class 문법이 내부적으로 이 생성자 함수의 원리를 기반으로 동작한다는 점을 다시 한번 확인하며, 객체 생성의 기본 원리에 대한 이해를 다졌습니다.

---

2. 배열 메서드: 선언적 프로그래밍으로의 전환

for 반복문을 사용하는 것은 '어떻게' 동작할지를 순서대로 지시하는 명령형 프로그래밍 방식입니다. 반면, map, filter, reduce와 같은 배열 메서드는 '무엇을' 원하는지 선언하는 방식으로, 코드의 가독성과 의도를 명확하게 만듭니다.

map: 배열 요소 변환

map은 배열의 모든 요소를 순회하며, 콜백 함수를 실행한 결과로 구성된 새로운 배열을 반환합니다.

    let names = ["john", "pete", "ann"];
    
    // 문자열 배열을 객체 배열로 변환
    let users = names.map((name) => ({
      name: name,
      length: name.length
    }));
    
    // users -> [ {name: 'john', length: 4}, {name: 'pete', length: 4}, {name: 'ann', length: 3} ]

filter: 배열 요소 선택

`filter`는 특정 조건을 만족하는 요소들만 선택하여 **새로운 배열**을 반환합니다.

    let users = [
      {id: 1, name: "John", age: 20},
      {id: 2, name: "Ann", age: 24},
      {id: 3, name: "Pete", age: 31},
    ];
    
    // 25세 미만인 사용자만 선택
    let youngUsers = users.filter(user => user.age < 25);
    
    // youngUsers -> [ {id: 1, name: 'John', age: 20} ]

reduce: 배열 값 누적

reduce는 배열을 순회하며 값을 누적하여, 최종적으로 하나의 결과값을 반환합니다. 배열을 다른 자료구조로 변환하는 데 매우 유용합니다.

    let users = [
      {id: 'john', name: "John Smith", age: 20},
      {id: 'ann', name: "Ann Smith", age: 24},
    ];
    
    // User 배열을 id를 key로 갖는 객체로 변환
    let usersById = users.reduce((obj, user) => {
      obj[user.id] = user;
      return obj;
    }, {});
    
    // usersById -> { john: { ... }, ann: { ... } }

---

오늘의 다짐

익숙하게 사용하던 문법이라도 그 내부 동작 원리를 다시 점검하는 것이 얼마나 중요한지 깨달았습니다. 특히 배열 메서드들을 통해 명령형 사고에서 선언형 사고로 전환하는 연습은 코드의 품질을 한 단계 높여줄 것이라 확신합니다. 앞으로도 단순히 기능을 사용하는 것을 넘어, 그 원리를 깊이 있게 이해하는 노력을 계속하겠습니다.