surf core js : 변수와 상수

📂 변수

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

자바스크립트에선 let 키워드를 사용해 변수를 생성한다.

물론 var가 있지만 추후에 이 차이에 대해서 다룰 예정이다.

아래 문(statement)은 'message’라는 이름을 가진 변수를 생성(선언)한다.

let message;  //변수 선언

message = 'Hello'; // 문자열을 저장

문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 된다.

아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있다.

let 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 대신 const를 사용한다.

const myBirthday = '18.04.1982';

이렇게 const로 선언한 변수를 '상수(constant)'라고 부른다.

상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.

대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이다.

이런 상수는 대문자와 밑줄로 구성된 이름으로 명명한다.

웹에서 사용하는 색상 표기법인 16진수 컬러 코드에 대한 상수는 아래와 같이 작성할 수 있다.

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

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

그렇다면 언제 일반적인 방식으로 상수를 명명하고, 언제 대문자를 사용해서 명명해야 하는가?

'상수’는 변수의 값이 절대 변하지 않음을 의미한다.

그중에는 (빨간색을 나타내는 16진수 값처럼) 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수도 있다.

예시로

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

pageLoadTime의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 지은 것이다. 하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수이다.

정리하자면, 대문자 상수는 ‘하드 코딩한’ 값의 별칭을 만들 때 사용하면 된다.

❔ 변수라는 것을 알고 있기만 하면 되나?

변수는 정보를 담고 있는 공간이다. 그렇다면 우리는 이 정보를 무엇인지를 명확하게 나타내고 올바르게 사용될 수 있도록 변수명을 작성할 필요가 있다.

변수의 이름을 짓는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나이다.

Reference

• javascript.info