4-1 변수란 무엇인가? 왜 필요한가?
변수 없이 아래와 같이 코드를 쓴다고 생각해보자.
10 + 20
해당 표현 식을 소스코드에서 실행하게 되면 연산된결과가 임의의 위치에 메모리에 저장한다.
하지만 이 값을 어떻게 사용 할 수 있을까. 해당 값을 사용하려면 저장한 메모리에 직접 접근해야 하는데 운영체제가 사용하고 있는 메모리를 건들게 되면 치명적인 오류가 날 가능성이 있기 때문에 자바스크립트는 개발자의 직접적인 메모리 접근을 허용하지 않는다.
따라서 특정 메모리에 있는 값을 가지고 오기 위해 변수가 필요하다.
변수
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.
따라서 우리는 변수를 통해 값의 재사용이 가능해진다.
변수에 값을 저장하는 것을 할당 (저장, 대입), 가져오는 것을 참조라고 한다.
4-2 식별자
변수 이름을 식별자라고 한다.
식별자는 값이 아닌 메모리의 주소를 기억하고 있다.
식별자는 네이밍 규칙을 준수해야 하고, 변수 선언을 통해 자바스크립트 엔진에 식별자의 존재를 알린다.
4-3 변수 선언
변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const를 이용하여 선언한다.
자바스크립트는 변수 선언을 다음과 같은 2단계를 거쳐 선언한다.
- 선언 단계 : 변수 이름을 통해서 자바스크립트 엔진에 변수의 존재를 알린다.
- 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.
4-4 변수 선언의 실행 시점과 변수 호이스팅 **
자바스크립트 예시의 유명한 코드 하나
console.log(score);
var score;
위의 콘솔 로그는 변수 선언 코드 전에 실행되어도 참조 에러가 발생하지 않는다.
그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.
자바스크립트는 변수 선언과 동시에 초기화가 이루어지므로 위 콘솔 로그는 undefined
를 출력한다.
위와 같이 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅 이라고 한다
4-5 값의 할당
변수 선언은 소스코드가 순차적으로 실행되는 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 실행되는 시점인 런타임에 실행된다.
console.log(score); // undefined
var score; // 1. 변수 선언
score = 90; // 2. 값의 할당
console.log(score); // 90
값의 할당은 런타임에 실행되기 때문에 소스코드가 한줄씩 실행될때 위와 같이 콘솔결과가 undefined
90
이 순서대로 출력된다.
값의 할당을 하나의 문으로 단축 표현시
위 코드의 변수 선언, 값의 할당을 var score = 90; 과 같이 단축 표현을 해도 자바스크립트 엔진은 변수의 선언과 값의 할당을 2개의 문으로 나누어 각각 실행하기 때문에, 변수에 undefined가 할당되어 초기화되는 것은 변함이 없다.
4-6 값의 재할당
var score = 80; // 변수 선언과 값의 할당
score = 90; // 값의 재할당
재할당은 변수에 저장된 값을 다른 값으로 변경한다.
값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라고 한다. 자바스크립트는 const로 상수 표현이 가능하지만, const는 상수 만을 위해 사용하지 않는다.
값의 재할당을 실행할 경우에는 위와 같이 기존 메모리에 재할당 하는 것이 아닌 새로운 메모리 공간을 확보하고 그 메모리 공간에 값을 저장한다.
아무도 사용하지 않는 메모리의 경우에는 가비지콜렉터를 통해서 메모리가 정리된다. 단, 메모리에서 언제 해제될지는 예측할 수 없다.
가비지 콜렉터
애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용하지 않는 메모리를 해제한다. 더 이상 사용하지 않는 메모리란 어떤 식별자도 참조하지 않는 메모리 공간을 의미한다.
4-7 식별자 네이밍 규칙
자바스크립트 식별자는 아래와 같은 네이밍 규칙을 가진다.
- _ , $, 숫자, 문자의 조합으로만 변수 생성 가능
- 변수의 처음은 숫자가 올 수 없다.
- 예약어 (await, for, ...) 는 식별자로 사용 할 수 없다.
ECMAScript 사양에 정의된 함수, 객체들도 카멜 케이스와 파스칼 케이스를 사용하고 있기 때문에 코드 전체의 가독성을 위해서는 카멜 케이스와 파스칼 케이스를 사용하는 것이 좋다.
'모던 자바스크립트 Deep Dive' 카테고리의 다른 글
[모던 자바스크립트 Deep Dive] 제어문 (0) | 2024.04.23 |
---|---|
[모던 자바스크립트 Deep Dive] 데이터 타입 (0) | 2024.04.22 |
[모던 자바스크립트 Deep Dive] 표현식과 문 (0) | 2024.04.21 |
[모던 자바스크립트 Deep Dive] 자바스크립트란 (2) | 2024.04.20 |
[모던 자바스크립트 Deep Dive] 프로그래밍 (0) | 2024.04.20 |