whatisthis?
JavaScript) 변수 선언과 데이터타입 본문
변수 선언 - let과 const와 var의 차이
우선, Hoisting과 Scope의 개념을 먼저 알아야 한다.
cr: https://www.howdy-mj.me/javascript/var-let-const/
변수(variable)는 하나의 값을 저장하기 위해
확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
자바스크립트는 매니지드 언어(managed language)이기 때문에
개발자가 직접 메모리를 제어하지 못한다.
따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고
변수를 통해 안전하게 값에 접근이 가능하다.
변수에 값을 저장하는 것을 할당(assignment, 대입, 저장)이라 하며
변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다.
변수명을 자바스크립트 엔진에 알리는 것을 선언(declaration)이라 한다.
할당 | 변수에 값 저장 |
참조 | 변수에 저장된 값을 읽어들임 |
선언 | 변수명을 js 엔진에 알림 |
변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라 한다.
변수 선언 뿐만 아니라,
var, let, const, function, function*, class 키워드를 사용해 선언한
모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다.
JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미.
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.
반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
-> 따라서 우리는 var보다는 const, let을 이용하는 것을 권고받음. (초기화가 되지 않아야 함)
예제 cr : mdn 예제
catName("클로이");
function catName(name) {
console.log("제 고양이의 이름은 " + name + "입니다");
}
/*
결과: "제 고양이의 이름은 클로이입니다"
*/
위 예제에서는 함수의 사용이 선언보다도 먼저 되었지만,
정상적으로 작동한다.
호이스팅은 다른 자료형과 변수에도 잘 작동함.
변수를 선언하기 전에 먼저 초기화하고 사용할 수 있다는 의미.
변수의 경우, 초기화를 제외한 선언만 호이스팅하는 예제를 보자.
console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화
위는 선언을 한 다음 -> 초기화까지 했으므로,
선언도 전에 num이라는 변수를 사용했지만 정상 작동한다.
그러나, 다음과 같은 코드에서는 오류가 발생한다.
console.log(num); // ReferenceError
num = 6; // 초기화
이 코드에서는 선언도 하지 않고 초기화만 하였다.
즉, var이나 let, const를 이용한 [선언]이 없었기 때문에
오류가 발생하는 것이다.
let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않음.
따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생함.
1. let
2. const
변수 선언에는 기본적으로 const를 사용하고,
재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋다.
- 재할당이 필요한 경우에 한정해 let 을 사용한다. 이때, 변수의 스코프는 최대한 좁게 만든다.
- 재할당이 필요 없는 상수와 객체에는 const 를 사용한다.
3. var
간단한 텍스트 저장시.
유연한 변수 선언시 유리함.
진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 수 있음.
'WEB STUDY > JAVASCRIPT' 카테고리의 다른 글
javascript) 프로퍼티(property) vs 메서드(method) (0) | 2021.11.05 |
---|---|
javascript) 재귀함수 / 콜백함수(call back) (0) | 2021.11.05 |
Javascript properties/method (0) | 2021.10.03 |
JavaScript search Tips. (0) | 2021.10.02 |
생활코딩 WEB3 - javascript편(6/6) (0) | 2021.10.02 |