월요일 화이자 2차 접종하였고, 새벽까지 괜찮아 다음날에도 지장없을 줄 알았지만, 일어나보니 감기몸살 걸린거 마냥 온몸이 쑤셨다. 강의도 집중하지 못하였지만, 힘겹게 다 들었다. 이제야 컨디션이 괜찮아져서 늦었지만 복습하면서 글을 남긴다.
Javascript란?
이미지 슬라이드 효과, 파업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어. 백엔드 개발에서도 쓰인다.
자바스크립트의 변수
Javascript에서 변수 선언하는 방식은 3가지 var/let/const가 있다.
1. 중복선언 가능 여부
2. 재할당 가능 여부
3. 변수 스코프 유효범위
4. 변수 호이스팅 방식
5. 전역객체 프로퍼티 여부
1.중복선언
// 첫번째 변수 선언+초기화
var a = 10;
console.log(a); // 10
// 두번째 변수 선언+초기화
var a = 20; console.log(a); // 20
// 세번째 변수 선언(초기화X)
var a;
console.log(a); // 20var로 선언한 변수는 중복해서 선언이 가능하다. 마지막 할당된 값이 변수에 저장된다. 하지만 const, let은 중복 선언이 불가능하다. 아래 예시를 보자.
var a = 10;
a = 20;
console.log(a); // 20 yntaxError: Identifier 'a' has already been declared
let b = 111;
b = 222;
console.log(b); // 222 SyntaxError: Identifier 'b' has already been declared코드에서 보는 것처럼 이미 선언한 변수를 다시 선언할 경우, 에러가 발생한다.
var에 비해서 코드의 안정성을 높여줄 수 있는 방식이다.
2.재할당
var a = 10;
a = 20;
console.log(a); // 20
let b = 111;
b = 222;
console.log(b); // 222var와 let은 값의 재할당이 '가능'한 변수다.
const c = 111;
c = 222; // TypeError: Assignment to constant variable.const는 constant(상수)를 뜻하며, 처음에 선언 및 초기화하고 나면 다른 값을 재할당 할 수 없다.
3.스코프
스코프란 유효한 참조 범위를 말한다. 예를 들어, 함수 내부에서 선언된 변수는 함수 내부에서만 참조가 가능. 이 경우 변수의 스코프는 함수 내부로 한정 된다.
자바스크립트는 var로 선언한 변수의 스코프와 let, const로 선언한 변수의 스코프가 다르다.
var은 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주한다.
function hello(){
var a = 10;
console.log(a);
}
hello(); // 10
console.log(a); //ReferenceError: a is not definedhello 함수 내부에서 선언된 a변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조시 에러가 발생한다.
하지만, 함수를 제외한 영역에서 var로 선언한 변수는 '전역변수'로 취급된다.
if(true) {
var a = 10;
console.log(a); // 10
}
console.log(a); // 10자바스크립트에서는 if문, for문, while문, try/catch문 등의 코드 블럭{...} 내부에서 var로 선언된 변수를 전역 변수로 간주한다.
그래서 블럭 외부에서도 어디에서나 참조할 수 있다.
let, const는 함수 내부는 물론, if문이나 for문 등의 코드 블럭{...} 에서 선언된 변수도 지역변수로 취급한다.
if(true) {
let a = 10;
console.log(a); // 10
}
console.log(a); // ReferenceError: a is not definedif문의 블럭 내부에서 let으로 선언된 변수는 외부에서 참조되지 않음을 알 수 있다. 당연히 함수 내부에서 선언된 변수도 외부에서 참조할 수 없다.
즉, var은 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프 이다.
let, const는 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프 이다.
4.호이스팅
호이스팅이란 '끌어올린다'라는 뜻이다. 자바스크립트는 코드를 실행하기 전, 일종의 '코드 평가 과정'을 거치는데, 이때 '변수 선언문'을 미리 실행해두기 때문에 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 된다. 이것을 변수 호이스팅이라 한다.
var은 변수 호이스팅이 발생한다.
console.log(a); // undefined
var a = 10;
console.log(a); // 10뒤에서 선언된 변수 a가 앞에서 참조되었음에도 에러를 발생시키지 않는다.
왜냐하면 내부적으로 자바스크립트엔진에서 var a = 10;을 var a; 와 a = 10;으로 분리하여, 변수 선언문을 함수 상단으로 끌어올려서 선언해버리므로 오류가 발생하지 않는 대신 정의되지 않았다는 의미로 undefined를 반환하는 것을 알수 있다.
var a; //변수 선언문을 호이스팅함(위로 끌엉올림)
console.log(a); // undefined
a = 10; //값 할당은 원래 그 위치에 그대로!
console.log(a); // 10단, 이 경우 변수 선언하는 var를 생략하는 경우 예상치 않은 결과를 내뱉으므로 주의해야 한다.
변수 라이프 사이클
선언 단계 (Declaration phase)
- 변수를 실행 컨텍스트의 environmentRecord에 등록
- environmentRecord는 스코프가 참조하는 대상
초기화 단계 (Initialization phase)
- environmentRecord에 등록 된 변수를 위한 메모리를 확보
- 이 단계에서 변수는 undefined로 초기화
할당 단계 (Assignment phase)
- undefined로 초기화 된 변수에 실제 값을 할당
var 변수의 라이프 사이클
let/const 변수의 라이프 사이클
let, const도 변수 호이스팅이 발생한다. 단, 다른 방식으로 작동한다. let/const 변수의 경우 var 변수와 다르게 변수의 선언 단계와 초기화 단계 사이에 일시적 사각 지대(TDZ)가 존재하고, TDZ에서 관리 중일 때(let 변수의 선언 또는 const 변수의 선언 및 할당 코드가 나오기 전)에 사용하려 한다면 RferenceError를 발생 시킴
5.전역객체 프로퍼티 여부
var로 선언된 변수는 전역객체(브라우저 환경의 경우 window)의 프로퍼티다.
let, const로 선언된 변수는 전역객체 프로퍼티가 아니다.
느낀점
- 본 강의에서는 var로 변수 선언을 배웠는데, var은 잘 안 쓰는 걸로 알고 있어, 이번 기회에 따로 공부하게 되었다.
- 함수 만드는 것부터 해서, 반복문, 연산자 등 앞서 파이썬에서 배웠기 때문에 따로 정리는 하지 않았다.
- 자바스크립트 변수 선언을 아래에 현실적으로 정리해보았다.
1순위: const를 최우선적으로 사용한다.
2순위: let은 변수 값을 재할당할 필요가 있을 때만 사용한다.
3순위: var는 ES6 이후 부터... 특별한 경우를 제외하곤 쓸 필요가 없어 보인다.
참고로 구글의 자바스크립트 스타일 가이드에 다음과 같은 문장이 있다.
Use const and let
Declare all local variables with either const or let.
(const와 let을 이용해서 변수를 선언해라.)
Use const by default, unless a variable needs to be reassigned.
(값을 재할당하는 경우가 아니라면, const를 디폴트로 사용하라.)
The var keyword must not be used.
(var는 절대로 사용하지 말라)
참고사이트
https://curryyou.tistory.com/192 - 자바스크립트 변수 선언 방식 차이: var/let/const
https://velog.io/@modolee/javascript-let-const-hoisting - JavaScript - let, const 호이스팅(Hoisting)
