변수(js)

04장 변수

변수란?

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체
• 그 메모리 공간을 식별하기 위해 붙인 이름
• 값의 위치를 가리키는 상징적인 이름

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

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

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

var result = 10 + 20; 로 예를 들어보겠다.

10, 20은 각각 어떠한 메모리를 가리키고있다.

여기서 10 + 20 의 결과값인 30도 메모리를 할당받고 우리가 선언한 변수 result는 그 30의 메모리를 가리키고 있는 것이다.

- result : 변수 이름(변수명)
- 30 : 변수 값
- 변수에 값을 저장하는 것 : 할당(대입, 저장)
- 변수에 저장된 값을 읽는 것 : 참조

식별자

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

변수 선언

• 변수는 사용하려면 반드시 선언이 필요하다.
• javascript에서는 var, let, const 키워드가 존재한다.
• var 키워드는 여러 단점이 있으므로 주의해야한다.

var score; // 변수 선언(변수 선언문)

위처럼 선언하면 javascript는 undefined라는 값으로 암묵적으로 할당 후 초기화한다.

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

console.log(score)
var score;

위 코드를 실행했을 때 우리는 참조 에러가 날 것이라고 생각할 수 있다. 하지만 javascript에서는 위 코드를 실행했을 때 undefined가 출력 되는 것을 볼 수 있다.

이유는 javascript는 변수 선언이 런타임(소스코드가 한 줄씩 순차적으로 실행되는 시점)이 아닌 그 이전 단계에서 먼저 실행되기 때문이다.

• 변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유 특징 (var, let, const, function, function*, class 키워드는 모두 해당함)

값의 할당

var score;
socred = 80;

var score = 80;

같아 보이지만 score의 변수 생성이 런타임에 생성 되는 경우가 아래, 런타임 이전에 생성 되는게 위 임을 주의하자.

console.log(score); // undefined

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

console.log(score); // 80

위 코드는 변수 선언 > console.log(score) : unefined > score = 80 > console.log(score) : 80 순으로 이루어진다.

undefined 의 메모리에 80이 할당됨.

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

console.log(score); // 80

위 코드는 console.log(score) : undefined > score = 80 > console.log(score)가 출력되게 된다.

undefined와 80은 서로 다른 메모리에 할당됨.

console.log(score); // undefined

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

console.log(score); // ??

??은 50이 출력됨을 쉽게 알 수 있다.

javascript를 실행하면 일어나는 순서대로 바꾼 것이 아래 코드이다.

var score;
console.log(score); // undefined

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

console.log(score); // 50

값의 재할당

var score = 80;
score = 90;

var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화 되기 때문에 80도 재할당이다.

• 값을 재할당할 수 없다면 변수가 아닌 상수이다.
• 여기서 undefined, 80의 사용하지 않는 메모리는 javascript가 내장하고 있는 가비지 콜렉터를 통해서 해제한다.

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, _ , $를 포함할 수 있다.
• 식별자는 숫자로 시작할 수 없다.
• 예약어는 식별자로 사용할 수 없다.
• 변수는 쉼표(,)로 구분해 여러 개를 한번에 선언할 수 있지만 가독성이 나빠지므로 권장하지 않는다.

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

• ES5부터 식별자를 만들 때 유니코드 문자, 한글, 일본어 식별자도 허용하지만 권장하지 않는다.

var 이름, なまえ;

• 다음 식별자는 명명 규칙에 위배된다.

var first-name; // SyntaxError: Unexpected token –
var 1st;        // SyntaxError: Invalid or unexpected token
var this;       // SyntaxError: Unexpected token this

• javascript는 식별자의 대소문자를 구별할 수 있다.(아래 3개는 모두 다른 변수)

var firstname;
var firstName;
var FIRSTNAME;

• 변수 이름을 변수 존재 목적에 맞게 표현해야 가독성이 높아진다.

var x = 3;       // NG. x 변수가 의미하는 바를 알 수 없다.
var score = 100; // OK. score 변수는 점수를 의미한다.

• 변수에 주석이 필요하면 변수 존재 목적을 명확히 하지 못한 것이다.

// 경과 시간. 단위는 날짜다
var d;                 // NG

var elapsedTimeInDays; // OK

• 자바스크립트는 변수나 함수의 이름에는 카멜 케이스를 사용하고, 생성자 함수, 클래스의 이름엔 파스칼 케이스를 사용한다.

  // 카멜 케이스 (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 옵저버블
```

 

참고

모던자바스크립트 Deep Dive