[JS] TDD, 얕은복사, 깊은복사, shorthand 등

TDD 테스트주도개발(Test-Driven-Development)

: 테스트케이스(기대하는 값) 작성 후 실제 코드를 개발하고 리팩토링(가독성, 유지보수를 위해 코드 재작성).

Test First Development라고도 함

테스트 > 설계 > 개발

기존 개발 과정은 설계> 코드 개발> 테스트

 

테스트 프레임워크

Mocha

Chai

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

 

기대하는조건에 해당하는 함수를 matcher라고 함

.to.be.true

.to.be.false

.to.equal()

.to.eql()

.to.deep.equal()

배열의 요소나 객체의 속성이 서로 같은지 확인

 

클로저 유즈 케이스

- function factories

- namespacing

- private variables/functions

 

this

함수에서 호출 시 함수의 위치를 반환

 

함수.call(this, 전달인자, 전달인자, ...)

: this를 받아 this에서 함수를 실행

함수.apply(this,전달인자 배열)

: call과 같은데 전달인자를 배열로 넘긴다.

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 이어지는 인자들은 함수 호출에서 인수로 전달된다.
add.call(o, 5, 7); // 16

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 두 번째 인자는 함수 호출에서 인수로 사용될 멤버들이 위치한 배열이다.
add.apply(o, [10, 20]); // 34

함수.bind(this)

: 환경을 전달된 this로 변경하여 새로운 함수로 만듦. 변수에 할당해야함

bind로 만든 함수를 또 bind 하면 동작하지 않고 이전 함수를 실행한다

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty

화살표함수는 자신의 this가 없고 상위스코프를 가리킨다(렉시컬 환경)

 

얕은 복사(shallow copy) vs 깊은 복사(deep copy)

얕은 복사

: object.assign(), arr.slice(), arr.from(), ...spread(전개구문)

참조 자료형이 중첩된경우 중첩된 객체/배열은 복사되지 않고 reference(주소)를 공유한다

 

깊은 복사

: 깊은복사를 할 수 있는 매서드는 없으며 아래와 같은 방법으로 할 수 있음

- 재귀함수를 작성

- Lodash 라이브러리의 cloneDeep 사용

- json.parse()와 json.stringify() 함수 사용

깊은 복사를 할 경우 여러 객체가 동시에 수정되지 않아 변경에 안전하나

메모리를 많이 차지한다.

 

* 참고
깊은 복사와 얕은 복사에 대한 심도있는 이야기

Copying Objects in JavaScript

 

new Date()

: 현재 요일 일 월 년 시:분:초 국제표준시기준(GMT+)

매개변수

• 문자열
• 그 외(년, 월0~11, 일=1, 시=0, 분=0, 초=0, 밀리초=0) 

new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)

- 현재값 반환: get매서드(년, 월, 일, 요일=0일~6토, 시간, 분, 초, 밀리초, ...)

getFullYear() getMonth() getDate() getDay() getHours() getMinutes() getSeconds() getMilliseconds()  ...

- 현재값 변경: set매서드

setFullYear() ...

 

arguments obj(arguments 객체)

: 함수에 전달된 인수로 자동 생성되는 Array 형태의 객체(유사배열객체 중 하나)

* rest 구문이 없을 때(ES6 전) arguments를 배열로 사용하기 위해 array.from()을 이용

{[Iterator] 키1: 값1, 키2:값2, 키3:값3, ... } 형태

arguments.length 인자의 수 반환

 

object-shorthand 문법 (객체단축문법)

객체 선언시 키로 선언된 값이 이미 존재한다면 값을 바로 매칭시켜주는 문법

let name = 'bob'
let age = '30'

const member { name, age }
console.log(member) // { name : 'bob', age : '30'}

 

 

 

 

2023.11.09