변수와 상수

대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다. 변수는 이러한 정보를 저장하는 용도로 사용된다.

온라인 쇼핑몰 – 판매 중인 상품이나 장바구니 등의 정보
채팅 애플리케이션 – 사용자 정보, 메시지 등의 정보

✔️ 변수

변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 다.

let : 변수를 선언 하는 키워드

= : 할당 연산자. 변수 안에 데이터를 저장 한다.

let message; message = 'Hello'; // 문자열을 저장한다. 
alert(message); // 변수에 저장된 값을 띄워 보여준다.

let message = 'Hello!'; // 변수를 한 줄에 정의하고 값을 할당 할 수 있다. 
alert(message); // Hello!

한 줄에 여러 변수를 선언하는 것도 가능하지만 가독성을 위해 한 줄에 하나의 변수를 작성하는 것을 권장한다.

let user = 'John', age = 25, message = 'Hello'; // 한 줄에 여러 변수를 선언

다음과 같은 방법으로 정의 할 수도 있다.

let user = 'John', age = 25, message = 'Hello';

let user = 'John' , age = 25 , message = 'Hello';

ℹ️ let 대신 var

만들어진 지 오래된 스크립트에서 let 대신 var라는 '오래된' 방식의 키워드를 발견하는 경우가 있다.

var는 let과 거의 동일하게 동작하며 변수를 선언하는데 쓰인다.

var message = 'Hello';

׃ 변수의 성질

변수 message 에 "Hello!" 라는 값을 저장하면 아래와 같다.

값이 변경되면 이전 데이터는 변수에서 제거된다.

let message; message = 'Hello!'; 

message = 'World!'; // 값이 변경되었다. 

alert(message); // World!

변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수도 있다.

let Hello = 'Hello world!'; 

let message;

// Hello의 'Hello world' 값을 message에 복사한다. 
message = Hello;*// 이제 두 변수는 같은 데이터를 가지게 된다. 
alert(Hello); // Hello world! 
alert(message); // Hello world!

⚠️ 변수를 두 번 선언하면 에러가 발생한다.

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

ℹ️ 함수형 언어

함수형(functional) 프로그래밍 언어는 변숫값 변경을 금지한다. 아래 언어는 변수에 값이 저장되면, 그 값을 영원히 유지한다. 다른 값을 저장하고 싶다면 새 변수를 선언 해야만 한다. 변수를 재사용 할 수 없다. 병렬 계산(parallel computation)은 이러한 제약이 장점으로 작용한다.

스칼라(Scala)와 얼랭(Erlang): 대표적인 함수형 언어

let message = "This"; 

// 'let'을 반복하면 에러가 발생한다. 
let message = "That"; // SyntaxError: 'message' has already been declared

׃ 변수 명명 규칙

자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있다.

변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
첫 글자는 숫자가 될 수 없다.
대·소문자는 구별 한다.
비 라틴계 언어도 사용할 수 있으나 권장하지 않다.

카멜 표기법(camelCase): 여러단어 중 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다.

⚠️ 예약어(reserved name) 목록에 있는 단어는 자바스크립트 내부에서 이미 사용 중이기 때문에 변수명으로 사용할 수 없다.

⚠️ use strict 없이 할당하기

use strict를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 let없이 단순하게 값을 할당 해 변수를 생성하는 것이 가능하다.

"use strict"; 

num = 5; // error: num is not defined 엄격모드 에러

✔️ 상수

상수는 재할당 할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다. 변숫값이 절대 변경되지 않을 것이라 확신하면 다른 개발자들에게 상수임을 알리기 위해 const를 사용해 변수를 선언하도록 한다.

const: 변화하지 않는 변수를 선언하는 키워드

׃ 대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이다. 이런 상수는 대문자와 밑줄로 구성된 이름으로 명명한다.

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

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었다. 
let color = COLOR_ORANGE; 
alert(color); // #FF7F00

COLOR_ORANGE는 #FF7F00보다 기억하기가 훨씬 쉽다.
COLOR_ORANGE를 사용하면 #FF7F00를 사용하는 것보다 오타를 낼 확률이 낮다.
COLOR_ORANGE가 #FF7F00보다 훨씬 유의미하므로, 코드 가독성이 증가한다.

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

const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;

pageLoadTime 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수이다. 대문자 상수는 ‘하드 코딩한’ 값의 별칭을 만들 때 사용하면 된다.

✔️ 바람직한 변수명

변수명은 간결하고, 명확해야 한다.

userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용한다.
무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피한다.
최대한 서술적이고 간결하게 명명한다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용한다.
자신만의 규칙이나 소속된 팀의 규칙을 따른다.

ℹ️ 재사용 아니면 새로 만들기?

변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있지만, 디버깅에 열 배 더 많은 시간을 쏟아야 한다.

모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해준다. 값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있다.

저작자표시 비영리 변경금지

[Core JS] 변수와 상수