모던 자바스크립트 Deep Dive | 04 - 05장

 

04장 변수

4.1 변수란 무엇인가? 왜 필요한가?

• 메모리 : 데이터를 저장할 수 있는 메모리 셀의 집합체
• 메모리 셀 하나의 크기 : 1바이트(8비트)
• 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들임
• 각 셀은 고유의 메모리 주소를 가짐

• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
• 간단히 말하면, 값의 위치를 가리키는 상징적인 이름
• 변수 이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
• 변수 값 : 변수에 저장된 값
• 할당(대입, 저장) : 변수에 값을 저장하는 것
• 참조 : 변수에 저장된 값을 읽어 들이는 것

 

4.2 식별자

• 어떤 값을 구별해서 식별할 수 있는 고유한 이름
• 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 함
• 식별자는 값이 아니라 메모리 주소를 기억
• 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부름
• 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알림

 

4.3 변수 선언

• 변수를 생성하는 것
• 값을 저장하기 위한 메모리 공간을 확보하고 변수의 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
• 변수를 사용하려면 반드시 선언이 필요
• 변수를 선언할 때는 var, let, const 키워드를 사용

* 키워드 : 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어

• 변수 선언에 의해 확보된 메모리 공간은 undefined라는 값이 암묵적으로 할당되어 초기화됨(자바스크립트의 독특한 특징)
• 변수 선언을 2단계에 거쳐 수행(선언 단계 - 초기화 단계)

* 변수 이름은 어디에 등록되는가? > 모든 식별자는 실행 컨텍스트에 등록됨

 

 

4.4 변수 선언의 실행 시점과 변수 호이스팅

• 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행(런타임 이전 단계에 먼저 실행)
• 변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징
• 변수 선언뿐 아니라 키워드를 사용해서 선언하는 모든 식별자는 호이스팅됨

 

4.5 값의 할당

var score; //변수 선언
score = 80; //값의 할당

var score = 80; //변수 선언과 값의 할당

• 변수 선언과 값의 할당을 하나의 문으로 단축 표현해도 2개의 문으로 나누어 각각 실행
• 변수 선언은 런타임 이전에 먼저 실행 / 값의 할당은 런타임에 실행

console.log(score); //undefined

var score;
score = 80;

console.log(score); //80

 

• 변수에 값을 할당할 때 새로운 메모리 공간을 확보하고 그곳에 할당 값 80을 저장

 

4.6 값의 재할당

• 변수 : 값 재할당 가능
• 상수 : 값 재할당 불가능 (const 키워드)

* 가비지 콜렉터 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능

 

* 언매니지드 언어와 매니지드 언어

• 언매니지드 언어 - 개발자가 명시적으로 메모리 할당 및 해제하기 위해 저수준 메모리 제어 기능 제공
• 매니지드 언어 - 개발자가 명시적으로 메모리 할당 및 해제 불가능

 

4.7 식별자 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있음
• 숫자로 시작하는 것은 허용하지 않음
• 예약어는 식별자로 사용 불가능

* 예약어 : 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어

• 대소문자 구별
• 변수 이름은 의미를 명확히 표현

• 네이밍 컨벤션

//카멜 케이스(camelCase)
var firstName;

//스네이프 케이스(snake_case)
var first_name;

//파스칼 케이스(PascalCase)
var FirstName;

//헝가리언 케이스(typeHungarianCase)
var strFirstName; //type + identifier
var $elem = document.getElementById('myId'); //DOM 노드
var observable$ = fromEvent(document, 'click'); //RxJS 옵저버블

 

일반적으로

• 변수, 함수 이름 > 카멜 케이스 사용
• 생성자 함수, 클래스 이름 > 파스칼 케이스 사용

 

---

05장 표현식과 문

5.1 값

• 식(표현식)이 평가되어 생성된 결과
• 평가란? 식을 해석해서 값을 생성하거나 참조하는 것

 

5.2 리터럴

• 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법

//숫자 리터럴3
3

• 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성

 

5.3 표현식(expression)

• 값으로 평가될 수 있는 문(statement)
• 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조
• 값으로 평가될 수 있는 문은 모두 표현식
• 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있음

 

5.4 문(statement)

• 프로그램을 구성하는 기본 단위이자 최소 실행 단위
• 문의 집합으로 이뤄진 것이 프로그램, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍
• 문은 여러 토큰으로 구성됨
• 토큰이란? 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소
• 문을 명령문이라고도 부름(컴퓨터에 내리는 명령)

//변수 선언문
var x;

//할당문
x = 5;

//함수 선언문
function foo(){}

//조건문
if(x > 1){ console.log(x); }

//반목문
for(var i=0; i<2; i++){ console.log(i); }

 

5.5 세미콜론과 세미콜론 자동 삽입 기능

• 세미콜론(;)은 문의 종료를 나타냄
• 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행
• 코드블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록 뒤에는 세미콜론을 붙이지 않음
• 세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행되기 때문에 세미콜론 생략 가능

 

5.6 표현식인 문과 표현식이 아닌 문

• 표현식인 문은 값으로 평가되므로 변수에 할당 가능
• 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수 할당 불가능(에러 발생)

 

* 완료값 : 개발자 도구에서 표현식이 아닌 문을 실행하면 출력되는 undefined