TIL

2020-10-01

1. Expect 함수

자바스크립트에서 테스트가 작동하는 방식에 대해서 어느정도 이해할 수 있다.

입력값과 return하는 값이 기대한 값과 같은지 비교할때 expect function을 사용한다.

expect의 사용법

expect(test값).기대하는조건
ex)expect(isEven(3)).toBeTruty() // 'isEven(3)'의 결과값은 참인것(truthy)이어야한다.
ex)expect(1 + 2).toBe(3) // 'sum(1,2)의 결과값은 3이어야(toBe)한다.'

여기서 기대하는 조건에 해당하는 함수를 matcher라고 한다. 위에서 볼 수 있듯이, matcher는 인자를 가질 수 있다.

'참인 것 이어야한다.' // toBeTruthy()
'3과 같아야한다.' // toBe(3)

2가지 matcher 즉, '기대하는 조건'에 해당하는 함수(toBeTruthy, toBeFalsy)를 통해 '기대하는 값'이 truthy인지 falsy인지 확인하는 방법을 알아보자.

function(){
expect(true).toBeTruty();
// 테스트하는 값(expect의 인자)의 truthy 여부를 검사
}
function(){
expect(false).toBeFalsy();
// 테스트하는 값(expect의 인자)의 falsy 여부를 검사
}

여기서 '기대하는 값'은 표현식(expression)이거나 함수의 실제실행결과이다.
1) expression(표현식): true || false, 1+1, 10*3
2) 함수의 실행: isEven(3), sum(1, 2)

'기대하는 값'은 구체적인 값인 경우가 있다. 이 경우 '기대하는 값'이 '특정값'과 같은지 를 비교해서 테스트를 진행한다. 가장 간단한 방법은 비교연산자 === 를 사용하는 것이다.
아래를 보면,

function(){ // 테스트하는 값을 '기대하는 값'과 비교한 경과가 참(정확히는 truthy)인지 확인. 테스트하는 값은 '실제값'이라고 불러도 무방하다.
  let actualValue = 1+1;
  let expectedValue = 2
  expect(actualValue === expectedValue).toBeTruthy();
}

이처럼, toBeTruthy, toBeFaly만을 가지고도 많은 테스트케이스를 작성할 수 있다. 다만 직관적이지 않고, 다소 불편하다. 두 값 A,B를 '비교한 결과'가 참인지 확인하는 대신, 직접 A,B가 같은지 확인할 수 있는 matcher는 toBe이다.

Matcher toBe 사용법

function(){ // toBe()는 두 값이 타입까지 엄격하게 검사(strict equality, ===)한다.
  let expectedValue = 2;
  expect(1 + 1).toBe(expectedValue);
}
function(){
  let actualValue = (1 + 1).toString();
  expect(actualValue).toBe('2');
}

---

2. 비교연산자 '==','===' / JavaScript quirky part

Type에 대하여

비교연산자 == 와 === 에 대해서 알아보자. 비교연산자 '=='는 두 값을 일치여부를 느슨하게 검사한다.(loose equality)

function(){
  let actualValue = 1 + 1;
  let expectedValue = 2;
  expect(actualValue == expectedValue). to BeTruty();
}

Loose Equality를 잘 보여주는 예시를 아래에서 파악해보자. 아래의 예시들은 모두 테스트에 통과할 수 있다.

expect(0 == false).toBeTruthy();
expect('' == false).toBeTruthy();
expect([] == false).toBeTruthy();
expect(![] == false).toBeTruthy();
expect([] == ![]).toBeTruthy();
expect([] == '').toBeTruthy();
expect([] == 0).toBeTruthy();
expect([''] == '').toBeTruthy();
expect([''] == 0).toBeTruthy();
expect([0] == 0).toBeTruthy();

loose equality는 프로그램의 작동을 예측하기 어렵게 하고, 추천하지 않는 연산자이다. loose equality보다는 strict equality '==='를 사용하자.

Strict Equality

function(){
  let acutalValue = 1 + 1;
  let expectedValue = 2;
  expect(actualValue === expectedValue).toBeTruthy();
  //여기서 숫자 2말고 문자열'2'는 테스트에 통과하지 못함
}

JavaScript에서는 이해하기 힘든 quirky한 부분들이 존재한다. 따로 모아놓은 저장소가 있을 정도다. 아래에 quirky한 요소들을 봐보자.

function(){ 
  expect(1 + '1').toBe('11');
}
function(){
  expect(123 - '1').toBe(122);
}
function(){
  expect(1 + true).toBe(2);
}
function(){
  expect('1' + true).toBe('1true');
}

---

3. About Const

let, const에 대해서 이해할 수 있다.

const는 재할당(reassignment)이 금지된다.

const는 선언된 배열의 경우에, 새로운 요소를 추가, 삭제할 수 있다.(그러나 여전히 재할당은 금지된다.) 아래예시를 봐보자. 배열의 요소를 추가할때는 .push를 사용했다.

const arr = [];
const toBePushed = 42;
arr.push(toBePushed);
expect(arr[0]).toBe(42);
// arr = [1, 2, 3];

const는 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있다.(재할당은 금지 X). 아래 예시를 참고하자. 객체의 요소를 삭제할 때 delete를 사용했다.

const obj = { x: 1};
expect(obj.x).toBe(1);
delete obj.x;
expect(obj.x).toBe(undefined);
// obj = { x: 123};
obj.occupation = 'SW Engineer';
expect(obj['occupation']).toBe('SW Engineer');

var는 되도록 사용하지말자.
var, let, const 이 세가지 키워드 중에서 var는 사용하면 안되는 이유는 function scope문제나, var hoisting 때문에 이곳저곳에서 마구 불려지고, use strict같은 추가적인 프로그래밍이 필요하다. 장점이 없는 var를 대체하기 위해 추가 된것이 let과 const 라고 생각하면 된다.
let과 const는 비슷한점이 많다. 큰 공통점은 둘다 Block Scope을 가지고 있다. 그렇지만 let은 재할당이 가능하고, 재선언이 불가능하지만, const는 재할당이 불가능하고, 선언과 할당이 동시에 이루어져야 하기 때문에 선언만 할 수는 없다. 하지만 객체에서는 식별자나 프로퍼티 명으로 직접 접근해서 값을 변경할 수 있다.

그렇다면, 왜 let보다 const를 선호하는 걸까?
const로 선언해서 사용하는 이유는 값이 가진 타입의 변경을 제한하기 위해서다. 자바스크립트에서는 값을 변경하는 변수를 사용할 일이 생각보다 많지 않고, const를 통해 선언한 값의 타입을 유지하는 것이 개발에 있어 많은 실수를 방지해주기 때문에, const를 let보다 많이 사용한다.