자바스크립트에서 지원하는 모든 변수는 변수에 할당된다.
그 변수를 선언하는 키워드는 var 이다.
var string = "hi' ; //스트링 문자형
var value1 = 1; // 숫자형
var value2 = 1.23; // 숫자형
var value3 = true; // 논리형 boolean
위는 기본 자료형 중 문자형,숫자형, 논리형을 var 변수에 할당한 모습이다.
ES6 버전부터 도입된 let 키워드 를 사용하면 동일하게 변수를 선언할 수 있다.
let string = "hi' ; //스트링 문자형
let value1 = 1; // 숫자형
let value2 = 1.23; // 숫자형
let value3 = true; // 논리형 boolean
그럼 var 과 let 의 차이점은 무엇일까? var 의 단점을 보안한 키워드가 바로 let 이다.
먼저 var 에 대해서 알아본다.
1. var은 중복으로 선언이 가능하다.
자바스크립트 언어의 유연성이 될수도 있지만, 중복된 변수는 코드의 심각한 논리적 오류를 발생시킬수 있다. 하나의 프로젝트에 여러명이 참가하여 코딩하는 경우 동일한 변수를 선언하고 저마다 값을 제각기 할당하다보면 의도한 값이 나오지 않을 수 있다.
이런 단점을 보안하고자, let 키워드로 변수를 선언하면 중복 선언이 불가하다.
VSC 에디터 부터 에러가 발생하며, 브라우저 콘솔에서 조차 하기와 같은 에러를 보여준다.
동일한 변수를 선언하는 것을 코딩하는 시점부터
막아주기에 안전해진다.
2. var 은 함수블럭 스코프 만을 가진다.
var 키워드는 함수블럭 스코프 내에서만 지역변수와 전역변수를 나눈다.
무슨말인지 하기코드를 보자.
var 키워드로 변수를 선언하면, 함수 블럭 내부의 변수는 지역변수, 외부는 전역변수 로
나뉜다. 딱 이 개념하나이다.
즉, 지역변수는 함수 내부에서만 사용이 가능하고, 전역변수는 코드 전체에서 참조가 가능 하다.
그 결과 위의 코드에서는 v1 은 정상적으로 console 로그에 출력되나
v2 는 함수 블럭을 벗어났기 때문에 에러가 발생한다.
이에 반해, let 키워드는 함수블럭 스코프 이외에도 블럭스코프 도 지원한다.
블럭 스코프는 { } 블럭내부의 스코프 를 의미한다.
즉, { } 블럭 내부에 선언한 변수는 해당 블럭 내부에서만 참조(사용) 이 가능하다.
{} 블럭 외부에 선언한 변수는 전역변수로 코드 전체에서 사용 가능하다.
그렇기에 위 코드에서는 v2를 출력시 오류가 발생한다.
위 코드를 var 로 변경하면, 에러는 발생하지 않는다.
왜냐면 var 에서는 함수 스코프만 지원하기에 v1 과 v2를 모두 전역변수로 인식하기 때문이다. 그래서 정상적으로 v1 과 v2 변수값이 출력된다.
3. var 은 호이스팅이 가능하다.
var로 선언된 변수들은 호이스팅이 가능하다.
호이스팅 이 가능하다는 뜻은, 변수 선언을 자바스크립트 영역 최상단에 위치 시킨다는 의미입니다. 하기 코드를 본다.
변수를 선언 하기전에 v1 이라는 값을 console.log 에 출력했다.
결과 값은, undefined 가 나온다. 왜 그럴까?
바로 호이스팅이 되었기 때문이다. 위 코드는 하기 처럼 내부적으로 동작한다.
var v1;
console.log(v1);
v1 = 10;
변수 선언이 가장 위로 올라온다.
다음 v1 을 출력한다. 이때 v1 변수에 할당된 값이 없기에 자동으로 undefined 가 세팅된다.. 출력값은 undefined 가 된다,
그 다음 v1 에 10을 할당 한다.
이게 바로 호이스팅의 원리 이다.
ES6 부터 도입된 let 과 const 키워드 에서는 바로 이 호이스팅이 적용되지 않는다.
사실 호이스팅은 자바스크립트 란 언어의 자유도를 높일 수는 있겠지만 위 예제와 같은 논리적 오류가 발생할 수 있다. 10이 출력되어야 하는곳에 undefined 가 출력되니 말이다.
위 코드를 let 으로 수정하면, 하기처럼 초기화 오류가 발생하게 된다.
let은 호이스팅을 지원하지 않기 때문이다.
호이스팅으로 인한 논리적 오류를 바로 잡고, 가독화 하기 쉬운 코드를 위한 변수 지침이
바로 let 키워드 이다.
그럼 위 코드를 let 을 사용해서 코딩해보면 이러하겠다.
let v1 = 10;
console.log(v1);
변수를 선언하면서 초기화 한다.
즉, 변수를 코드 내부에서 사용하기 전에 미리 알려준다. 이 변수를 앞으로 사용할거야. 하고 말이다.
그 다음 해당 변수를 사용하는 console.log() 문이 나온다.
가독화 하기도 쉽고, 논리적 오류가 발생할 사항도 없다.
이상으로 var 과 let 변수 키워드의 차이점 에 대해서
정리 해본다. 감사합니다.
댓글
댓글 쓰기