[모던 JS] CH4 변수, CH5 표현식과 문

CH4. 변수

4.1 변수란 무엇인가?

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

10 + 20

// 변수는 하나의 값을 저장하기 위한 수단
var userId = 1;
var userName = 'Lee';

// 객체나 배열 같은 자료구조를 사용하면 
// 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용 가능
var user = {id : 1, name : 'Lee'};
var users = [
    {id : 1, name : 'Lee'},
    {id : 2, name : 'Kim'}
}

 

10, 20이 별개의 메모리 주소에 들어가 있고, 연산 결과 역시 따로 저장하고 있음

var res = 10 + 20;

4.2 식별자

- 어떤 값을 구별해서 식별할 수 있는 고유한 이름 (변수 이름)

- 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 함

- 식별자는 값이 아니라 메모리 주소를 기억하고 있음

- 즉, 식별자로 값을 구별해서 식별한다는 것은
  식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미

- 변수, 함수, 클래스 등의 이름은 모두 식별자

4.3 변수 선언

- 변수를 생성하는 것

- 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결하는 것

- 변수를 선언할 때는 var, let, const 키워드 사용

- var 키워드는 단점 존재

: 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 함

var score; // 변수 선언

- 변수 선언 후 값을 할당하지 않은 경우

: 확보된 메모리 공간에는 JS엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화됨 

- 변수 선언을 다음과 같은 2단계에 거쳐 함

: 선언 단계 - 변수 이름 등록해서 변수의 존재를 알림

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

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

console.log(score); // undefined
var score; // 변수 선언문

참조에러가 발생할 것 같지만, undefined가 출력됨

이유? 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점(런타임)이 아니라 그 이전 단계에서 먼저 실행됨

즉, JS엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행됨

 

- 변수 호이스팅?

: 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징 

4.5 값의 할당

var score; 
score = 80;

var score = 80; // 변수 선언과 값의 할당을 동시에

 

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만,

값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행됨

console.log(score); // undefined

var score;
score = 80;

console.log(score); // 80 (재할당)

console.log(score); // undefined

score = 80;
var score;

console.log(score); // 80

4.6 값의 재할당

- 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수임

var score = 80;
score = 90;

 

! const

: 재할당 금지, 단 한 번만 할당할 수 있는 변수 

: const는 반드시 상수만을 위해 사용하지는 않음

 

! gc

애플리케이션이 할당한 메모리 공간을 주기적으로 검사해서 더 이상 사용되지 않는 메모리를 해제하는 기능

4.7 식별자 네이밍 규칙

- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있음

- 단, 식별자는 특수문자를 제외한 언더스코어, 달러 기호로 시작해야 함

- 숫자로 시작 불가

- 예약어 사용 불가

 

- 다음과 같이 쉼표로 구분해 하나의 문에서 여러 개의 변수를 한 번에 선언할 수 있으나, 권장하지 않음

var person, $elem, _name, first_name, val1;

- 또한, 알파벳 외의 한글이나 일본어 식별자도 사용할 수 있으나, 바람직하지 않으므로 권장하지 않음

- JS는 대소문자를 구별함

- 변수 이름은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야 함

- 좋은 변수 이름은 코드의 가독성을 높임

 

! 네이밍 컨벤션

: JS에서는 일반적으로 변수나 함수의 이름에는 카멜 케이스를, 생성자 함수, 클래스 이름에는 파스칼 케이스 사용

// 카멜 케이스
var firstName;

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

// 파스칼 케이스
var FirstName;

// 헝가리언 케이스
var strFirstName // type + identifier

 

CH5. 표현식과 문

5.1 값

표현식이 평가되어 생성된 결과를 말함

- 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장됨

- 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있음

: 0100 0001 -> 숫자로 해석 65, 문자로 해석 'A'

5.2 리터럴

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

5.3 표현식

값으로 평가될 수 있는 문. 리터럴도 표현식임. 즉 값으로 평가될 수 있는 문은 모두 표현식 

// 리터럴 표현식
10
'Hello'

// 식별자 표현 (선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum = 10
sum !== 10

// 함수/메서드 호출 표현식 (선언이 이미 존재한다고 가정)
square()
person.getName()

5.4 문

: 프로그램을 구성하는 기본 단위이자 최소 실행 단위

- 문은 여러 토큰으로 구성

- 토큰?

  문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소

- 문은 명령문이라고도 부름. 즉, 문이 실행되면 명령이 실행되고 무슨 일인가가 일어나게 됨

// 변수 선언문
var x;

// 할당문
x = 5;

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

// 조건문
if (x > 1) { console.log(x); }
 
// 반복문
for (var i = 0; i < 2; i++) {console.log(i); }

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

세미콜론(;)은 문의 종료를 나타냄

- 문의 끝에 붙이는 세미콜론은 옵션

: 즉, 생략 가능

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

- 표현식인 문 : 값으로 평가될 수 있는 문

- 표현식이 아닌 문 : 값으로 평가될 수 없는 문

예 : 변수 선언문은 값으로 평가될 수 없음

 

표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법?

: 변수에 할당해 보는 것

표현식인 문은 값으로 평가되므로 변수에 할당할 수 있음

하지만 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생함

 

var foo = var x; // 표현식이 아닌 문은 값처럼 사용할 수 없다

// 변수 선언문은 표현식이 아닌 문
var x;

// 할당문은 그 자체가 표현식이지만 완전한 문이기도 함.
// 즉, 할당문은 표현식인 문
x = 100;

 

// 표현식인 문은 값처럼 사용할 수 있음
var foo = x = 100;
console.log(foo); // 100