[JavaScript] The Modern JavaScript Tutorial - (2-4) Variables

변수

변수(variables)는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다. 자바스크립트에서는 let 키워드를 사용하여 변수를 생성한다.

let message;
message = 'Hello!'; // 문자열을 저장한다.

alert(message); // 변수에 저장된 값을 보여 준다.

let message_one_line = 'Hello!';    // 선언과 함께 값을 할당할 수 있다.

let user = 'John', age = 25, says = 'Hello';    // 한 줄에도 작성 가능하다.

// 그러나 가독성을 위해 개행을 하는 편이 좋다.
let user2 = 'Nabin';
let age2 = 25;
let says2 = 'Hello!!';

// 이런 방식도 가능하다.
let hello = 'Hello',
    world = 'World';

 

let 대신 var

만들어진 지 오래된 스크립트에서 var라는 키워드를 발견하는 경우가 있다. var는 let과 거의 동일하게 동작한다. 다만 var는 오래된 방식이다.

let name;

name = 'Hello!';
name = 'World!';    // 값이 변경된다.

name = message; // message의 값을 name에 복사한다.

alert(name);
alert(message);

같은 변수를 여러 번 선언하면 에러가 발생함에 유의한다. 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용하여 참조해야 한다.

 

변수 명명 규칙

1. 변수명에는 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.

카멜 표기법(camelCase)이 흔히 사용된다. myVeryLongName.

대소문자를 구분함에 유의한다.

 

상수

변하지 않는 변수를 선언할 때 let 대신 const를 사용하며, 이러한 변수를 상수(constant)라고 부른다. 상수는 재할당할 수 없기 때문에 상수를 변경하려고 하면 에러가 발생한다.

const myBirthday = '11.06';
myBirthday = '1.1';   // error!

 

대문자 상수

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

let color = COLOR_ORANGE;

'상수'는 변수의 값이 절대 변하지 않음을 의미한다. 그중에는 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임에서 계산되지만 최초 할당 이후에 값이 변하지 않는 상수도 존재한다.

대체로 대문자 상수는 하드코딩한 값의 별칭을 만들 때 사용하면 된다.

 

바람직한 변수명

변수명은 간결하고 명확해야 한다. 변수가 무얼 담고 있는지 잘 설명할 수 있어야 한다.

• userName이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용한다.
• 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 이름은 피한다.
• 최대한 서술적이고 간결하게 명명한다. data와 value는 나쁜 이름의 예시이다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이러한 변수명을 사용하자.
• 자신만의 규칙이나 소속된 팀의 규칙을 따른다. 사이트 방문객을 user라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor가 아닌 currentUser로 지어야 한다.

 

과제

변수 가지고 놀기

1. admin과 name이라는 변수를 선언한다.
2. name에 값으로 John을 할당한다.
3. name의 값을 admin에 복사한다.
4. admin의 값을 alert창에 띄운다. "John"이 출력되어야 한다.

'use strict'
let admin;
let name = 'John';

admin = name;

alert(admin);

 

올바른 이름 선택하기

1. 현재 우리가 살고 있는 행성(planet)의 이름을 값으로 가진 변수를 만든다. 이때 변수 이름은?
2. 웹 사이트를 개발 중이라고 가정하고, 현재 접속 중인 사용자(user)의 이름(name)을 저장하는 변수를 만들어 보자. 이때 변수 이름은?

'use strict'
let ourPlanetName = "Earth";

let currentUserName = "Knabin";

 

대문자 상수 올바르게 사용하기

'use strict'
const birthday = '1997.11.06';
const age = someCode(birthday);

const BIRTHDAY = '1997.11.06';  // 컴파일 타임에 상수이기 때문에 대문자 상수로 적합
const age = someCode(BIRTHDAY); // 런타임 상수이기 때문에 대문자 X

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial