JS 자바스크립트 핵심 컨셉

Call Stack

 함수를 호출하는 자료구조

 함수를 스택 위에 올리고 함수를 실행하면 제거

+ 서로 계속 불러대는 함수 만들면 'maximum call stack size exceeded' 에러 뜸 -> 스택오버플로우

Primitive types 

 종류 : Boolean, Number, String, null(존재하지 않음), undefined(정의되지 않음), NAN(Not A Number)

                                                                                                              -> 주로 수학식이 말이 안될때 뜸

Value type & Reference type

 *Value  --------- primitive type 가능

  let  a = 50;

  let b = a;

  a = 10;

  console.log(b)   -> 50

-> reference 하는 상황이 아님

 

*Reference ---------array, object, function

  const a = ["kim", "so"]

  const b = a;

  a.push("yeong");

  console.log(b);  ->["kim", "so", "yeong"]

 

여기서 b.push("Hello")해주고

  console.log(b); -> ["kim", "so", "yeong", "hello"]

Type Conversion

  :자바스크립트가 값을 강제적으로 변환시킴

  console.log(66+true);  -> 67

                                   true를 1로, false를 0으로 변환시킴

  console.log(66+"false"); -> 66false

                                     더하기에서만 false를 하나의 string 으로 인식해줌 

                                     +를 제외한 다른 부호에선 NaN

 

  console.log(null

                 undefined

                 NaN

                 0 ); -> false 텅비었기때문에 0으로 변환 = false

 

  console.log("true" == true);  -> false

                                           -> =이 boolean을 만나면 숫자로 변환 true 가 1이됨

                                                따라서 "true"와 true 모두 1로 변환시키지만 "true"는 string 이라 1이 될 수 없음

 

  console.log("1" == 1); -> true                             

Type Of

  : 타입확인

 

  console.log(typeof "12311")  -> string

  console.log(typeof function(){

  });  -> function

 

예외적 버그

  console.log(typeof null) ->object

  console.log(typeof []),   console.log(typeof {}) -> 오류

  이럴땐 instanceof 사용 instance of 는 primitive type에선 작동하지 X

 

ex)   console.log([] instanceof Array);  -> true

ex)  console.log({} instanceof Array);  -> false 

 

primitive type의 타입을 확인할땐 typeof

array, object의 타입을 확일할땐 instanceof

Scope

  :접근할 수 있는가? 없는가?

global scope 무엇이든 접근가능

 

const hi = "hello";

function a(){

  console.log(hi);

}

a();   -> hello

 

큰곳에서 작은곳으로 접근 불가, but 작은곳에서 큰 곳 접근가능

function a(){

  const b = "b";

  function c(){

    const d = "d";

     function e(){

        const f= "f";

    }

  }

}

 

e는 d그리고 b에 접근할 수 있다.

그러나 b는 d그리고 f에 접근할 수 없다.

 

if(true){

   const hello = "Hello";

 }

console.log(hello);

이렇게하면 hello 찾을 수 없어서 작동하지 않음

 정의되어있지않다 

 

따라서,

const hello;

if(true){

  hello = "Hello";

}

console.log(hello) -> Hello

Expression vs Statement

Expression : 자바스크립트에 의하여 value를 return하는 것

  ex)

  function add(a,b){

    return a+b;

  }

  const how = add(5,6)

                      ->이게 value 를 리턴하는 expression 

 

cosole.log(1+1) -> 이것도 expression

 

statement : 그냥 명령 or 지시 if, Else if, for, while 등등

  ex)

  if(true){

  }

statement 는 변수에 담을수 없음 

const thing = if(true){} -> 불가능

 

* 함수선언 function declaration  &  함수표현식 function expression *

function declaration : 지정된 매개변수를 갖는 함수

ex) const awesome = add(1,5);

   function add(a,b){

       return a + b;

   }  

    console.log(awesome)  -> 6 

->함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)로 끌어올려진다. 함수 표현식은 불가능.

끌어올려진다 = 호이스팅

 

function expression : function 문과 매우 비슷 

notHoisted(); TypeError: notHoisted is not a function

let notHoisted = function() {

  console.log("bar");

};

->함수 표현식은 끌어올리기 불가능

 

호이스팅 : let, function 선언이 자동으로 위로 올라감

IIFE

: Immediately Invoked Function Expression

 다른사람에게 자바스크립트를주고 싶지 않을때, 비밀모드, 아무도 코드 변경할 수 X

(function(){

   const secretUser = ["kim", "so", "yeong"];

   console.log(secretUser);

  }) ()     -> 해당함수부르기

 

Message Queue and Event Loop

Queue : Web  API에서 온 메세지

           스택에 아무것도 없을 경우에만 queue에 있는걸 가져가서 실행