자바스크립트 변수 Variable

Achivement Goals

 

✅  프로그래밍은 데이터 처리를 하는 것임을 이해한다.

✅  변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.

✅  변수의 선언과 값의 할당에 대해서 설명하고 코드로 작성할 수 있다.

✅  값으로 변환된 표현문이 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다.

 

✅  자바스크립트에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다.

✅  변수 선언과 값 할당에 사용되는 용어에 대해서 정확하게 알 수 있다.

✅  =가 "같다"라는 의미가 아니라 할당연산자임을 이해할 수 있다.

✅  num = num + 1이 "같다"라는 의미가 아니라 값을 할당하는 것임을 설명할 수 있다.

 

📌  변수란 무엇인가? 왜 필요한가?

 

애플리케이션은 데이터를 다룬다.

아무리 복잡한 애플리케이션이라 해도 데이터를 입력받아(input) -> 처리하고 -> 그 결과를 출력(output)하는 것이 전부다.

변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.

 

컴퓨터는 CPU를 사용해 '연산'하고, 메모리를 사용해 '기억'한다.

메모리 셀memory cell

메모리는 데이터를 저장할 수 있는 메모리 셀memory cell의 집합체다.

메모리 셀 하나의 크기는 1byte (8bit)이며, 컴퓨터는 1byte 단위로 데이터를 저장(write)하거나 읽어(read)들인다.

메모리에 저장되는 모~든 값은 2진수로 저장된다.

메모리 주소memory address

각 셀은 고유의 메모리 주소memory address를 갖는다.

메모리 주소는 메모리 공간의 위치를 나타낸다.

ex. 4GB 메모리는 0부터 4,294,967,295까지의 메모리 주소를 갖는다. (0x00000000 ~ 0xFFFFFFFF)

 

메모리 주소를 통해 값에 직접 접근하는 것은 치명적인 오류를 발생시킬 수 있기 때문에 매우 위험하다.

자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

즉 프로그래밍 언어는,

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

 

🏁  변수 Variable

 

◾ 하나의 값을 저장하기 위해 확보한 메모리 공간 자체

◾ 그 메모리 공간을 식별하기 위해 붙인 이름  -->  값의 위치를 가리키는 상징적인 이름

◾ 변수 이름은 첫아이의 이름을 짓듯... 심사숙고해서 지어야 한다.

 

var result = 10 + 20; 

// result 라는 이름의 변수에 30이란 변수값이 할당assignment되었다.
// 변수에 할당된 값을 읽어들이는 것은 참조reference라고 한다.

 

만약, 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러) 발생한다.

식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러다.

 

📌  식별자

 

변수 이름 / 함수 이름 / 클래스 이름 == 식별자identifier

 

🏁  식별자 Identifier

 

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

값은 메모리 공간에 저장되어 있기 때문에, 식별자는 메모리 주소를 기억해야 한다.

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

 

🏁  식별자 네이밍 규칙

 

// 카멜 케이스 : 변수 or 함수의 이름에 적용
var firstName;

// 스네이크 케이스
var first_name;

// 파스칼 케이스 : 생성자 함수 or 클래스 이름에 적용
var FirstName;

// 헝가리언 케이스
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드

 

◾ 특수문자를 제외한, 문자 / 숫자 / 언더스코어(_) / 달러 기호($) 포함 가능

◾ 숫자로 시작하는 건 허용 X

◾ 예약어는 식별자로 사용 불가

 

📌  변수 선언

 

변수를 선언하려면 반드시 선언이 필요하다.

 

◾ var (ES5)

전역 변수

치명적인 단점 존재  -->  block-level scope 지원 X / function-level scope 지원 O

 

var score; //변수는 선언했지만 값을 할당하지 않았기 때문에 변수값은 undefined 이다.

 

01 선언 단계 :

변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.

 

02 초기화 단계 (암묵적 자동 수행) :

값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당해 초기화한다.

초기화 = 변수가 선언된 이후, 최초로 값을 할당하는 것. 

 

◾ let (ES6)

지역 변수

 

◾const (ES6)

지역 **상수  -->  값을 재할당할 수 없다.

 

📌  변수 호이스팅

 

console.log(score); // undefined

var score;          // 변수 선언문

 

변수 선언은 런타임(runtime)이 아니라 그 이전 단계에서 먼저 실행된다.

변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는, 자바스크립트 고유의 특징이다.

 

📌  값의 할당 & 재할당

 

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

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

 

◾ =  ( 할당 연산자 )

변수에 값을 할당assignment할 때는 할당 연산자 =을 사용한다.

변수 선언과 값의 할당을 하나의 문statement으로 단축해서 표현할 수 있다.

 

❗ 변수의 선언과 값의 할당의 실행 시점은 다르다.

❗ 변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 런타임에 실행된다.

 

var score = 80;
score = 90;

 

 

출처

모던 자바스크립트 Deep Dive - 이웅모