JavaScript - Variables

1. 변수(Variable)

• 변수(Variable)
  • 하나의 값을 저장하기 위해 확보한 메모리 공간을 식별하기 위해 붙인 이름
  • 값의 위치를 가리키는 상징적인 이름
  • 변수는 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간 주소로 치환되어 실행됨
  • 변수는 하나의 값을 저장하기 위한 메커니즘임
    • 객체나 배열 같은 자료 구조를 사용하면 여러 개의 값을 그룹화하여 하나의 값처럼 사용 가능함

var userId = 1;
var userName = 'Lee';

var user = {id: 1, name: 'Lee' };
var users = [
  {id: 1, name: 'Lee' },
  {id: 2, name: 'Kim' }
];

• 변수 관련 용어
  • 변수 이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
  • 변수 값 : 변수에 저장된 값
  • 할당(assignment) : 변수에 값을 저장하는 것
  • 참조(reference) : 변수에 저장된 값을 읽어들이는 것

2. 식별자

• 식별자(identifier)
  • 어떤 값을 구별해서 식별할 수 있는 고유한 이름
  • 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺음
    • 식별자는 값이 아니라 메모리 주소를 기억함
    • 식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미임
  • 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부름
    • 예: 변수, 함수, 클래스 등의 이름
  • 식별자는 네이밍 규칙을 준수해야 함
  • 선언(declaration)에 의해 JavaScript 엔진에 식별자의 존재를 알림

변수 선언(Variable Declaration)

• 변수 선언(variable declaration)
  • 변수를 생성하는 것
  • 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
    • 변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 사용할 수 없도록 보호됨
  • 변수를 사용하려면 반드시 변수를 선언해야함
    • 변수를 선언할 때는 var, let, const 키워드를 사용함
      • ES6 이전에는 var 키워드만 존재함
      • ES6에서 var 키워드의 단점을 보완하기 위해 let, const 키워드를 도입함

Note:

• 키워드(keyword)
  • JavaScript 엔진이 수행할 동작을 규정한 일종의 명령어
  • JavaScript 엔진이 키워드를 만나면 자신이 수행해야 할 약속된 동작을 수행함
• var 키워드의 단점
  • 블록 레벨 스코프가 아니라 함수 레벨 스코프를 지원한다는 것
• ES6
  • ES5의 상위 집합(subset)
  • 기본적으로 하위 호환성을 유지하면서 ES5 기반 위에 새로운 기능을 추가함

• 변수 선언은 다음과 같은 2단계에 거쳐 수행함
  • 선언 단계: 변수 이름을 등록해서 JavaScript 엔진에 변수의 존재를 알림
    • 변수를 사용하려면 반드시 선언해야함
    • 선언하지 않은 식별자에 접근하면 ReferenceError가 발생함
    • ReferenceError: JavaScript 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러
  • 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화함
    • 초기화(initialization) : 변수가 선언된 이후 최초로 값을 할당하는 것
    • 초기화 단계를 거치지 않으면 확보된 메모리 공간에 이전에 다른 애플리케이션이 사용했던 값이 남아있을 수 있음

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

• 변수 선언의 실행 시점
  • 소스코드 실행을 위한 준비 단계인 소스코드의 평가 과정에서 JavaScript 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내서 먼저 실행함
  • 따라서 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있음
  • 변수 선언은 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행됨
    • 변수 호이스팅(variable hoisting) : 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 JavaScript 고유의 특징
    • 모든 선언문은 런타임 이전 단계에서 실행되므로, var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅됨

값의 할당

• 변수에 값을 할당할 때는 할당 연산자 '='를 사용함
• 할당 연산자는 우변의 값을 좌변의 변수에 할당함

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

• 변수 선언과 값의 할당을 하나의 문(statement)으로 단축 표현할 수 있음
  • 변수 선언과 값의 할당의 실행 시점이 다르므로. 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행함
  • 변수 선언은 런타임 이전(소스코드의 평가 과정)에 먼저 실행되지만, 값의 할당은 런타임(소스코드의 실행 과정)에 실행됨

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

값의 재할당

• 재할당
  • 이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당하는 것
  • var 키워드로 선언한 변수는 값을 재할당할 수 있음
    • var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에, 변수에 처음 값을 할당하는 것도 재할당임

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

• 상수(constant)
  • 단 한번만 할당할 수 있는 변수
  • 변수에 저장된 값을 변경할 수 없음

const foo = 10;
foo = 100; // Error

식별자 네이밍 규칙

• 식별자는 다음과 같은 네이밍 규칙을 준수해야 함
  • 식별자는 특수분자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함 가능함
  • 식별자는 숫자로 시작하는 것을 허용하지 않음
  • 예약어를 식별자로 사용 불가능함

예약어

• 식별자로 사용 가능하지만 strict mode에서는 사용 불가능한 예약어
  • implements, interface, let, package, private
  • protected, public, static, yield
• 식별자로 사용 불가능한 예약어
  • await, break, case, catch, class
  • const, continue, debugger, default, delete
  • do, else, enum, export, extends
  • false, finally, for, function, if
  • import, in, instanceof, new, null
  • return, super, swtich, this, throw
  • true, try, typeof, var, void, while, with

• 변수 이름도 식별자이므로 네이밍 규칙을 따라야 함
• 변수는 쉼표(,)로 구분해 하나의 문에서 여러 개를 한번에 선언 가능함

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

• ES6부터 식별자를 만들 때 유니코드 문자를 허용하므로 알파벳 외의 한글이나 일본어 식별자도 사용 가능함

var 이름

• JavaScript는 대소문자를 구별하므로 다음 변수는 각각 별개의 변수임

var firstname;
var firstName;
var FIRSTNAME;

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

var x = 3 // Bad
var score = 100; // Good

• 네이밍 컨벤션(naming convention) : 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 구분하기 위해 규정한 명명 규칙
  • 카멜 케이스(camelCase)
  • 스네이크 케이스(snake_case)
  • 파스칼 케이스(PascalCase)
  • 헝가리언 케이스(typeHungarianCase)

// 카멜 케이스
var firstName;

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

// 파스칼 케이스
var FirstName;

// 헝가리언 케이스
var strFirstName;

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