[Core JS] 변수와 상수

변수와 상수

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

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

 

✔️ 변수

변수(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

 

׃ 변수 명명 규칙

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

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

카멜 표기법(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)와 브라우저는 코드 최적화를 잘해준다. 값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있다.