[JS] DeepDive(4) 변수

 변수라는 개념은 프로그래밍을 처음 배우고 나서 배운 개념이었다. 한번 알아보자.

 

메모리란 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 메모리 셀 하나의 크기는 1바이트이며 컴퓨터는 1 바이트 단위로 데이터를 저장하거나 읽게 된다.

 

 

 

우리가 변수에 값을 저장할때 이 메모리에 값을 저장하며 각 셀마다 고유의 주소를 가지게 된다.

 

컴퓨터는 2진수밖에 모르기 때문에 우리가 어떤 값을 저장하던 결국 2진수로 변환해서 값을 저장하게 된다.

 

 

 

 

 

만약 우리가

 

10 + 20

 

 

이라는 계산을 한다고 생각해보자.  이런 연산은 연산 결과 이후에 특정 메모리에 저장되게 된다.

 

 

만약 이 연산결과 30을 재사용하고 싶다면, 메모리주소를 알아야한다.

 

 

 

자바스크립트는 사용자가 직접 메모리주소를 통해서 값에 제어하는것을 막는데 그 이유는 아래와 같다. 만약 메모를통해 값을 접근하다가 실수로 운영체제가 사용하고 있는 값을 변경하면 시스템이 멈추게 될 수도 있고 같은 코드를 동작시키더라도 값이 저장되는 메모리 주소는 임의대로 항상 변하기 때문에 같은 코드라도 다르게 동작할 수 있다.

 

 

즉, 변수는 위와같은 문제를 해결하기 위해서 메모리에 저장된 값을 다시 재사용 할 수 있도록 상징적인 이름을 붙인 것이다.

 

 

 

 

 

식별자 ?

 

변수를 식별자라고도 한다. 

 

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

 

자바스크립트에서 변수,함수,클래스 등의 이름은 모두 식별자로 메모리상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부를 수있다.

 

결국 변수는 값이 아니라 메모리 주소를 기억하고 있다는 사실을 기억하자.  

 

 

 

 

변수 선언

 

자바스크립트에서 변수를 선언하기 위해서는 var,let,const 키워드를 사용해서 선언할 수 있다. ES6 이전에는 var 키워드로만 변수를 선언할 수 있었다.

 

 

 

ES6에서 let,const가 도입되었지만 var가 사장된것은 아니다. 이전에 작성된 코드에 var 선언이 있을수 있기 때문이다. 태생적으로 ES6는 ES5의 상위 집합이므로 var 키워드도 잘 알아두면 좋을 것 같다.

 

 

 

var score;

 

var 키워드를 통해서 위와같이 변수를 생성해줄 수 있다.

 

 

 

위 키워드를 통해서 변수이름을 등록한 이후 값을 저장할 메모리 공간을 확보할 수 있다.

 

 

변수 선언 이후 아래와 같은 단계를 통해 값이 저장되게 된다.

 

1. 선언단계 : 변수이름을 등록하여 JS엔진에 변수의 존재를 알린다.

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

 

var 키워드를 통해 변수를 선언하면 위 두 단계가 동시에 실행된다.

 

 

JS는 자동으로 undefined를 할당해주기 때문에 이전에 다른 어플리케이션이 사용한 값 즉 쓰레기값으로부터 안전하다.

 

 

 

실행 컨텍스트 (execution context)

자바스크립트 엔진이 소스평가를 실행하기 위한 환경을 제공하고 실행결과를 실제로 관리하는 영역

자바스크립트 엔진은 이를 통해서 식별자와 스코프를 관리하게 된다.

 

 

 

호이스팅

 

JS에는 다른 언어에는 없는 독특한 개념이 있다.

 

 

console.log(score);

var score;

 

score라는 변수를 선언한 것보다 console.log로 변수를 출력하는 코드가 먼저 와있는데 오류없이 실행된다.

 

해당이유는 변수 선언이 런타임 이전 단계에 먼저 실행되기 때문이다.

 

 

이런 이유로 JS엔진은 변수선언이 소스코드 어디에 있던 다른코드보다 먼저 실행되게 된다.

 

 

이때 주의해야할 점이 있다. 변수 선언은 런타임 이전에 실행되지만 값의 할당은 런타임에 실행된다. 

 

 

console.log(score); //undefined

var score= 80;

console.log(score); //80

 

 

위 예제를 보면 쉽게 이해가 될 것이다.

 

 

 

 

식별자 네이밍 규칙

 

 

식별자의 이름에 몇가지 규칙이 존재한다.

 

1. 식별자는 특수문자를 제외한 문자,숫자,언더스코어,달러기호($) 를 포함할 수 있다.

2. 식별자는 숫자로 시작할 수 없다.

3. 예약어는 식별자로 사용할 수 없다.

 

 

예약어란 프로그래밍에서 이미 사용되고 있는 단어들로 JS의 예약어는 아래와 같다.

 

 

 

 

ES5부터 유니코드문자로 변수선언이 가능해 한글,일본어 등으로 변수 선언이 가능하다 권장하는 방식은 아니다.

 

또한 JS에서는 _보다 카멜케이스나 파스칼 케이스를 주로 사용한다.

 

 

var firstName;
//카멜케이스
var FirstName;
// 파스칼 케이스

 

 

일반적으로는 변수,함수이름으로는 카멜케이스를 생성자함수,클래스 이름에는 파스칼 케이스를 많이 사용한다.