Javascript# 동적 바인딩 개념 다시 잡기

아 정말 자바스크립트 어렵다. 왜냐 나는 처음이니까, 라며 위로해 보지만, 자바스크립트 수업을 들은 지 이미 3주 차에 접어들었다. 

오늘은 '호출될 때마다 1씩 증가한 값을 반환하는 함수'를 만드는데, 동적 바인딩을 이용해 코드를 작성하는 시간이 있었다.

난 분명 수업을 들었는데 막상 코드를 짜려니 심각하게 머릿속이 새하얘졌다. 코드를 못 짜는 이유는 뭐다? 복습과 연습을 하지 않았기 때문이다. 오늘은 동적 바인딩을 이해할 때까지 잠을 청할 수 없을 것 같다.

 

동적 바인딩이란?

객체 생성 '이후'에 새로운 속성을 객체에 추가하는 것. 아래 예시에서는 plusCount라는 함수를 생성하였고 counter라는 인자를 대입하였다.

만약 counter 아규먼트가 undefined가 아니라면(여기서는 1이라는 숫자를 대입하였으니 불일치한다), plusCount함수에 aaa라는 새로운 속성을 바인딩하고 counter라는 인자를 대입한다. 그 결과값을 반환한다. 그렇지 않으면 plusCount함수의 aaa를 1씩 증가시킨다. 

 

function plusCount(counter) {

if (counter !== undefined) { 
    plusCount.aaa = counter; 
  } else { 
  plusCount.aaa = plusCount.aaa + 1;
  }
  return plusCount.aaa;
}



plusCount();
plusCount();
plusCount();

console.log(plusCount()); 

 

plusCount 함수를 호출하는 첫 번째 숫자가 1이므로, 첫 번째 반환하는 값은 1이다. 아래 예시에서 plusCount 함수는 총 네 번 호출된다. 처음 반환된 값은 1이고, 두 번째는 인자가 없으므로 값이 없으니 aaa속성에 들어간 1에 +1을 하여 2가 반환된다. 그다음 반환되는 값은 +1이 추가되었으니 3. 마지막 반환되는 값도 +1이 더해졌으니, 반환되는 값은 4가 된다.

 

이제 동적 바인딩에 관한 개념이 잡힌 것 같다. 함수도 객체이므로, plusCount함수는 객체이다. 함수를 생성한 후 aaa라는 새로운 속성을 집어넣은 것이 동적 바인딩을 한 부분이다. undefined는 값이 없는 경우를 뜻하므로, plusCount함수 안에 인자가 없을 때는 undefined가 일치하는 것이다. 

 

console.log(plusCount(1)); //1을 반환함
console.log(plusCount()); //2
console.log(plusCount()); //3 
console.log(plusCount()); //4

 

위 예시에서 plusCount함수를 호출하는 부분에서 반환값을 알아보기 위해 위와 같이 console.log를 다 붙여보겠다. 만약 초기 인자에 1을 넣지 않고 빈칸으로 둔다면 결과값은 NaN이 나온다. 첫 번째 인자로 숫자를 넣어주었기 때문에 aaa는 1씩 증가한다.

 

끊임없이 같은 코드를 반복하여 작성 해본다. 원래 개발자인 것처럼 손가락이 자연스럽게 키보드를 두드릴 수 있어야 한다. 안 해보면 영영 못 하는 것이다. 오늘 공부는 참으로 유익했다.