ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JS Deep Dive] 04. 변수
    Front-end/javascript 2022. 8. 23. 22:35

     

     

    1️⃣ 변수란 무엇이고 왜 필요한가?

    💡 컴퓨터는 아래 식을 어떻게 계산할까?
         1 + 2

     

    메모리 상의 임의의 위치(메모리 주소)에 1, 2 숫자 값이 각각 저장되고, CPU에서 값을 읽어들여 연산을 수행한다.

    연산 결과로 생성된 숫자 3도 메모리 상의 임의의 위치에 저장된다.

     

    😨 만약 연산 결과 3을 재사용하고 싶다면?

    3이 저장된 메모리 공간에 직접 접근해야 하지만 오류 발생 확률이 높기 때문에 자바스크립트는 메모리 제어를 허용하지 않는다.

     

    따라서 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용하기 위해 변수 메커니즘을 사용한다.

     

    ⭐️ 변수
    : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다

     

    변수를 사용하면 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없기 때문에 안전하게 값에 접근할 수 있다.

     


    2️⃣ 식별자

    : 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다

    var result = 1 + 2;

     

    식별자 result는 값 3을 식별할 수 있어야 하기 때문에, 값 3이 저장되어 있는 메모리 주소를 기억해야 한다.

    따라서 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

     


    3️⃣ 변수 선언

    ⭐️ 키워드 var, let, const 사용

     

    var score;

    변수를 선언하면 자바스크립트는 (1)변수 이름을 등록하고 (2)값을 저장할 메모리 공간을 확보한다. 선언 -> 초기화

    아직 값을 할당하지 않았지만 메모리 공간에는 undefined라는 값이 암묵적으로 할당되어 초기화된다.

     


    4️⃣ 변수 호이스팅

    console.log(score);
    
    var score;

    자바스크립트 엔진은 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되기 때문에 어디서든 변수를 참조할 수 있다.

    변수 선언이 런타임 이전 단계에서 먼저 실행되기 때문이다.

     

    변수 호이스팅: 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 특징이다.

     


    5️⃣ 값의 할당

    console.log(score);   //undefined
    
    var score = 80;
    
    
    console.log(score);   // 80

    자바스크립트는 변수의 선언과 값의 할당을 2개로 나누어 각각 실행한다.

     

    undefined가 저장되있는 메모리 공간을 지우고 80을 새로 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그 곳에 할당값 80을 저장한다. undefined가 저장되어 있던 메모리 공간은 더 이상 사용되지 않아서 가비지 콜렉터에 의해 메모리가 해제된다.

     

     

     

     

     

     

     

    'Front-end > javascript' 카테고리의 다른 글

    [JavaScript] ⭐️DOM 개념 정리  (0) 2022.09.04
Designed by Tistory.