제이

이번주에는 비동기 & 동기 호출, Function Method 그리고 '자바스크립트로 할 수 있는 것'이라는 타이틀의 내용들을 학습했습니다. 하루는 이론적인 내용들을 다루었고, 나머지 하루는 강사님 말대로 Casual한 내용을 다루었습니다. 가장 인상 깊었던 부분은 Casual한 부분인 '자바스크립트로 할 수 있는 것'이었네요. 하지만 이론적인 내용 또한 중요하니 간단하게나마 정리해보겠습니다. 

Asynchronous & synchronous Call

비동기(Asynchronous)와 동기(Synchronous)를 설명하기에 앞서 자바스크립트(Javascript)가 가지는 특징에 대해서 알아보겠습니다. 자바스크립트는 기본적으로 싱글 스레드(Single Thread) 언어입니다. 다시 말해, 멀티 스레드(Multy Thread)를 지원하지 않는 언어인데요, 여기서 스레드(Thread)라는 것을 설명할 때 컴퓨터에 비유하면 좋을 것 같습니다. 흔히 RAM과 CPU를 비교할 때 CPU는 하나의 작업을 빠르게 처리할 수 있는 능력에 비유하고, RAM은 얼마나 많은 일을 동시에 진행할 수 있는지에 비유합니다. 스레드라는 것은 RAM에 비유할 수 있겠습니다.(물론 정확하지는 않지만) 멀티스레드는 두가지 이상의 작업을, 싱글스레드는 한가지 작업만을 처리할 수 있는 것을 의미합니다.

다시 본론으로 돌아가서, 동기와 비동기에 대해 수업시간에는 커피 주문하기에 비유했습니다.

동기 호출에 해당하는 좌측의 경우에는 작업1(손님1)이 끝나기 전에는 작업2(손님2)가 진행될 수 없습니다. 반면 비동기 호출(우측)의 경우에는 작업1과 작업2가 동시에 진행됩니다. 멀티스레드를 지원하지 않는 자바스크립트의 기본적인 동작은 좌측과 같기 때문에 특정 상황에서 문제가 발생할 수 있습니다. 예를 들면 사용자가 서버에서 이미지를 요청했을 때 이미지가 로드되기 까지 아무런 동작을 할 수 없는 상황말입니다.

자바스크립트에서 위와 같은 동기 처리의 문제점을 해결하기 위한 비동기 처리의 대표적인 예는 다음과 같습니다.

Function Method
 - .apply(), .call(), .bind()

몇가지 함수 호출의 방법에 대해서 공부했습니다. 이 호출 방법들의 핵심은 this 키워드를 지정시켜 놓음으로써(bind) 싱글스레드라는 특성때문에 this 키워드가 가리키는 객체가 계속해서 바뀌는 문제를 해결하는 것입니다. 어느정도 비동기/동기에 대한 내용의 연장선이라고 볼 수 있겠는데요, 그 이유는 아래의 간단한 예제에서 찾을 수 있습니다.

function Box(w,h){
    this.width = w;
    this.height = h;
    
    this.getArea = function(){
        return this.width * this.height;
    }
    this.printArea = function(){
        console.log(this.getArea());
    }
}

let b = new Box(100,50);
b.printArea(); // 5000

setTimeout(b.printArea, 2000);
//VM766:9 Uncaught TypeError: this.getArea is not a function at Box.printArea (<anonymous>:9:26)
//Box.printArea @ VM766:9
//setTimeout (async) (anonymous) @ VM766:16

setTimeout()을 통해 2초 후에 b.printArea()를 실행하는 예제입니다. setTimeout구문으로 넘어오게 되면 Box내부의 this는 더이상 객체 b가 아닌 window를 가리키게 됨으로 Uncaught TypeError가 발생합니다. 이는 bind를 통해 this를 b객체로 지정한 체로 함수를 호출하여 해결할 수 있습니다. 

setTimeout(b.printArea.bind(b),2000); // 5000

또 한가지, bind()를 통해 커링(currying: '인자 여러개를 받는 함수'를 '인자를 하나를 받는 함수'로 바꾸는 방법)을 구현할 수 있습니다. 

function template(name, money){
    return '<h1>' + name + '</h1><span>' + money + '</span>';
}

let tmplSteve = template.bind(null, 'Steve');
tmplSteve(100);  // <h1>Steve</h1><span>100</span>

let tmplJohnny = template.bind(null, 'Johnny');
tmplJohnny(1000);  // <h1>Johnny</h1><span>1000</span>

자바스크립트로 할 수 있는 것들