자바스크립트의 변수란?
변수(Variable)는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다. 또한 변수는 고정된 타입이 없으며 같은 변수에 여러 타입의 값을 자유롭게 할당할 수 있다.
변수 생성(선언) 방법
자바스크립트에서는 var 과 let 키워드를 사용해 변수를 생성한다.
var 는 지역 및 전역 변수를 선언하는데 모두 사용될 수 있다.
let 은 블록 범위 지역 변수를 선언하는데 사용될 수 있다.
먼저 아래 test라는 이름을 가진 변수를 생성(선언)한다.
let test;생성된 변수에 할당 연산자를 사용해 데이터를 저장해본다.
let test;
test = 'hello'; // 문자열 데이터를 저장문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있다.
let test
test = 'hello';
alert(test); // 변수에 저장된 값을 보여준다.아래와 같이 변수 선언과 값 할당을 한 줄로 작성 가능하다.
let test = 'hello'; // 변수 정의 후 값을 할당
alert(test); // hello변수 안에 값은 여러번 변경 가능하다.
let test = 'hello';
test = 'hello';
test = 'bye'; // 값이 변경된다.
alert(message); // 변경된 bye가 나오고 이전 hello는 제거된다.변수 두개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수 있다.
let Hello = 'Hello world';
let text;
// Hello의 문자열 'Hello world' 값을 text에 복사한다.
text = Hello;
alert(Hello); // Hello world
alert(text); // Hello world변수는 한번만 선언해야한다, 같은 변수를 중복해서 선언하면 에러가 발생한다.
let Hi = 'Hi!';
let Hi = 'Hi!'; // SyntaxError: 'Hi' has already been declared변수의 명명 규칙
변수명에는 오직 문자와 숫자, 그리고 기호 $ 와 _ (underscore) 만 들어갈 수 있다.
첫 글자는 숫자가 될 수 없다.
번외
여러 단어를 조합하여 변수명을 만들때는 카멜 표기법(camelCase)가 흔히 사용된다.
카멜 표기법은 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다.
ex) goodMoring
모든 언어를 변수명에 사용할 수 있으나 영어를 변수명에 사용하는 것이 국제적인 관습이므로 변수명은 영어로 사용해서 만드는게 권장된다.
변수의 범위
어떤 함수의 바깥에서 변수를 선언하면 현재 문서의 다른 코드에 해당 변수를 사용할 수 있다.
이를 전역 변수라고 부른다.
if (true) {
var x = 5;
}
console.log(x); // 5
// ECMAScript6 이전에는 Block문 범위가 없었다. 따라서 x의 범위는 if문 블록이 아니라 x가 선언된 함수(나 전역 문맥)이기에 5라는 로그를 남긴다.하지만 함수 내부에서 변수를 선언하면, 오직 그 함수내에서만 사용할 수 있고 이를 지역 변수라고 부른다.
if (true) {
let x = 5;
console.log(x); // 5
}자바스크립트의 상수란?
상수란 변화하지 않는 변수를 선언할 때 사용되며 let 대신 const를 사용한다.
const myBirthday = '13.09.1994';이렇게 const 로 선언한 변수를 상수(constant)라고 부른다. 상수는 값을 변경할 수 없고 변경하려하면 에러가 발생한다.
const myBirthday = '13.09.1994';
myBirthday = '01.01.2001'; // error, can't reassign the 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이렇게 대문자 상수를 만들면 다음과 같은 장점이 있다.
COLOR_ORANGE는 "#FF7F00"보다 기억하기가 훨씬 쉽다.
COLOR_ORANGE를 사용하면 "#FF7F00"를 사용하는 것보다 오타를 낼 확률이 낮다.
COLOR_ORANGE가 #FF7F00보다 훨씬 유의미하므로, 코드 가독성이 증가한다.
참고한 곳 :
https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Variables
