4. 변수
in 모던자바스크립트
변수란 무엇인가? 왜 필요한가?
- 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
- 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름
- 상징적 이름인 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 지정된 메모리 공간의 주소로 치환되어 실행된다.
- 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요 없이, 변수를 통해 안전하게 값에 접근할 수 있다.
- 데이터 저장 : 메모리 (2진수로) 데이터 연산 : cpu
- 변수에 값을 저장하는 것 : 할당
- 변수에 저장된 값을 읽어 들이는 것 : 참조
- 개발자의 의도를 명확히 나타내는 네이밍은 가독성을 높이며, 협업과 품질 향상에 도움을 준다.
식별자
- 변수 이름
- 어떤 값을 구별해서 식별할 수 있는 고유한 이름
- 값은 메모리 공간에 저장되어 있고, 그 값을 구별하기 위해 식별자를 사용한다.
- 식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억해야한다.
let result = 10 + 20
// 메모리에는 30이 저장되어 있다.
// 이 메모리 주소는 0x066F1392이다.
// 식별자 result는 이 메모리 주소를 기억해야 한다.
- 즉 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다.
- 식별자는 값이 아니라 메모리 주소를 기억하고 있다.
- 식별자로 값ㅇ르 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미이다.
- 식별자 === 메모리 주소에 붙인 이름
- 식별자는 변수 이름 뿐만이 아닌, 함수, 클래스에도 적용된다.
- 즉 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자이다.
변수 선언
- 선언에 의해 js 엔진에 식별자의 존재를 알린다.
- 변수를 생성하는 것
- 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
- 변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있다.
- 변수를 사용하려면 반드시 선언을 해야 한다.
- 선언할 때는 var, let, const 키워드를 사용한다.
- var는 블록 레벨 스코프를 지원하지 않고, 함수 레벨 스코프를 지원하기 때문에 의도치 않게 전역변수가 선언될 수 있다.
- 키워드 : js 코드를 해석하고 실행하는 js 엔진이 수행할 동작을 규정한 일종의 명령어
var score; // 변수 선언
// 값을 할당하지 않았기 때문에 js 엔진에 의해 undefined로 암묵적으로 할당되어 초기화된다.
변수 선언 단계
- 선언 단계 : 변수 이름을 등록해서 js 엔진에 변수의 존재를 알린다.
- 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined 를 할당해 초기화한다.
변수 이름은 어디에 등록되는가?
- 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다.
실행 컨텍스트 : js 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역이다. js 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.
- 초기화 : 변수가 선언된 이후 최초로 값을 할당하는 것
- 만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러) 발생한다. (식별자를 통해 값을 참조하려 했지만 js엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러)
변수 선언의 실행 시점과 변수 호이스팅
console.log(score)
var score
// 변수 선언보다 변수를 참조하는 코드가 앞에 있다.
- js는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log 실행시점에는 아직 score 선언 전이므로 ReferenceError 가 예상된다.
- 하지만 ReferenceError 가 발생하지 않고, undefined가 줄력된다.
- 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문
- js 엔진은 소스코드를 한 줄씩 순차적으로 실행하기 전, 소스코드의 평가 과정을 거친다.
- 이 과정에서 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
- 소스코드의 평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코들르 한 줄씩 순차적으로 실행한다.
- 즉, js 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행되므로, 어디서든지 변수를 참조할 수 있다.
- 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 js 고유의 특징 : 변수 호이스팅
값의 할당
var score // 변수 선언
score = 100 // 값의 할당
var score = 100; // 선언과 할당
- js 엔진은 선언과 할당을 하나의 문으로 단축 표현해도 2개의 문으로 나누어 각각 실행한다.
- 주의할 점 : 변수 선언과 값의 할당 시점이 다르다
- 변수 선언 : 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행
- 변수 할당 : 소스코드가 순차적으로 실행되는 시점인 런타임에 실행
console.log(score) // undefined
var score;
score = 100;
console.log(score) // 100
- 변수 선언시 배정된 메모리 공간을 값을 할당할 때 그대로 쓰지 않는다.
- 변수에 값을 할당할 때 이전 값 undefined가 저장되어 있던 메모리 공간을 버리고, 새로운 메모리 공간을 확보하고 그곳에 할당 값 100을 저장한다.
console.log(score) // undefined
score = 90
var score;
console.log(score) //90
// var score 가 호이스팅 된 후, 할당되기 때문에 90이 출력된다.
값의 재할당
var score = 80
score = 90
- 재할당 : 현재 변수에 저장된 값을 버리고 새로운 값을 저장하는 것
- 엄밀히 말하면 var 초기화도 undefined에서 값을 넣기 때문에 처음 값을 할당하는 것도 재할당이다.
- 만약 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수이다.
- 재할당도 초기화와 마찬가지로, 이전 80이 저장되어 있던 메모리 공간을 지우고 그 공간에 90을 저장하는 것이 아닌, 새로운 메모리 공간을 확보하고 그 메모리 공간에 숫자 값 90을 저장한다.
- undefiend와 80은 어떤 식별자와도 연결되어 있지 않으며, 더이상 필요하지 않으므로 가비지 콜렉터에 의해 메모리에서 자동 해지된다. (시점은 예측할 수 없다.)
식별자 네이밍 규칙
- 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
- 숫자로 시작하는 것은 안된다.
- 예약어는 식별자로 사용할 수 없다.
- ES5부터 유니코드 문자를 허용하므로 한글, 일본어도 가능하다. (권장x)
- 대소문자를 구분한다.
네이밍 컨벤션
- 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칭
- 카멜 케이스
var firstName: 변수, 함수 - 스네이크 케이스
var first_name - 파스칼 케이스
var FirstName: 생성자 함수, 클래스 - 헝가리언 에키스 :
var strFirstName// type + identifier
