Preparing workspace
← 목록으로

[Tech Article] 자바스크립트는 무엇으로 구성되어있을까??

Tech Article

2021.04.26

자바스크립트는 무엇으로 구성되어있을까??



일부만 작성

값 (Value)

  • null 과 undefined
    일반적으로 null은 의도적으로 값이 없는 것을 의미하며,
    undefined는 의도하지 않게 값이 없는 것을 의미함.

객체

  • 객체 항등(Identity)
    2는 2와 같다(다시 말하면, 2 === 2)라 했다
    왜냐하면 2를 작성하는 어디에서나 항상 같은 값이 "소환"되기 때문
  • 하지만 {}를 작성한다면, 항상 다른 값이 될 것
    콘솔 창에 {} === {}를 실행하면 항상 false 반환
  • 컴퓨터가 코드에서 2를 만나면 항상 같은 2를 반환할 것
    하지만 객체 리터럴은 다름. 컴퓨터가 {}를 만나면 항상 새로운 객체를 생성함!
  • 객체 항등(identity)은 무엇일까?
    그것은 여전히 동일하거나, 값의 동일성을 나타내는 또 다른 용어
  • "a와 b가 항등이다"라고 말하는 것은 "a와 b가 같은 값을 가리키고 있다"는 것을 의미
    a === b
  • "a와 b가 항등이 아니다"는 것은 "a와 b가 다른 값을 가리킨다"는 것을 의미
    a !== b

함수

  • 매개 변수
    sayHi("Amelie")처럼 매개변수를 이용하면 함수로 몇 가지 정보를 전달할 수 있다.
    함수 내에서 매개변수는 변수처럼 동작한다.

  • 이 값들은 "인자" 혹은 "매개변수"로 불린다
    (함수를 정의하는 부분인지 호출하는 부분인지에 따라서..)
    그러나 엄격하게 구분할 필요는 없고, 두 용어는 같이 사용될 수 있다.

  • this
    this는 아마 자바스크립트 개념 중 가장 오해받고 있는 함수의 특별한 인수
    함수를 사용할 때 직접 this를 넘기지 않음
    대신, 함수 호출 방식에 따라 자바스크립트 자체가 this를 넘겨줄 것이다.

  • 예를 들어, 점 표기법 .을 사용하여 호출할 경우(iceCream.eat() 처럼)
    this는 .앞에 있는 값일 것. (예시에서는 iceCream)

  • this는 함수가 어디서 정의되었는지가 아니라, 어디서 호출되었는지에 따라 달라진다.

  • .bind, .call, .apply 같은 헬퍼를 이용하면 this를 좀 더 효과적으로 제어할 수 있을 것.

  • 화살표 함수
    (일부 작성)

  • 화살표 함수는 this의 개념이 없음

  • 만약 화살표 함수에서 this를 사용한다면, 가장 가까운 "일반" 함수의 this를 사용함

  • 매개변수나 함수에 존재하는 변수만 사용하는 것과 비슷.

  • 사람들이 화살표 함수를 사용하는 것은 코드상에서 둘러싸고 있는 것을
    그대로 "보고" 싶을 때 사용한다는 것을 의미

  • 콜 스택
    함수를 호출하는 것은 방에 들어가는 것과 같음.
    함수를 호출할 때마다, 함수 내부에 있는 변수들을 매번 초기화 함.

  • 함수를 호출하는 것은 코드를 사용해 새로운 "방"을 구성하고 들어가는 것과 같음
    함수의 변수들은 방에 "살아 있게" 됨.
    함수가 종료되면, "방"과 모든 변수는 사라진다.

  • 사용자는 이런 방을 수직 스택으로 시각화 할 수 있을 것임.
    이것이 콜 스택이다.
    함수가 종료되면, 콜 스택의 "아래" 함수로 돌아가게 된다.

  • 고차함수(Higher-Order Function)
    고차 함수는 다른 함수를 인수로 사용하거나 그것을 반환하여 처리하는 함수

  • 클로저
    일반적으로, 함수가 종료되면 모든 변수는 "사라진다".
    왜냐하면 더는 선언된 변수가 필요가 없어지기 때문.
    그러나 함수 내부에 함수를 선언한다면 어떻게 될까?

  • 내부에 있는 함수는 이후에 여전히 호출될 수 있고, 외부함수의 변수에 접근할 수 있게 된다.
    실제로 클로저는 매우 유용하다!

  • 클로저가 동작하기 위해서는, 외부 함수의 변수는 어딘가 "그대로 놓여" 있어야 함.
    따라서 이때는, 자바스크립트는 변수를 "잊어버리지" 않고 "변수를 살려둔 채"로 유지하게 됨.
    이것을 "클로저"라 부른다.
    클로저는 종종 오해의 소지가 있는 자바스크립트의 기능으로 간주하지만,
    사용자는 아마 그것을 깨닫지 못한 채 자주 사용할 것임


참고 링크

Ranohub

0%