TILJavascript

javascript-study-03

TIL, Web, coding, javascript

JavaScriptBanner

JavaScript Study 03

  • 용어
  • 변수
  • 식별자란?
  • 평가란?
  • 할당
  • 참조
  • 변수 선언
  • 호이스팅
  • 변수와 메모리의 관계


용어 - ( 러버덕 )

  • 키워드
  • 식별자
  • 변수
  • 메모리와 메모리 주소
  • 할당
  • 호이스팅

변수

값을 저장하는 메커니즘.

메모리에 접근하기 위해 메모리의 주소에 이름을 부여하는 것.

메모리 공간 그 자체.

메모리 공간에 부여한 이름.

메모리 : 기억하는 영역

메모리 셀 : 메모리를 이루는 공간. 1byte (8bit) 크기로 이루어져있음. 각 셀마다 주소를 가지고 있다.

자바스크립트는 메모리의 주소를 알려주지않는다.

이유 : 각 메모리의 주소가 어디서 쓰고있는지 모르기에 변경을 했다거나 지웠다거나 하는 일이 생길 경우 큰 에러를 발생시킬수 있기 때문이다. 따라서 각 메모리의 주소를 기억하게 하는 매커니즘(변수)을 사용한다.


변수의 이름 : 메모리 공간의 주소 위치를 별칭으로 참조한 것.

변수는 하나의 값만을 저장할 수 있다. (예외, 배열 / 객체)

변수의 명명은 1번 명명하면 해당 주소의 이름은 바꿀 수 없기 때문에, 변수의 이름을 지을때는 항상 고민하고 고민해야한다.


값이란? : 컴퓨터가 인식할 수 있는 데이터의 종류. 메모리에 들어가는 대상.

자바스크립트 엔진은

  1. 변수를 찾아갈 수 있다.
  2. 변수를 이용할 수 있다.

변수가 여러 값을 저장하기 위한 방법

  • 자료구조 이용
    • 객체
    • 배열

식별자란?

메모리 주소를 가리키는 고유한 변수 이름.

메모리에 들어간 값을 구별해낼수 있는 고유한 이름을 식별자라 칭한다.

( 변수한정이 아니다. 함수도, 클래스도 식별자가 될 수 있다. )


평가란?

값을 연산하는 과정

var는 자바스크립트엔진에게 내리는 키워드이며,var 뒤에 변수이름을 적어야한다.

CPU : 계산(연산)하는 영역.

메모리는 한정된 영역이기 때문에 자바스크린트 엔진에 내장된 Garbage Collector가 해당 메모리 주소가 사용이 되는지 안되는지를 게속 감시한다. 만약 해당 메모리 주소가 사용되지 않고 있다면 주소를 비워준다.


할당

변수에 값을 저장하는 행위 (=대입 , =저장)


참조

변수에 저장된 값을 읽어드리는 행위


변수선언

값을 할당하기 위한 메모리 공간을 확보하여 값을 저장하기 위한 준비를 하는 것.

변수를 선언하기 위해서는 var / let / const 키워드를 이용한다.

선언문 : 식별자를 만드는 것.

변수를 사용할 때는 반드시 선언을 하고 할당을 해야만 한다.

변수 이름의 등록처 : 실행컨텍스트

var키워드 변수선언시 최초로 undefined가 할당된다.


자바스크립트 엔진은 변수 선언을 아래의 2단계를 거쳐 수행한다.

  • 선언 단계(Declaration phase) : 변수 이름을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
  • 초기화 단계(Initialization phase) : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당한다.

undefined는 원시타입이며, 원시타입은 메모리에 등록된 순간 변경이 불가능하다.

​ 만약, 변수에 재할당을 해서 변경했다면 그것은 걸려있던 메모리 주소를 옮긴 것이지 undefined를 지운것이 아니다.


호이스팅

자바스크립트 코드는 인터프리터가 한줄한줄 실행하기 앞서, 먼저 선언문들만 골라내서 먼저 실행한다.

1
2
3
console.log(score); // undefined

var score; // 변수 선언(문)
1
2
3
4
5
6
7
8
9
console.log(score); // undefined

score = 80; // 값의 할당
var score;  // 변수 선언

console.log(score); // 80

// var score은 호이스팅 되어 처음에 undefined가 할당이 되었고
// score는 다시 80값으로 재할당되었다. 그 뒤에 나오는 var score; 구문은 이미 호이스팅하여 읽었으므로 다시 읽지 않고 넘어간다.

값의 교환

1
2
3
4
5
6
7
8
var x = 1;
var y = 2;

var temp = x;
x = y;
y = temp;

console.log(x, y); // 2 1

변수와 메모리의 관계

Memory

  1. var result 로 특정 메모리 공간에 변수 선언 및 초기화를 한다. ( 메모리에는 undefined가 생성됨. )

  2. result 변수에 100이라는 숫자 타입의 값을 재할당한다.

    ( 따라서 undefined라고 적힌 메모리에 걸려있는 링크를 끊고 새 메모리에 100값과 함께 링크를 건다.)

    ( undefined는 안쓰기때문에 가비지컬렉터에 의해 관리된다. )

  3. result 변수에 200이라는 숫자 타입의 값을 재할당한다

    ( 따라서 100 이라고 적힌 메모리에 걸려있는 링크를 끊고 새 메모리에 200값과 함께 링크를 건다. )

    ( 100이 적힌 메모리 공간은 안쓰기때문에 가비지컬렉터에 의해 관리된다. )


VS CODE에서 자바스크립트 즉석 실행하기

  • Code.Runner : 브라우저 나 노드에서 굳이 사용하지 않고 js파일을 실행할수있다. ctrl + option + n

    (단, 코드러너는 노드환경에서 실행되기 때문에 DOMAPI등은 못읽는다.)

  • quokka.js 시작 : cmd + shift + p - quokka.js : start on current file

    quokka.js 종료 : stop all (current)

Share