JavaScript [변수와 상수]

변수와 상수

대부분의 자바스크립트는 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작합니다.

1. 배달 어플리케이션 - 판매 중인 음식 정보, 고객의 정보 등
2. 온라인 쇼핑몰 - 판매 중인 상품 정보, 장바구니 정보, 등

변수는 이러한 정보를 저장하는 용도로 사용됩니다.

 

1. 변수

변수는 데이터를 저장할 때 쓰이는 '이름이 붙는 저장소'입니다. 주로 어떠한 정보를 저장할 때 변수를 사용합니다.

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

다음 예시는 'message'라는 이름을 가진 변수를 생성(선언)합니다.

let message;

 

그리고 할당 연산자인 =를 사용해 변수 안에 데이터를 저장시킵니다.

let message;
message = 'Hello'; // 문자열을 저장합니다.

 

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

let message;
message = 'Hello';

alert(message); // 변수에 저장된 값인 Hello가 출력됩니다.

 

또는 변수 선언과 값 할당을 한 줄에 작성할 수 있습니다.

let message = 'hello' // 한 줄에 변수 정의와 할당이 가능
alert(message); // hello!

 

한 줄에 여러 변수를 선언하는 것도 가능합니다. 이렇게 작성하면 코드가 짧아지나 가독성을 해치기 때문에 한 줄에 하나의 변수를 작성하는 것이 좋습니다.

let name = 'jake', let age= '23', let food = 'cake'; // 가독성이 떨어진다.

// 읽기 편하다.
let name = 'jake'
let age= '23'
let food = 'cake'

//또는 이렇게 작성하는 사람들도 있습니다.
let name = 'jake',
	age= '23',
	food = 'cake';

오래된 스크립트를 보면 var라는 키워드를 발견할 수 있습니다. var과 let은 동일하게 동작하지만 var은 오래된 방식입니다. 이 둘의 차이점에 대해서는 나중에 자세히 다루도록 하겠습니다.

그리고 할당된 변수에 재할당을 할 수 있습니다. 그러나 같은 변수를 여러 번 선언하면 에러가 발생합니다.

let hi = 'Hello';
 hi = 'world';
 alert(Hello;) // world
 
 // 같은 변수를 여러 번 선언하면 에러가 발생합니다.
 let message = 'error'
 let message = 'really?'

그래서 같은 이름의 변수의 값을 바꾸려면 선언이 아닌 할당을 해야 합니다.

 

 

 

2. 변수 명명 규칙

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

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있습니다.

2. 첫 글자는 숫자가 될 수 없습니다.

다음은 예시입니다.

let userName;
let test123;

 

여러 단어를 조합하여 변수명을 작성할 땐 카멜 표기법(camelCase)가 흔히 사용됩니다. 카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성합니다.

//카멜 표기법
let className;
let myCodeList;

// 잘못된 변수명 예시
let 1a; // 숫자로 시작해서는 안됩니다.
let my-name; // -는 사용하면 안됩니다.

// $, _ 를 이용해 변수를 선언할 수 있습니다.
let $ = 1;
let _ = 2;

// 알파벳이 같더라도 대,소문자에 따라 구분됩니다.
let code;
let CODE; // 이 둘은 서로 다른 변수입니다.

 

예약어 목록에 있는 단어는 변수명으로 사용할 수 없습니다. 이 단어들은 자바스크립트 내부에서 이미 사용중이기 때문입니다. ex) let, class, return, function

let let =5; // let을 변수명으로 사용할 수 없다.
let class //class을 변수명으로 사용할 수 없다.

 

 

 

3. 상수

변화하지 않는 변수를 선언할 때, let 대신 const를 사용합니다.

const myName = '홍길동';

const로 선언한 변수를 '상수'라고 합니다. 상수는 재할당할 수 없음으로 상수를 변경하려고 하면 에러가 발생합니다.

const를 사용하는 이유는 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위함입니다.

 

- Plus 대문자 상수

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

이런 상수는 대문자와 밑줄로 구성된 이름으로 명명합니다. ex) const COLOR_RED = '#F00';

대문자로 상수를 만들어서 사용하면 다음과 같은 장점이 있습니다.

• #F00보다는 COLOR_RED가 더 기억하기 쉽다.
• COLOR_RED가 #F00보다 오타가 덜 발생합니다.
• #F00보다 COLOR_RED가 더 가독성이 좋습니다.

이런 대문자 상수는 '하드한 코딩값'의 별칭을 만들 때 사용하면 좋습니다.

예시

const BIRTHDAY = '21.02.23'
const AGE = someCode(BIRTHDAY)

 

 

위 코드는 BIRTHDAY에 somCode함수를 사용해 AGE를 구하는 코드이다. 여기서 BIRTHDAY와 AGE는 대문자 상수를 옳게 사용한걸까?

답은 BIRTHDAY는 불변하기 때문에 맞지만 AGE는 해가 지날 때마다 바뀌므로 덜 상수스럽기 때문에 대문자 상수로는 적합하지 않아 age로 써야합니다.

 

4. 변수명 작성하기

변수명은 간결하고 명확해야 합니다. 변수가 담고있는 것이 무엇인지 잘 설명되어야 합니다. 그래서 변수명을 작성하는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나입니다.

그래서 변수 명명 시 참고하는 규칙들이 있습니다.

• className, textColor처럼 사람이 읽을 수 있는 이름을 사용하세요
• 최대한 서술적이고 간결하게 명명해주세요. data, value는 나쁜 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 명확한 값이 아닌 이상 customerPhoneData, assetValue와 같이 나타내주세요
• 줄임말, 짧은 이름은 피해주세요
• 자신이 소속된 팀의 규칙을 따라주세요. 모두가 통일하기로 했다면 그것에 따라 작성해야 합니다.

 

 

 

* 요약 *

1. 변수란 데이터를 저장할 때 쓰이는 '이름이 붙는 저장소'입니다. 주로 어떠한 정보를 저장할 때 변수를 사용합니다.

2. var, let, const를 사용해 변수를 선언하여 데이터를 저장할 수 있습니다.

• let - 일반적으로 사용하는 변수 선언 키워드입니다.
• var - 과거에 사용되었던 변수 선언 키워드입니다. 이제는 사용하지 않습니다.
• const - let처럼 변수를 선언하는 키워드입니다. 차이는 변수의 값을 변경할 수 없습니다.

3. 변수를 명명할 때 기호 중 $과 _만 사용할 수 있고 예약어 목록(let, function 등)을 사용할 수 없습니다.

4. 변수 명명시 카멜 표기법 또는 소속된 팀의 규칙에 따라 작성합니다