[JavaScript] 모던 자바스크립트 Deep Dive 4장 - 변수

교재: 모던 자바스크립트 Deep Dive (이웅모 지음)

모던 자바스크립트 Deep Dive - YES24

4장, 변수

 

변수의 필요성

컴퓨터-자바스크립트 엔진-가 자바스크립트를 해석하고 실행하기 위해서는 자바스크립트 엔진이 기호와 연산자의 의미를알고 있어야하며, 표현식을 해석(파싱)할 수 있어야한다. 

연산을 수행하려면 피연산자를 기억해야하는데, 컴퓨터는 cpu를 사용해 연산하고 메모리를 사용해 데이터를 기억한다.

연산 결과를 메모리에 저장한 후에, 메모리 주소를 통해 직접 접근하는 것은 복잡하고 위험하다. 대신 우리는 변수라는 개념을 사용하여 메모리 공간을 식별한다. 변수란, 값의 위치를 가리키는 상징적인 이름이다. 변수는 인터프리터를 통해 메모리 공간 주소로 치환되고, 개발자가 직접 접근할 필요 없이 변수를 통해 안전하게 값에 접근할 수 있다.

변수에 값을 저장하는 것을 할당(대입/저장)이라 하고, 저장된 값을 읽어들이는 것을 참조라 한다.

변수는 가독성을 높이는 데 도움을 준다. 저장된 값의 의미를 명확히하는 변수를 만드는 것이 좋은 품질의 코드를 만드는 방법이다.

 

식별자

어떤 값을 구별할 수 있는 고유한 이름을 식별자라 한다. 변수 뿐만 아니라 함수, 클래스 등의 이름도 식별자라고 할 수 있다. 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 

 

선언

변수의 선언은 변수의 생성이다. 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 메모리 공간을 연결하여 값을 저장할 수 있게 준비하는 작업이다. 자바스크립트에서 변수를 선언할 때에는 

var
let
const

키워드를 사용한다.

var로 변수를 선언하고 값을 할당하지 않으면, 변수에는 'undefined'라는 값이 암묵적으로 할당되어 초기화된다. (js 특징) var는 암묵적 초기화를 수행하지만, 다른 경우에는 이전에 사용된 쓰레기값을 담고 있을 수 있으므로, 변수를 사용하기 전에 반드시 초기화하도록 한다. 

 

변수의 선언은 런타임이 아니라, 그 이전 단계에서 먼저 실행된다. 따라서 아래와 같이 사용할 수 있다. (호이스팅)

console.log(name);  // ReferenceError가 아닌 undefined

var name = 'melly';

자바스크립트는 소스를 실행하기 전에 준비 단계로 변수를 포함한 모든 선언문을 먼저 실행한다. 변수의 선언이 어느 곳에서 되었든 상관없이 변수를 참조할 수 있다는 것이다.

 

값의 할당은 할당 연산자 '='를 사용한다. 변수의 선언은 런타임이전이지만, 할당은 런타임에 순차적으로 실행된다. 

 

예제 결과 예상해보기

console.log(score);

score = 80;
var score;

console.log(score);

값의 재할당. 이미 할당한 변수에 또 다른 값을 할당하는 것. 만약 재할당이 불가능하다면 그것은 상수(constant)라 한다.

 

값을 재할당하면 이전 값이 저장된 메모리에서 이전 값을 지우고 새로운 값을 넣는 것이 아니라, 새로운 메모리 공간을 확보하여 그 공간에 새로운 값을 저장한다. 이렇게 되면, 이전 값이 담긴 메모리는 불필요한 값을 담고 있게 되는데 이후 가비지콜렉터에 의해 메모리에서 자동 해제된다. 

 

가비지 콜렉터 / 언매니지드언어와 매니지드 언어

 

식별자 네이밍 규칙

식별자는 어떤 값을 구별해낼 수 있는 고유한 이름을 가져야한다. 식별자 이름을 짓기 위해 네이밍 규칙을 확인해본다.

• 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 포함할 수 있다.
• 숫자로 시작할 수 없다.
• 예약어는 사용할 수 없다. (프로그래밍언어에서 사용되고 있거나, 사용될 예정인 단어)

콤마를 사용하여 한 줄에 여러 개의 변수를 선언할 수 있지만, 가독성이 떨어져 지양한다.

변수 이름은 대소문자를 구분한다.

 

가독성을 높이기 위한 4가지 유형의 네이밍 컨벤션

// 카멜 케이스
var deepDive;

// 스네이크 케이스
var deep_dive;

// 파스칼 케이스
var DeepDive;

// 헝가리언 케이스
var strDeepDive;
var $elem;
var observable$;

 

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