[TIL] JavaScript Koans

송인선·2022년 7월 13일
0

TIL

목록 보기
3/16

Today I Learn...

Koans : 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미

이틀 동안 진행한 JavaScript Koans 페어 프로그램이 끝났다.

지금까지 진행했던 과제들과는 사뭇 다른 내용이어서 처음에는 헤맸었다 ㅋㅋㅋㅋ 🤣 이게 뭔말이여

expect 함수를 사용하여 적절한 테스트 코드를 작성하는 과제였다. 실시간으로 틀린 부분과 정답을 확인 할 수있어서 난이도가 적당하게 느껴졌다.

물론 그 와중에도 어려운 문제는 있었지만...

expect(테스트하는값).기대하는조건
expect(isEven(3)).to.be.true //'isEven(3)'의 결과값은 참(true)이어야 한다'
expect(1 + 2).to.equal(3) //'sum(1, 2)의 결과값은 3과 같아야(equal) 한다'

이번 과제를 진행하며 처음 알게된 개념과 헷갈렸던 것들을 정리해보려고 한다!

Let과 Const

📌 let / const 차이

  • let : 변수에 재할당 가능
  • const : 변수 재선언, 변수 재할당 모두 불가능. 변수가 상수일때 사용.
  • 변수 선언에는 기본적으로 const를 사용 (의도치 않은 재할당 방지)
  • 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 👍

Scope와 Closer

📌 함수 호이스팅

  • 호이스팅이란?
    모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성.
    즉, 자바스크립트는 모든 선언문(var, let, const, function, class)이 선언되기 이전에 참조 가능
  • 함수 선언문의 경우, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능한데 이것을 함수 호이스팅(Function Hoisting)이라 한다.
  • 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생

[참고]
https://poiemaweb.com/js-function
https://tecoble.techcourse.co.kr/post/2021-04-25-hoisting/

📌 closer

  • 클로저란?
    함수 안에 함수가 선언어휘적 환경의 조합
  • 자바스크립트는 함수가 호출되는 환경와 별개로, 기존에 선언되어 있던 환경 (어휘적 환경)을 기준으로 변수를 조회하려고함
  • 클로저는 내부(inner) 함수가 외부(outer) 함수의 지역 변수에 접근할 수 있다!

Array

📌 Array.slice()

  • 어떤 배열의 begin부터 end까지의 복사본을 새로운 배열 객체로 반환
  • begin 포함 / end 미포함
  • 원본 배열은 바뀌지 않음
const arr = ["peanut", "butter", "and", "jelly"];

expect(arr.slice(1)).to.deep.equal(["butter", "and", "jelly"]);
expect(arr.slice(2, 2)).to.deep.equal([]);
expect(arr.slice(3, 0)).to.deep.equal([]);
expect(arr.slice(3, 100)).to.deep.equal(["jelly"]);
expect(arr.slice(5, 1)).to.deep.equal([]);

// 아래의 코드는 arr 전체를 복사한다. arr.slice()와 동일
expect(arr.slice(0)).to.deep.equal(["peanut", "butter", "and", "jelly"]);

Object

📌 Object.length ?

  • 객체에는 length 속성이 없다! --> undefined를 반환
    (length는 문자열과 배열에서만 사용 가능)
  • 객체의 길이를 알고싶다면 Object.keys()를 사용하여 배열로 변환 후, length 메소드를 사용한다.

📌 this

  • 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정
  • 메소드 호출 시 --> 객체 안의 함수를 메소드라고 한다. this가 메소드 안에서 쓰이면 함수를 포함하고있는 객체에 바인딩한다.

[참고]
https://poiemaweb.com/js-this

📌 Object.assign()

  • 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣음. 그 후 대상 객체를 반환
  • Object.assign({}, obj) --> 객체 복사 가능
  • 얕은 복사이기 때문에, 깊은 복사를 하려면 재귀함수 등 다른 방법을 찾아야함
Object.assign(target, ...sources)
`target`
목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체
`sources`
출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체들

[참고]
https://velog.io/@th0566/Javascript-얕은-복사-깊은-복사
https://velog.io/@recordboy/JavaScript-얕은-복사Shallow-Copy와-깊은-복사Deep-Copy

오늘의 메모 📝

  • 서로 다른 스코프 내의 같은 이름의 변수는 이름만 같을 뿐, 같은 변수가 아니다!
  • 함수는 호출이되어야 비로소 실행된다.
  • 함수는 return이 없으면 undefined를 출력한다.
  • js에서 함수는 생성될 때 당시의 변수를 참조한다(lexical scope)
  • 함수 안에서 선언된 함수는 바깥에서 사용 x

배운게 너무 많은 이틀이었네... 😇
profile
캣닙같은 마성의 개발자

0개의 댓글