드림코딩 자바스크립트 프론트엔드 개발자 입문편 (JavaScript ES5+)을 공부하며 정리한 학습노트 입니다.
1.변수(Variable)란?
변수란, 숫자 또는 문자열과 같은 값의 컨테이너이다. 어플리케이션을 실행하면 어플리케이션마다 실행할 수 있는 메모리가 할당되어지게 되는데, 이 메모리는 박스에 비유할 수 있다. 예를들면 name 이라는 변수를 생성할 때 name은 박스를 가르키는 이름표가 되고, 그 박스에 데이터를 저장할 수 있게 되는것이다.
2.변수의 기본문법
변수를 사용하게 될때 3가지의 단계를 거치게된다.
- 생성(creat)
- 초기화 (initialize)
- 사용 (use)
아래의 코드를 통해 실제로 변수를 사용해보자!
let name;
name = "hiko";
console.log(name);결과
여기서 name이라는 변수를 생성했으며, "hiko"라는 문자열 데이터로 변수를 초기화하고 해당 변수를 콘솔창에 찍어내었다. (사용)
그러나 일반적으로 생성과 초기화를 동시에 하는 경우가 많다. 물론 콘솔창의 결과도 같다.
let name = "hiko";
console.log(name);3.전역변수(Global Variable)와 지역변수(Local Variable)
변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있다.
- 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있다.
- 지역변수는 함수 내부에서 선언된 변수로, 함수 외부에서는 접근할 수 없다.
let globalName = "golobal name";
{
let name = "hiko";
console.log(name);
console.log(globalName);
}
console.log(name);
console.log(globalName);결과
전역변수는 어플리케이션이 실행되는 순간 끝날 때 까지 항상 메모리에 탑재되어 있기 때문에 최소한으로 사용하는 것이 권장되어진다.
4.var , let
변수를 선언할 때 var, let, const를 사용할 수 있는데 일반적으로 var는 선호되지 않는다. 이것은 var hoisting 라는 특성 때문이다.
호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 가장 앞으로 끌어온 것처럼 동작하는 특성을 말한다.
console.log(useVar); // undefined
var useVar;
console.log(useLet); // Error: Uncaught ReferenceError: useLet is not defined
let useLet;위의 코드 처럼 var 로 선언된 변수와는 달리 let으로 선언된 변수는 초기화 단계 전에 사용하게 되면 Error: Uncaught ReferenceError: useLet is not defined 오류가 나타나게 된다.
var로 선언한 변수의 특징
- 블록 스코프가 아닌 함수 수준 스코프를 갖습니다.
- var 선언은 함수가 시작되는 시점(전역 공간에선 스크립트가 시작되는 시점)에서 처리된다.
5.const
const와 let의 차이점은 immutable의 여부이다. const는 한 번 선언하면 변수 재선언, 변수 재할당 모두 불가능한 immutable data type이다.
const a = 100;
a = 99;
console.log(a); //Uncaught TypeError: Assignment to constant variable.위처럼 const를 이용해 초기화된 변수는 재할당이 불가능하다는 에러가 콘솔창에 나타난다.
const의 장점은 보안성과 개발의 안정성에 있는데, 외부에서 변수를 바꾸는 위험을 방지하고 의도치 않게 변수를 재할당하는 위험을 방지한다.
6.var let const
| var | let | const | |
|---|---|---|---|
| 재선언 | O | X | X |
| 재할당 | O | O | X |
어떤 변수 선언방식을 써야하는가?
- 기본적으로
const를 사용한다 - 재할당이 필요한 경우에 한정해
let을 사용한다
