04. 변수

어제부터 함께 교육과정을 듣는 동료들과 함께 딥다이브 스터디를 진행하기로 했다. 하여 이 어려운 성경 같은 책을 해치워 보려고 한다. 약간의 개념정리식으로?

오늘 알아볼 것은 4장 변수이다. 시작해보자!

변수란?

변수란? 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.
아래의 코드를 사람이 보았을 때 10과 20을 '+' 더해야 한 다는 것을 아는 것 처럼, 자바스크립트도 아래의 숫자(리터럴) 그리고 기호(연산자)의 의미를 알고 있으며, 코드를 계산(평가)한다.

10 + 20

사람은 계산과 기억을 모두 뇌에서 한다. 10+20를 인지하고 계산에 대한 값인 30을 기억한다.
하지만 컴퓨터는 계산을 수행하는 부품, 기억을 수행하는 부품이 따로 있다. (인간이라 다행이다) 컴퓨터의 기억을 수행하는 부품은 메모리, 메모리 셀의 집합체라고 할 수 있다.

셀 하나의 크기는 1바이트로 컴퓨터는 1바이트의 단위로 데이터를 저장하거나 읽는다. 각 메모리 셀은 고유 주소를 갖는데, 우리가 사는 집 주소 처럼 공간의 위치를 나타낸다.

위 표현식 (10+20)의 숫자 값인 10, 20, 그리고 연산 결과인 30은 각자 다른 메모리를 차지하고, 2진수로 저장된다.

하여 변수란 값을 저장하기 위한 메모리 공간 그 자체, 값이 담겨진 공간(주머니)의 이름이다.

변수라는 이 특별한 주머니는 하나의 값만 가질 수 있다.

여러개의 값을 저장 하려면 아래와 같이 여러 개의 변수를 사용해야 한다.
변수에 값을 저장하는 것을 '할당'이라고 한다.

var a = 10; 
var b = "june";

a 라는 변수를 호출하면 주머니에 담긴 10을 불러올 수 있다 (값의 재사용이 가능하다). a는 10이 위치한 주소를 알고 있기 때문이다! (저장된 값을 읽는 것은 '참조'라고 한다)

만약 여러개의 값을 하나의 값처럼 사용하고 싶다면? 배열이나 객체와 같은 자료구조 를 활용하면 된다.

var market = {type: fruit, name: apple}; 
var fruits = [
		{type: fruit, name: apple}; 
		{type: fruit, name: banana}; 
];

*변수는 식별자라고 불리기도 한다. 값을 구별해서 식별할 수 있는 고유의 이름이기 때문이다.

변수를 만드는걸 '선언'한다고 한다. 뭔가 공식선언이라는 단어가 떠올라 엄청난 것 처럼 느껴지지만..

var apple = "fruit"; 

이해한 바로는 "fruit"은 apple이야! 라고 외치는 것과 같다..
변수를 사용할 땐 var, let, const 키워드를 사용한다.

(유튜브 강사님들은 var을 그렇게 쓰지 말라고 하시는데.. 치명적인 단점이 있다고 한다. 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는데... 사실 지금으로선 무슨 뜻인지 모르겠다.)

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

console.log(score); 
var score; 

예제 04-05처럼 변수를 참조(값을 불러오는) 코드가 앞에 있고, 변수 선언문이 뒤에 있는 경우, 코드가 한 줄씩 순차적으로 실행되어 에러가 날 것 같지만 undefined가 출력된다.

자바스크립트 엔진은 변수 선언, 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. 소스코드의 평가 과정이 끝나야 순차적으로 실행한다. (영화 테이큰의 주인공이 "I'll find you and I'll kill you"로 범인을 협박해 결국 지구를 샅샅이 뒤집어 찾아내는 것 처럼...!) creation phase

var, let, const, function, class 등이 호이스팅된다. 호이스트 hoist는 "들어올리다"라는 의미를 가지고 있다.

변수의 값을 할당할 때

var june = "jiyun";

변수의 값을 할당할때는 연산자 '='를 사용한다. 변수 선언과 값의 할당은 하나의 문 statement로 단축하여 표현한다. (사실 단축 표현인지 모르고 원래 이렇게 하는건 줄 알았다).

이때 변수선언 (var june)이 먼저 실행되고 런타임에 값("jiyun")이 할당된다.

값을 재할당(변수의 값을 바꿀 때)할 때 저장된 값을 버리고 새로운 값을 저장한다 (주머니에 에어팟1세대를 버리고 에어팟 프로를 재빨리 넣는다). 이때 버려진 값은 가비지 콜렉터에 의해 자동 해제된다 😢.

But 값을 재할당 할 수 없어 저장된 값을 바꿀 수 없다면 이는 변수가 아닌 상수constant 이다.

변수의 이름을 정할 때

자바스크립트는 대소문자를 구분한다. 따라서 aejiyun과 Aejiyun은 다른 변수이다.(하나일 순 없다 둘이여야만 한다.)

변수는 여기까지..!