koan

Jaemin Jung·2021년 4월 25일
0

JavaScript

목록 보기
4/14
post-thumbnail

koan을 통해 새로 알게된 사실들

유닛테스트를 작성하는법

  • 실제 프로그래밍을 할때에 어디서 문제가 생기는지 찾기 쉬움
    expect(테스트하는값).기대하는조건
       expect(isEven(3)).to.be.true => 'isEven(3)'의 결과값은 (true)이어야 한다'
       expect(1 + 2).to.equal(3) => 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다'
'기대하는조건'에 해당하는 함수를 matcher라고 한다.
`.equal`은 두값의 타입까지 엄격하게 같은지 검사한다, `===`과 비슷하다.


Obj.toString() - 객체나 변수가 가지고 있는정보를 문자열로 변환해줌

(==) 느슨한 동치 연산자 예시
```js
	expect(0 == false).to.be.true;
    expect('' == false).to.be.true;
    expect([] == false).to.be.true;
    expect(![] == false).to.be.true;
    expect([] == ![]).to.be.true;
    expect([] == '').to.be.true;
    expect([] == 0).to.be.true;
    expect([''] == '').to.be.true;
    expect([''] == 0).to.be.true;
    expect([0] == 0).to.be.true;

느슨한 동치연산자이기에 타입값까지 비교가 안되며, 이외에도 명확한 규칙은 존재하지 않는다.

  • Type 규칙

(-)연산자는 모두 숫자열로 인식한다. 문자로 구성된 문자열 - 문자열을 하여도 NaN이 나타남

자바스크립트에서 true는 1로 인식, 반대로 false는 0으로 인식,

  • 변수

const는 상수 변수로 재할당이 불가능하다.

배열이나 객체를 변수에 재할당하는것은 불가능하나, 속성 추가나 삭제는 가능하다.

const arr = [];
 arr.push(42);
console.log(arr)// [42]
//---------------------------------------
const obj = {}
obj['a'] = 4
console.log(obj) // { a: 4 }
  • 화살표 함수
// function 키워드를 생략하고 화살표 => 를 붙인다.
    const add = (x, y) => {
      return x + y
    }
    expect(add(10, 20)).to.eql(30)

// 중괄호와 리턴을 생략 가능
    const subtract = (x, y) => x - y
    expect(subtract(10, 20)).to.eql(-10)

// 필요에 따라 소괄호 사용
    const multiple = (x, y) => (x * y) / (4 * 5) 
    expect(multiple(10, 20)).to.eql(10)

// 파라미터가 하나일 경우 소괄호 생략 가능
    const divideBy10 = x => x / 10
    expect(divideBy10(100)).to.eql(10)
  })
  • 화살표 함수를 이용해 표현한 클로저 함수
const adder = x => {
      return y => {
        return x + y
      }
    }

    expect(adder(50)(10)).to.eql(60)

// 외부함수 return생략
    const subtractor = x => y => {
      return x - y
    }

    expect(subtractor(50)(10)).to.eql(40)

// 괜찮게 써먹을것같은 예시
const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
	
expect(subtractor(div)(죽이는데 함수)).to.eql(`<div>죽이는데 함수</div>`)
  • Hoisting
    자바스크립트에서 함수를 하단에 선언하여도 상단에서 함수를 호출 가능하다.
    var선언도 이와 동일하다. 하지만 할당된 값은 호출되지않는다.

console.log (sum(4,5)) // 상단에 있음에도 9값이 리턴됨

function sum(n1,n2){
  return n1+n2
}
// -------------
console.log (test(4,5)) 
// 변수test는 함수가 아니라고함 즉, 변수는 인식하나 변수에 값이 할당되지않음을 인식

var test = function sum(n1,n2){
  return n1+n2
}

이러한 현상으로 긴 코드를 작성할때 스코프가 꼬일수있으므로 let이나 const를 사용을 권고한다.

  • 객체 키의갯수 확인 메소드
    Object.keys() : 이용하면 객체의 키값을 요소로 가지는 배열을 반환한다.
const obj = { a: 3, b: 4, c: 6 }

Object.keys(obj) // [ a, b, c ]

배열로 반환되기 때문에 요소의 길이를 확인 가능하다.
즉, 객체의 키 갯수를 알아낼수있다.

const obj = { a: 3, b: 4, c: 6 }

Object.keys(obj) // [ a, b, c ]

const keyArr =Object.keys(obj);

KeyArr.length // 3

.deep.equal은 배열의 요소나 객체의 속성이 서로 같은지 확인하는 matcher

  • Array.slice(start, end)
const arr = [1, 2, 3, 4]

arr.slice(2,2) // []이 복사되어 반환

arr.slice(0, 20) // [1, 2, 3, 4]값이 복사되어 반환

arr.slice(3, 0) // []이 복사되어 반환

매개변수에 start와 end가 같은값이라면 빈배열을 복사하여 반환한다.

end가 Array.legnth보다 크더라도 기존 배열에 마지막 인덱스까지만 복사하여 반환한다.

end가 start보다 작다면 빈배열을 복사하여 반환한다.

  • this
    this는 이것을 뜻한다. 즉, 누가 나를 호출했느냐를 말한다.
    어디서 호출하였는지에 따라 this의 반환값은 달라진다.
    (내가 이해한것이 맞는지 솔직히 잘 모르겠다.)
    자신을 호출한 값?의 위치를 반환한다?

  • Date
    Date는 현재시간을 반환하고 연도 월 일 시간으로 생성된다.
    Date 객체를 생성하는 법은 new연산자를 사용하는것이 유일하다.

  • str.repeat()
    문자열을 숫자만큼 반복 반환

'jm'.repeat(3) // 'jmjmjm'
  • Object.assign()
    하나이상의 출처객체로부터 대상 객체로 속성을 복사
const obj1 = {a:1};
const obj1 = {a1: 1, b1: 2};

Object.assign(obj, obj2) // { a: 1, a1: 1, b1: 2 }
  • 얕은복사(Shllow Copy)
    객체를 복사할 때 원본과 복사가 같은 주소값을 하나이상 바라볼때를 말한다.

  • 깊은복사(Deep Copy)
    객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.

profile
내가 보려고 쓰는 블로그

0개의 댓글