Page 22 -

브라우저 버그라고 생각하기 쉽지만, 실제로는 자바스크립트가 변수를 할당하
는 방법과 관련이 있습니다. 이러한 문제는 평범한 자바스크립트 코드에서는
물론이고 어디서든 발생할 수 있습니다. 다음 예제에서 DOM 조작이 없는 평

범한 자바스크립트에 문제가 발생한 경우를 살펴봅시다.
다음 예제 코드를 브라우저 콘솔 또는 REPL에 복사해 넣으면 같은 문제를 확

인할 수 있습니다.

variables/scope/problem.js
01 function addClick(items) {
02 for (var i = 0; i < items.length; i++) {
03 items[i].onClick = function () {
04 return i;
05 };
06 }
07 return items;
08 }
09 const example = [{}, {}];
10 const clickSet = addClick(example);
11 clickSet[0].onClick();

Note REPL 사용하기

REPL은 ‘읽기 평가 출력 반복(Read Evaluate Print Loop)’의 약자로, 코드를 다룰 때 사
용할 수 있는 훌륭한 도구 중 하나를 가리킵니다. 즉, REPL은 코드를 입력하면 즉시 평가해서
결과를 반환하는 간단한 명령줄 인터페이스입니다.
예를 들어 2+2를 입력하면 4가 나옵니다. 문법이 잘 기억나지 않아서 빠르게 확인해보
고 싶은 경우에 특히 유용합니다. 예를 들어, 문자열을 대문자로 만드는 메서드가 잘 기억
나지 않아서 강조 표시를 할 수 없는 경우를 생각해봅시다. 메서드를 다시 기억해내기 위해
REPL에 'hi!'.upperCase()를 입력했더니 오류가 발생했습니다. 그래서 다시 'hi!'.
toUpperCase(); //HI!를 입력해보니 잘 작동합니다.

그럼 REPL은 어떻게 사용할 수 있을까요? 컴퓨터에 Node.js가 설치되어 있다면 명령줄에
node를 입력하고 REPL을 사용할 수 있습니다.

 계속

1장 변수 할당으로 의도를 표현하라 035

코딩의기술_자바_07.indd 35 2019-12-13 오전 10:27:03