모던 자바스크립트 4~5장

김동현 (마늘향기)·2023년 4월 5일

모던 자바스크립트 4장 변수

변수

cpu로 연산하고, 메모리로 데이터를 기억한다

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 즉 값의 위치를 가리키는 상징적인 이름이다. (하나의 값을 저장하지만, 배열이나 객체 같은 자료구조를 사용하여 여러 개의 값을 그룹화 해서 하나의 값처럼 사용할 수 있다.)

변수 이름과 변수 값 var result = 10 + 20;

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

식별자

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다. 식별자는 값이 아니라 메모리 주소를 기억한다.

식별자라는 용어는 변수 이름에만 국한해서 사용하지 않는다. 예를 들어, 변수, 함수, 클래스 등의 이름은 모두 식별자다.

선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

변수 선언

변수 선언이란 변수를 생성하는 것이다. 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.

변수를 사용하려면 반드시 선언이 필요하다. (변수 선언 키워드: var, let, const)

  • 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
  • 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

🥪 변수 이름은 어디에 등록되는가?
모든 식별자는 실행 컨텍스트에 등록된다. 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.
변수 이름과 변수 값은 실행 컨텍스트 내에 키/값 형식인 객체로 등록되어 관리된다.

var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행된다.

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

변수 선언은 런타임(소스 코드가 한 줄씩 순차적으로 실행되는 시점)이 아닌 그 이전 단계인 평가 과정에서 먼저 실행된다. 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수, 함수 등)을 소스코드에서 찾아내 먼저 실행한다.

 평가 과정(변수 선언, 함수 선언 등..) → 런타임

변수 호이스팅이란 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트의 고유 특징이다. 변수 선언뿐 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다. 모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문이다.

값의 할당

할당 연산자(=)는 우변의 값을 좌변의 변수에 할당한다.

var score;
score = 80;
var score = 80;

변수 선언과 값의 할당을 2개의 문으로 나누어 표현한 코드와 하나의 문으로 단축 표현한 코드는 정확히 동일하게 작동한다. 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

값의 재할당

var score = 80;
score = 90;

변수에 값을 재할당하면 새로운 메모리 공간을 확보하여 값을 저장한다. 80이 저장되어 있던 메모리 공간을 지우고 90을 새롭게 저장하는 것이 아니다.

초기화 단계에서 할당된 undefined와 할당된 80은 어떤 식별자와도 연결되어 있지 않다. 이런 불필요한 값들은 추후 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

식별자 네이밍 규칙

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

모던 자스 5장 표현식과 문

값은 식(표현식)이 평가되어 생성된 결과를 말한다.

리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호(’’, ””, ., [], {}, // 등)로 표기한 코드다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다.

표현식

표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다.

var score = 50 + 50;
score; //-> 100
  • 리터럴 표현식 : 리터럴은 값을 생성하므로 그 자체로 표현식이다
  • 연산자 표현식 : 50 + 50과 같이 리터럴과 연산자로 이루어져 있는데, 평가되어 숫자 값 100을 생성하므로 표현식이다.
  • 식별자 표현식 : 식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.
  • 함수/메서드 호출 표현식 (선언이 이미 존재한다고 가정) : square(); person.getName();

값으로 평가될 수 있는 문은 모두 표현식이다.

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다.

문은 여러 토큰으로 구성된다. 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다. 키워드, 식별자, 연산자, 리터럴, 세미콜런(;)이나 마침표(.) 등의 특수 기호는 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이므로 모두 토큰이다.

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

세미콜론(;)은 문의 종료를 나타낸다. 문을 끝낼 때는 세미콜론을 붙여야 한다. 단, 0개 이상의 문을 중괄호로 묶은 코드 블록({…}) 뒤에는 세미콜론을 붙이지 않는다. 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문이다.

세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행되기 때문에 세미콜론은 생략 가능하다. 하지만 하는게 좋다. 자동 삽입 기능의 동작과 개발자의 예측이 일치하지 않는 경우가 발생하기 때문이다.

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

문에는 표현식인 문과 아닌 문이 있다. 표현식은 값으로 평가될 수 있는 문이며, 표현식이 아닌 문은 값으로 평가될 수 없는 문을 말한다. 표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다.

profile
안녕하세요, 김동현입니다. 공부한 내용을 기록하고자 블로그를 생성하였습니다. 감사합니다.

0개의 댓글