ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [javascript] javascript 개발자가 알아야 할 핵심 개념 33가지 - (1)
    FrontEnd/Javascript 2021. 7. 6. 03:01
    본 내용은 https://github.com/leonardomso/33-js-concepts#11-javascript-engines 의 내용을 다루고 있습니다.
    해당 레포는 현재 40k가 넘는 star를 가진 레포입니다.

     

    1. Call Stack

    Javascript를 실행하면, javascript에 존재하는 함수들이 스택에 쌓이게 된다. 

    쌓인 함수들은 스택에서 pop하듯이 맨 위에서부터 실행이 완료되고 stack에서 빠져나가게 된다.

     

    call stack이 쌓이고 없어지는 모습

    python과 같은 언어에서 재귀호출 시 1000번이 넘어가면 max recursion depth가 생기듯이, javascript의 call stack에 일정량 이상의 함수가 쌓이면 maximum call sctack size exceed가 발생한다.

     

     

    2. Primitive Type

    Javascript에서 사용하는 변수명을 말한다.

     

    1. string
      일반적인 문자열. 같은 따움표로 시작하고 끝 맺어야 한다.
    2. number
      일반적인 숫자 표현. integer와 float를 모두 포함한다.
    3. boolean
      일반적인 참 거짓. true와 false
    4. undefined
      정의하지 않음. 즉 선언은 했지만, 값이 할당되지 않은 경우
    5. null
      존재하지 않음. 선언 후 null이라는 값을 할당해주어야 한다. 이 점에서 undefined와 다르다.
    6. NaN
      Not a Number의 줄임말. 수식 계산을 했는데 정상적인 수가 아닌 경우 나온다.
    7. symbol
      유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다.
      var a = Symbol() 혹은 var b = Symbol('b') 와 같이 생성 가능하다. 이 때 Symbol안의 arg는 symbol이름이라고 한다.
      iterable에 symbol을 index 혹은 key로 한 값이 있다면, for ... in 문을 돌거나 keys를 통해 key를 확인할 때 나타나지 않는다. (숨김기능)
      실무에서 잘 쓰지 않는다.

     

     

    3. Value Type vs Reference Type

    Javascript에는 Value Type과 Reference Type이 있다.

    다른 언어에도 모두 존재하듯이, 비참조형과 참조형을 말한다.

    Shallow copy( = )를 사용했을 때 값이 복사되면 value, 참조 주소값이 복사되면 reference type이다.

     

    위 예시를 보면 value type과 reference type의 차이가 선명하게 보일 것이다.

    value type의 경우 = 을 이용한 Shallow copy를 사용한 경우, a의 값이 바뀌어도 b의 값이 변하지 않는다.

    하지만 reference type의 경우 Shallow copy를 사용하면 a의 값이 바뀌면 b도 변한다.

    value type의 경우 같은 value를 가진 두 변수는 ==로 확인하면 true 이다.

    reference type의 경우 두 변수가 같은 value를 가졌지만, 둘은 서로 다른 주소를 참조하고 있으므로 ==으로 확인하면 false를 출력한다.

     

    reference type의 경우 다른 변수에 한 변수가 가진 값을 할당할 때, 참조값이 아닌 그 주소가 가리키는 값을 복사하려면 Deep copy를 사용해야하는데, for loop를 이용하여 모든 값을 복사하는 함수를 새로 정의하는 방법 혹은 lodash 라이브러리의 cloneDeep을 이용하는 방법 등이 있다.

    배열을 Deep copy하는 경우 [...<arr>] 의 방법도 사용 가능하다.

     

    https://kevinkim95-dev.tistory.com/16

     

    [javascript] javascript 개발자가 알아야 할 핵심 개념 33가지 - (2)

    본 내용은 https://github.com/leonardomso/33-js-concepts#11-javascript-engines 의 내용을 다루고 있습니다. 해당 레포는 현재 40k가 넘는 star를 가진 레포입니다. https://kevinkim95-dev.tistory.com/15 [ja..

    kevinkim95-dev.tistory.com

     

    댓글

Designed by Tistory.