Javascript Koans

개요

자바스크립트 주요 개념을 복습하는 과제인 Javascript Koans를 풀어보았다. 이번 학습 목표는 다음과 같다,

이번 글은 Javascript Koans를 풀어보며 특별히 눈여겨 보아야 할 것들에 대해 기록한 글이다.

테스트하는 값과 기대값을 비교하기 위해 expect 함수를 사용한다, expect는 페이스북 팀에서 Jasmine 기반으로 만든 테스팅 프레임워크로, 이를 이용해 expect 함수를 이용할 수 있다.

expect(테스트하는_값).기대하는_조건

expect(4 + 6).to.equal(10)

expect(3 + 5 === 8).to.be.true

위와 같이 사용할 수 있다.

요약

expect(1 + '1').to.equal(FILL_ME_IN);

1 + "1" 을 할 경우, 앞의 1이 자동 형변환으로 인해 문자열 "1"로 변하게 된다. 따라서, 위의 FILL_ME_IN은 "11"이 된다.

expect(1 + true).to.equal(FILL_ME_IN);

true는 1의 값을 가지기 떄문에, 1 + true에서 true는 1로 변환이 된다. 따라서, 위의 FILL_ME_IN은 2가 된다.

expect('1' + true).to.equal(FILL_ME_IN);

이 경우에는 "1"이 문자열이므로 true는 문자열 "true"로 변환이 된다. 따라서, FILL_ME_IN은 "1true"가 된다.

위의 문제들은 간단한 경우이기에 형변환을 예측하기 쉬우나 실전에서는 모든 상황들을 고려하기는 쉽지 않을 것이다. 따라서, 이러한 경우는 최대한 예방하여야 할 것이다.

요약

const는 재할당을 할 수 없다.
const로 선언된 배열은 새로운 요소를 추가하거나 삭제할 수 있다.
const로 선언된 객체는 속성을 추가하거나 삭제할 수 있다.
배열, 객체의 경우는 참조 형태이기 때문에 배열, 객체의 주소값(집 주소)가 저장된 것이라 안의 내용(집 안의 사람, 가구 등)은 바뀔 수 있다.

첫 번째 expect늬 경우에는 defaultParameter 함수에 num 값이 별도로 주어지지 않았다. 따라서, 이 때의 num 값은 미리 주어진 5가 되어 함수는 5를 반환한다.
두 번째 expect에는 num으로 10이 주어졌기 때문에 10을 반환한다.
세 번째 expect는 pushNum 함수에 num만 10으로 주어졌기 때문에 arr은 기본으로 빈 배열이 된다. 따라서, 빈 배열에 10이 push된 후, [ 10 ]이 반환한다.
네 번째 expect 역시 위와 같은 과정으로 [ 20 ]이 반환된다.
다섯 번째 expect에서는 arr이 [ 1, 2, 3 ]으로 주어졌기 때문에 이 배열에 4가 push되어 [ 1, 2, 3, 4 ]가 반환된다.

increaseBy3과 increaseBy5는 위의 주석과 같다.
첫 번째 expect는 위의 increaseBy3의 numberToIncrease에 10을 넣은 후 계산한 값이 반환된다. 따라서, FILL_ME_IN은 13이다.
두 번째 expect 역시 같은 과정으로 FILL_ME_IN는 15이다.
세 번째 increaseBy(8)(6)의 경우, 차근차근 접근하면 쉽게 이해할 수 있다. 우선, increaseBy(8)은 위의 increaseBy3이나 increaseBy5와 같이 increaseBy8이라 보아도 될 것이다. 따라서, increaseBy(8)(6)은 increaseBy8(6)이라 볼 수 있으며 이 때의 값은 14이다. 마찬가지로 increaseBy(5)(9)도 14이다. 따라서, 이 때의 FILL_ME_IN은 14 + 14이므로 28이다.

요약

overTwenty는 값이 true에서 false로 바뀐다. 그로기 allowedToDrink는 overTwenty가 true일 때 선언되었으므로 값이 true이다. 하지만 값 자체가 복사가 되기 때문에 overTwenty = false; 의 영향을 받지 않는다.
따라서, FILL_ME_IN는 각각 false와 true이다.

요약