유닛테스트를 배워보는 과제
- TDD와 BDD에대해서 공부해보자.
- 유닛 테스트하기위한 jasmine에 대해서 배워보았다.
- jasmine은 javascript 코드를 테스트하기 위한 BDD의 framework이다.
- 그동안 배웠던 배열, 객체, 변수 선언 등으로 jasmine Framwork로 unit test해보는 과제
expect syntax
expect에는 테스트할 실제 값을 예상되는 값 matchers와 비교하여 같이 사용한다.
- 예시로 expect(sum(1 , 2)).toBe(3)은 sum(1,2)호출 시 결과 값이 3이어야 하는 의미이다.
- matchers는 tobe와 같이 여러가지 method가 있는데 몇가지만 알아보자
자세한 matcher는 아래링크 참조 바랍니다.
matchers
- matcher에 들어가는 값(예상하는 값)은 표현식(true || false,1+1 ...)이거나 함수의 실제 실행 결과(sum(1,2), isEven(3))이다.
not: 예상하는 값과 실제값을 부정한다.
toBe: 실제값과 예상하는 값이 같아야한다.
toBeTruthy: 실제값이 예상하는 값이 truthy값이어야 한다.
toBeFalsy: 실제값이 예상하는 값이 falsy값이어야 한다.
equal: tobe와 같이 실제값과 예상하는 값이 같아야하지만 차이점은 assertion일 실패할 때 에러 메세지도 같이 담을 수 있다.
toEqual: 배열의 요소나 객체의 속성이 서로 같은지 확인하는 matcher이다.
toBe vs toBeTruthy
let sum1 = 1+1;
let value = 2;
expect( sum1 === value).toBeTruty();
expect(sum1).toBe(value);toBe vs toEqual
expect([1,2,3] === [1,2,3]).toBe(false); // 주소값이 다르기 때문에 false
expect([1,2,3]).toEqual([1,2,3]); // 주소값이 달라도 배열의 요소가 같은지 확인해준다.==(loose equality) vs ===(strict equality)
- javascript에서 loose equality(==)는 사용하지 않는다. 예시와 같이 프로그래밍하는데 다소 어려움이 있다.
- loose equality를 사용하면 아래 예시는 전부 true이지만, strict equality를 사용하면 false이다.
- 동치 연산을 할 때 특별한 경우를 전부 외워서 대응하려하지 말고, 최대한 같은 타입의 데이터를 비교 연산하고, strict equality 연산을 사용하여 올바른 코딩 습관을 기르자.
0 == false // true, 데이터 타입에 신경 쓰자. 0은 숫자, false는 boolean이다.
'' == false
[] == false
![] == false
[] == ''
[] == 0
[''] == ''
[''] == 0
[0] == 0const
- 재할당은 안되지만 배열 또는 객체일 때 요소 및 속성을 추가 및 삭제가 가능하다.
- const를 사용하는 이유는 상수를 사용하여 중복 사용을 방지하자. 만약 재할당이 필요할 때만 let keyword를 사용하자
출처 : https://hyunseob.github.io/2016/11/21/misunderstanding-about-const/
출처 : 변수 사용이 나쁘다 참고
hoisting
- 변수 사용이나 함수 호출을 맨위에 먼서 실행하고 밑에 변수 초기화와 함수선언하는 방식을 hoisting이라고 한다. var keyword를 사용하는 변수 hoisting과 함수 선언식만 가능한 함수 hoisting이 있다.
lexical scope
-
함수를 어디서 선언했는지에 따라 상위 scope의 차이를 말하는 것이다. 여기서 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다.
-
다음 예시를 보고 명확히 이해해보자.
var number = 1;
function a() {
var number = 10;
b();
}
function b() {
console.log(number);
}
a(); // 1
b(); // 1함수의 호출 시 상위 scope가 결정된 것이 아니라 함수의 선언에 따라 상위 scope가 결정되었기 때문이다.
출처 : https://medium.com/@yeon22/javascript-lexical-scope-static-scope-and-dynamic-scope-c4a9e941fab3
closure
-
mdn에서 클로저 정의
A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created.
-
클로저는 함수와 함수가 선언된 어휘적 환경의 조합을 말한다.
-
내부 함수가 외부 함수의 지역 변수에 접근할 수 있고 외부함수는 내부함수(closure)의 지역 변수에 접근 불가능하다.
fucntion factory
- JavaScript에서 함수는 새로운 객체를 리턴한다. 이때, constructor function 또는 class로 선언하지 않은 함수를 factory function이라고 한다.
- new keyword로 인스턴스를 만들지 않는다.
- 함수가 객체를 반환하는 것을 factory function이라고 한다.
factory function
업데이트 예정
namespacing private variables/functions
업데이트 예정
primity data vs reference type
- primity data는 immutable하다. 즉, 값에 의한 복사가 일어나서 원본 데이터는 변경되지 않는다.
- Object 자료형 데이터는 heap에 저장되고, 변수에 할당을 할 경우 변수에는 주소가 저장된다.
primity data vs reference type 정리글 참고
배열의 요소 다루기
- slice 메서드 이용하여 배열 조회하는 법
- 대괄호([]) 이용하여 요소 추가 및 조회
- 배열을 함수의 인자로 전달할 때 주소값(reference 값)을 전달한다.
객체의 개념 확인
- dot notation vs bracket notation으로 객체 속성 조회
- in으로 객체의 키를 조회
- delete keyword로 속성 삭제
- 객체 내 this가 가리키는 곳, 'this'는 method를 호출되는 시점에 method를 호출한 객체를 가르킵니다.
- object method는 객체의 속성으로 정의된 함수를 의미한다. 따라서 method의 호출은 'object.method()'의 형태를 가지게 된다.
- 객체 복사는 assign 메서드를 이용(shallow copy)
- assign 메서드는 객체 안의 객체가 있을 경우 그 객체의 주소값만 불러와 deep copy를 하지 못한다.
shallow copy vs deep copy 정리 글 참고
Spread Sytax vs Rest Parameter vs arguments
배열 및 객체 합치기
let arr = [...[1,2,3],...[4,5,6]]
console.log(arr) // [1,2,3,4,5,6]
let obj = {...{one:1}, ...{two:2}} // deep copy
console.log(obj) //{one:1,two:2}function restParameterFunc(...rest){
return rest;
}
function argumetsFunc(){
return arguments;
}
restParameterFunc(1,2,3) === argumetsFunc(1,2,3) // 결과 : false
Array.isArray(restParameterFunc(1,2,3)) //결과 : true
Array.isArray(argumetsFunc(1,2,3)) // 결곽 : false, 유사배열유사 배열을 배열로 만들기
const argsArr = Array.from(argumetsFunc(1,2,3));
Array.isArray(argsArr); // 결과 : true