[JavaScript] 4. 변수

do_large·2021년 1월 14일
0

Deep Dive

목록 보기
1/13
post-thumbnail

알아두기

  • 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다.
    메모리 셀 하나의 크기는 1바이트이며, 컴퓨터는 메모리 셀의 크기(1바이트)로 데이터를 저장하거나 읽어들인다
    각 셀은 고유의 메모리주소를 갖는다
  • 컴퓨터는 모든 데이터를 2진수로 처리한다.
    저장되는 데이터의 종류와 관계없이 모두 2진수로 저장된다.
  • 식별자는 실행 컨텍스트에 등록된다.
    변수이름과 변수값은 실행컨텍스트에 키/값형태인 객체로 등록된다.

변수

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

만약에 변수에 값을 할당하게 되면 변수에 값 자체가 들어가는게 아니고 그 값이 저장된 메모리의 주소가 할당되는것!

그래서 변수는 값의 위치를 가리키는 상징적인 이름이다.

변수에 값을 저장하는 것을 할당이라고 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라고 한다.

식별자

식별자란 어떤 값을 구별해서 식별할 수 있는 고유한 이름.
변수, 함수, 클래스 등의 이름은 모두 식별자이다.

식별자는 값이 아니라 메모리주소를 기억하고 있다.
식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다.

변수 선언

값을 저장하기 위한 메모리공간을 확보하고,
변수이름과 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는것!

js에서 변수선언시 사용되는 키워드는 var, let, const가 있다.
(var와 const,let의 가장 큰 차이점은 스코프!)

  • var 키워드로 변수 선언하기
var score;

변수를 선언했지만 아직 값을 할당하지 않았기때문에 undefined가 암묵적으로 할당되어 초기화된다.

변수 선언의 실행시점과 변수 호이스팅

변수선언은 런타임(소스코드가 한 줄씩 순차적으로 실해오디는 시점)이 아니라 그 이전단계에서 먼저 실행된다.

자바스크립트 엔진은 코드를 실행하기에 앞서 소스코드의 평가과정을 거치는데, 이 시점에 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내서 먼저 실행한다.

변수 선언이 소스코드의 어디에 있던지 다른 코드보다 먼저 실행된다

그래서 아래의 코드는 참조에러가 발생하는게 아니라 undefined가 출력된다.

console.log(score); // undefined

var score;

값의 할당과 재할당

변수 선언과 값의 할당을 하나의 문으로 표현

var score = 80;

위의 코드에서 변수 선언과 값이 할당되는 시점은 다르다
변수 선언은 런타임 이전에 먼저 실행되지만,
값의 할당은 런타임에 실행된다.

console.log(score); // ① undefined

var score = 80;

console.log(score); // ② 80

① 에서 score는 런타임 이전에 먼저 선언되었으며 undefined로 초기화 되어있다.
② 에서는 런타임시 score에 80이 할당된 후 score를 출력했기때문에 80이 출력된다.

var score = 80;
score = 90;

변수에 값을 재할당 하면 score변수의 값은 80에서 90으로 변경된다.

80이 저장되어있던 메모리 공간을 지우고 그 메모리공간에 90을 새로 저장하는 것이 아니고,
새로운 메모리 공간에 90을 저장하고 score가 참조하는 메모리 주소를 변경하는 것이다!!

식별자 네이밍 규칙

  1. 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어( _ ), 달러기호($)를 포함할 수 있다.
  2. 식별자는 특수문자를 제외한 문자, 언더스코어, 달러기호로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
  3. 예약어는 식별자로 사용할 수 없다.

네이밍 컨벤션
하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명규칙

// 카멜 케이스 (camelCase)
var firstName;

// 스네이크 케이스 (snake_case)
var first_name;

// 파스칼 케이스 (PascalCase)
var FirstName;

// 헝가리언 케이스 (typeHungarianCase)
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

0개의 댓글