모던 자바스크립트 Deep Dive 스터디
4. 변수
4.1 변수란 무엇인가? 왜 필요한가?
복잡한 앱도 결국은 데이터를 입력받아 처리하고 결과를 출력하는 것이 전부다.
변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.
💡 변수는 값을 저장하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다.
메모리 셀 하나의 크기는 1바이트(8비트)이다.
각 메모리 셀은 고유의 메모리 주소를 갖는다.
10 + 20 이라는 연산을 생각해보자.
10 20은 모두 메모리 어딘가에 저장되어 있다.
그리고 결과값인 30도 메모리 어딘가에 저장되어 있을 것이다.
그런데, 우리가 10 + 20을 한 이유는 결과값인 30을 어딘가에 활용하기 위해서가 아닌가?
따라서, 30을 다시 읽어 들여 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이 바로 변수다.
- 변수 이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
- 변수 값 : 변수에 저장된 값
- 할당 : 변수에 값을 저장하는 것
- 참조 : 변수에 저장된 값을 읽어 들이는 것
변수가 없다면, 우리는 30이 저장된 메모리 공간에 직접 접근해야 한다.
자바스크립트가 메모리 공간에 직접 접근하는 것을 허용하지 않는 이유는 다음과 같다.
- 실수로 운영체제가 사용하고 있는 값을 변경할 수 있기 때문에
- 메모리 주소는 코드가 실행될 때 메모리의 상황에 따라 임의로 결정되기 때문에
4.2 식별자
💡 식별자는 메모리 주소에 붙인 이름으로, 메모리 상에 존재하는 어떤 값을 식별할 수 있는 고유한 이름을 뜻한다.
식별자에는 변수, 함수, 클래스 등의 이름이 모두 포함된다.
result라는 변수(식별자)에 30이라는 값이 할당되었다고 해서, 'result는 30이구나~'라고 단순히 생각하면 안된다.
result는 30이 저장된 메모리 셀의 메모리 주소를 기억하고 있는 것이다.
4.3 변수 선언
💡 변수 선언이란 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.
변수를 사용하려면 반드시 선언이 필요하다.
변수의 선언에는 var let const 를 사용한다.
세 키워드의 차이점은 다음과 같다.
var
- 선언과 초기화(
undefined)를 동시에 진행한다. - 재선언, 재할당이 가능하다.
let
- 선언만 이루어지며, 초기화는 진행하지 않는다.
- 재할당만 가능하다.
const
- 선언만 이루어지며, 초기화는 진행하지 않는다.
- 재선언, 재할당 모두 불가능하다.
선언된 식별자는 실행 컨텍스트 내의 Variable Object에 등록된다.
실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.
4.4 변수 선언의 실행 시점과 변수 호이스팅
💡 호이스팅이란
varletconstfunctionclass키워드를 사용한 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.
변수 선언은 실행 단계, 즉, 런타임이 아니라 그 이전인 생성 단계에서 실행되기 때문에 마치 선언문이 맨 위로 끌어올려진 것과 같은 효과를 낸다.
따라서, 선언 이전에 참조하는 코드를 작성하여도 선언이 된 상태라는 것이다.
단, let const로 선언된 변수는 초기화를 진행하지 않았기 때문에 참조 에러가 발생한다.(혹은 쓰레기 값이 나올 수 있다.)
4.5 값의 할당
💡 할당 연산자(=)를 사용하여 변수에 값을 할당할 수 있다.
let score = 80 처럼, 변수 선언과 값의 할당을 동시에 표현할 수 있다.
단, 자바스크립트 엔진은 이를 let score score = 80으로 나누어 선언과 할당을 각각 실행한다.
위에서 말한 것처럼 선언은 런타임 이전에, 할당은 런타임에 실행된다.(호이스팅)
4.6 값의 재할당
💡 재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다.
위에서 말한 것처럼, var let은 재할당이 가능하고 const는 재할당이 불가능하다.
값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라 한다.
변수에 값을 재할당하면 이전 값이 저장되어 있던 메모리 공간을 지우고 그 공간에 재할당 값을 저장하는 것이 아니다.
새로운 메모리 공간을 확보하고 그 공간에 재할당 값을 저장한다.
재할당 이후, 어떤 식별자도 참조하지 않는 이전 값들은 가비지 콜렉터의 대상이 되어 메모리에서 자동 해제된다.(자바스크립트는 매니지드 언어이다.)
4.7 식별자 네이밍 규칙
💡 식별자의 네이밍 규칙
- 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러($)를 포함할 수 있다.
- 식별자는 숫자로 시작할 수 없다.
- 예약어(프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어)는 식별자로 사용할 수 없다.
💡 식별자의 네이밍 컨벤션
- 카멜 케이스(camelCase)
- 스네이크 케이스(snake_case)
- 파스칼 케이스(PascalCase)
- 헝가리언 케이스(typeHungarianCase) : 앞에 자료형을 붙이는 방식
