0. Prerequisite

힘내자 힘..

01. this

🤔 : 왜 this가 하나의 챕터로 있을까요? 기본적으로 this란 무엇일까요?

일반적으로 다른 언어(객체지향)에서의 this는 매우 명확한 한 가지 기능만을 합니다.

// Some Object Orient Programming Language

class Cat { // '고양이'라는 객체를 선언
    private Long weight; // 몸무게
    private Long height; // 키
    private String species; // 종
    private String Name; // 이름
    // 여기 위에 네개의 값들은 필드값 또는 프로퍼티라고 불리며, 해당 객체가 가지고 있을 데이터를 나타냅니다.
    
    ...
    
    /** 생성자 함수 '고양이'라는 객체의 하나의 개체('인스턴스')를 생성하는 함수
    /* 함수처럼 생겼고, 실제로 함수입니다.
    /* 아래의 파라미터들을 인자로 받아서, 이 객채에 속하는 개체 하나를 생성해서 반환해줍니다.
    */
    public Cat(Long weight, Long height, String species, String name) {
        // 아래의 this들은 생성될 개체('인스턴스')를 의미하게 됩니다.
        this.weight = weight;
        this.height = height;
        this.species = species;
        this.name = name;
    }
    
    
    public void sayHello() {
        //여기서의 이름 역시 this로 가져왔죠?
        print("meow, my name is " + this.name + "!!");
    }
}

🤔 : 아직 this라는게 짐작이 안가네요... 그건 우리가 객체를 "선언"하는 부분만 봐서 그렇습니다.

다른 객체 지향 언어에서는 아래와 같이 객체를 "선언", "정의" 해두고, 해당하는 객체의 인스턴스('개체')를 만들어 사용합니다!

// Some Object Orient Programming Language

// '객체'의 '인스턴스'는 다음과 같이 생성합니다.

// 1. 생성자 함수를 이용해서 생성하고, 자바스크립트의 객체처럼 '변수'에 담아요!
Cat catNumber1 = new Cat(30, 30, '러시안블루', 'Reno');
Cat catNumber2 = new Cat(30, 40, '터키쉬앙고라', 'Fizz');
Cat catNumber1 = new Cat(20, 30, '샴', 'Kong');

// 2. 해당 변수를 통해 접근하고, 필요한 기능이나 데이터를 활용합니다!
catNumber1.sayHello(); // meow, my name is Reno!!
catNumber2.sayHello(); // meow, my name is Fizz!!
catNumber3.sayHello(); // meow, my name is Kong!!


// 3. 고양이 '객체'인 세마리의 '개체' Reno, Fizz, Kong 이 잘 생성되었다는게 보이시나요?

다시 위로 돌아가셔서 this에 해당하는 코드를 찾아보시면, this가 어떻게 사용됐는지 보실 수 있을겁니다. 미래에 해당 객체의 개체가 될 아이들, 즉 "상황에 따라 그때 그때 달라질 뭔가를 가르키기 위해서 사용하고 있다." 라는게 이해가 가시나요?

기본적으로 자바스크립트에서의 this도 맥락은 같습니다. 프로퍼티나 메서드가 자기를 참조 할 수 있게끔 인스턴스 생성 이후에 해당 인스턴스를 가르키기 위해서 사용합니다. 하지만 자바스크립트에서의 this는 실행 컨텍스트가 생성될 때 함께 결정됩니다. 실행 컨텍스트는 함수를 호출 할 때 생성되므로, this는 함수를 "호출" 할 때 결정된다고 할 수 있습니다. 그래서 어떤 방식으로 호출하냐에 따라 값이 달라진다고 하네요. 이러한 맥락에서 이번 장을 읽어가시면 좋을 것 같습니다.

1) this - 먼저 읽고 시작하면 좋을 것들!

2) 이번 장 주의사항!

3-1-4절은 다음 챕터인 "콜백함수"를 읽은 후에 다시 와서 읽습니다.
3-1-5절은 읽지 않아도 됩니다!
3-2-? 절은 이런 것들이 있다 정도만 훑어보고 지나갑니다.

콜백함수를 알기 전에 먼저 읽는 것이 읽는 시간을 가중시킬 것 같습니다. 클래스도 마찬가지이며, 클래스에서의 this는 딱히 혼란스러운 여지가 없기도 하구요. 마지막으로 3-2 부터는 "명시적"으로 this를 바인딩 할 수 있다 까지는 알아야 하지만, 실제로 call, apply를 활용하려면 프로토타입에 대한 지식이 있어야 하기도 하고, 책에서도 소개가 되어 있는 것처럼, ES6부터 조금 더 편하게 사용 할 수 있는 방법들이 있습니다.

02. 콜백 함수

01. 콜백 개념 정리

"함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라 하며, 함수의 외부에서 콜백함수를 전달받은 함수를 고차함수라고 한다." 이웅모, ⌜모던 자바스크립트 Deep Dive⌟, 위키 북스, 2020, 34~36쪽

사실 함수의 인자로 함수를 전달하는 경우는 이미 경험을 해 봤습니다. 바로 foreach, map, filter와 같은 배열의 메서드에서 경험해봤죠. 실제로 다시 돌아가보면 콜백과 같은 용어가 사용되었다는 것을 보실 수 있으실 겁니다.

지금은 조금 더 전형적인 콜백 함수의 예시를 설명 할 까 합니다.

// functions..

function repeat(n) {
    for(var i = 0; i < n; i++) console.log(i)
}

function repeatEven(n) {
    for(var i = 0; i < n; i++) {
        if(!(i % 2)) console.log(i);
    }    
}

function repeatOdd(n) {
    for(var i = 0; i < n; i++) {
        if(i % 2) console.log(i);
    }    
}

위의 세 함수는 각각 1부터 n까지의 모든수, 짝수, 홀수를 콘솔에 띄워주는 함수 입니다. 즉 특정 숫자까지 반복하면서, 로직에 맞는지(홀수, 짝수, 모든수) 검증하고 맞다면 출력하고 있습니다.

하지만 위의 함수 각각에는 중복되는 로직이 있습니다. 그 부분을 분리해보면

// functions.. 

function repeat(n, callBackFunction) {
    for(var i = 0; i < n; i++) {
        callBackFunction(i)
    }
}

위와 같이 "반복"을 하는 부분과

function logAll(i) {
    console.log(i)
}

function logEven(i) {
    if(!(i % 2)) console.log(i)
}

function logOdd(i) {
    if(i % 2) console.log(i)
}

"특정 로직에 맞게 출력"하는 부분을 분리 해 낼 수 있습니다.

repeat(10, logEven);
repeat(20, logAll);

앞으로는 위와 같이, 필요한 로직을 그 때 그 때 조합해서 사용 할 수 있겠죠?

🤔 : 위처럼 공통된 하나의 로직을 분리해서 공통화 하는 행위를 '추상화' 한다고 합니다. 물론 추상화는 더 많은 뜻을 가지고 있지만, 기본적인 맥락에서는 위와 같은 행위가 추상화라고 봐도 무방 할 것 같아요. 추상화는 프로그래밍 패러다임을 이해하는데 매우 근본적인 개념이기 때문에, 나중에라도 꼭 공부하고 넘어가야 할 주제입니다. 실제로 위와 같이 추상화를 하면, 단순하게 공통적인 부분을 줄이는 정도가 아니라, 개념들간의 계층이 생기는데 이것을 추상화 단계라고 합니다. 그리고 이러한 추상화 단계는 코드를 관리하고 설계하는데 좋은 기준이 됩니다.

콜백함수의 아이디어는 위와 같은 패턴에서 시작됐습니다. "제어권"같이 어려운 개념으로 설명되어 있기는 하지만, 본질은 위와 같은 콜백함수의 아이디어에서 시작합니다. 함수의 호출로 해당 함수에 제어권이 넘어가고, 해당 함수가 다른 함수를 넘겨받는다면 넘겨받는 함수(콜백함수)의 실행시점을 적절하게 결정해서 실행시킵니다. 이러한 아이디어를 잘 활용하면 놀라운 일을 할 수 있게 됩니다.

사실 책의 첫 예시가 너무 생소한 함수들로 시작하는 것 같아 위와 같은 자료들을 준비했습니다. 여기에 나오는 아이디어들과 용어들을 먼저 습득하고, 책을 읽기 시작하시면 훨씬 수월하실 거에요!

03. 클로저

클로저는 어렵고 오묘하지만, 추가적으로 아셔야 하는 개념은 없습니다. 전부 지금까지 배운 내용을 바탕으로 책을 천천히 읽어보시면 이해 하실 수 있습니다. 다만 조금의 시간 투자와 반복이 필요 할 수 있습니다. 다시 이야기하면 아마 이해가 안가는 이유는 뭔가를 몰라서라기 보다는 해당 개념과 아이디어가 생소하고 특이하기 때문일 거에요. 그래서 찬찬히 책을 따라가며 읽어보시되, 동료분들과 많이 이야기하는게 가장 중요합니다.

다만 책의 예제 코드에 DOM Api를 이용하는 부분이 있어 이부분을 읽어보고 넘어가시면 좋을 것 같습니다.

PoiemaWebPoiemaWeb

우리가 실제로 자바스크립트로 어떻게 html과 css를 조작하는지, 그리고 조작하기위해 알아야 할 메서드들 이라고 가볍게 생각하시면 될 것 같습니다!(지금은요...)

PreviousDay 04. this, 콜백함수 Next1. this

Last updated 1 year ago