이번 포스팅에서는 자바스크립트의 변수와 상수에 대해 알아볼 예정이다.
💡 변수
let
변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’이다. 자바스크립트에서는 let 키워드를 사용하여 변수를 생성(선언)한다.
아래의 statement는 'season'이라는 이름의 변수를 생성하고, 'spring'이라는 값을 할당하였다.
let season;
season = 'spring'; // 문자열 저장
alert(season); // spring변수 선언과 값 할당을 한 줄에 작성할 수도 있다.
let season = 'spring';
// 한 줄에 여러 변수도 가능
let season = 'spring', month = 4, message = 'The flowers are pretty'; let 키워드를 사용하면, 원하는 만큼 값을 변경할 수 있다. 혹은 변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수도 있다.
// 값 변경
let season;
season = 'spring';
season = 'summer';
alert(season); // summer
// 값 복사
let message;
message = season;
alert(season); // summer
alert(message); // summer🚫 변수를 두 번 선언하면 에러 발생
let season = 'spring'; let season = 'summer';이렇게 같은 변수를 여러 번 선언하면 에러가 발생한다. 그래서 변수는 딱 한 번만 선언하고, 그 변수를 참조할 때는 let없이 변수명만 사용하여 참조해야 한다.
var
만들어진 지 오래된 스크립트에서는 let 대신 var라는 키워드를 발견하는 경우도 있다.
var season;그 때에 var를 let으로 바꾸려면, var에 대해 잘 알고 있어야 한다.
1) var는 블록 스코프가 없다.
var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능하다.
if (ture) {
var test = ture;
}
for (var i = 0; i < 10; i++) {
//
}
alert(test);
alert(i);위의 statement에서 if문과 for문이 종료되어도, var는 코드 블록을 무시하기 때문에 test와 i가 전역변수가 되어 접근 가능하다.
function hello() {
if (true) {
var phrase = "hi";
}
alert(phrase); // hi
}
hello();
alert(phrase); // Error 발생다만, 코드 블록이 함수 안에 있다면, var는 함수 레벨 변수가 된다.
2) var 선언은 함수가 시작되는 시점에서 처리된다.
var 선언은 함수가 시작될 때 처리된다. 전역에서 선언한 변수라면 스크립트가 시작될 때 처리!!
함수 본문 내에서 var로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의된다.(단, 변수가 중첩 함수 내에서 정의되지 않아야 이 규칙이 적용)
// 1번
function hello() {
phrase = "hi";
alert(phrase);
var phrase;
}
hello();
// 2번
function hello() {
var phrase;
phrase = "hi";
alert(phrase);
}
hello();
위의 두 statement은 동일하게 작동된다. 2번의 'var phrase'가 맨 첫 줄에 있든 1번에도 선언이 위로 올라간다.
이렇게 변수가 끌어올려 지는 현상을 '호이스팅(hoisting)'이라고 부른다. var로 선언한 모든 변수는 함수의 최상위로 ‘끌어 올려지기(hoisted)’ 때문이다.
But 선언은 호이스팅 되지만, 할당은 호이스팅 되지 않는다.
function hello() {
alert(phrase);
var phrase = "hi";
}
hello();위의 statement에서
- 변수 선언(var)
- 변수에 값 할당(=)
두 가지 일이 일어난다. 변수 선언은 함수 실행이 시작될 때 처리되지만(호이스팅) 할당은 호이스팅 되지 않기 때문에 할당 관련 코드에서 처리된다. 즉 아래 코드처럼 실행된다.
function hello() {
var phrase
alert(phrase); // undefined
phrase = "hi";
}
hello();
변수 명명 규칙
- 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
- 첫 글자는 숫자가 될 수 없다.
- 대/소문자를 구별한다.
- 예약어 목록에 있는 단어는 변수명으로 사용할 수 없다. ex) let, class, return, function
여러 단어를 조합하여 변수를 만들 때는 카멜 표기법(camelCase)이 흔히 사용된다. 카멜 표기법은 단어를 차례로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성하는 것을 말한다. ex) myVeryLongName
💡 상수
const
변화하지 않는 변수를 선언할 땐, let 대신 const를 사용한다.
이렇게 const로 선언한 변수를 '상수(constant)'라고 부른다. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.
const myBirthday = '99.07.28';변수값이 절대 변경되지 않을 것이라 확신하면, const를 사용하여 다른 사람들에게도 이 변수를 상수라는 것을 알린다.
대문자 상수
기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이다. 이런 상수는 대문자와 밑줄로 구성된 이름으로 명명한다.
ex) const COLOR_RED = "#F00";
대문자 상수를 사용했을 때 장점
- COLOR_ORANGE는 "#FF7F00"보다 기억하기 쉽고, 오타낼 확률이 적다.
- COLOR_ORANGE가 "#FF7F00"보다 더 유의미하므로, 코드 가독성이 증가한다.
❓❗ 언제 대문자 상수를 사용해야 될까?
'상수’는 변수의 값이 절대 변하지 않음을 의미하는데, 상수를 두 가지로 나누면,,,
1) 오렌지색 16진수 코드가 #FF7F00인 것처럼, 실행되기 전에 이미 그 값을 알고 있는 상수
2) 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수 ex) const pageLoadTime = / 웹페이지를 로드하는데 걸린 시간 /;
=> 2번 같은 경우는 값을 페이지가 로드되기 전에 알 수 없기 때문에 일반적인 방식으로 변수명을 지음.
고로 대문자 상수는 '하드 코딩한' 값의 별칭을 만들 때 사용!!
변수 명명 시 참고
- userName이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용한다.
- 최대한 서술적이고 간결하게 명명한다. data, value 놉!
- 줄임말이나 a,b,c와 같은 짧은 이름은 피한다.
💡 요약
var : 함수 스코프, 재선언과 재할당 가능
let : 블록 스코프, 재선언 불가능, 재할당 가능
const : 블록 스코프, 재선언과 재할당 불가능
참고자료
