원글 페이지 : 바로가기
특성 var let const Scope 스코프 함수 함수/블록 함수/블록 Hoisting 호이스팅 O 초기화 undefined X 초기화 전 접근 불가 X 초기화 전 접근 불가 재선언 O X X 재할당 O O X 객체/배열 속성 변경 O O O 선언 방식 종류 name = “just name |”;
var varName = “var|”;
let letName = “let|”;
const conName = “const|”;
console.log(name, varName, letName, conName); // 출력 결과 : just name | var| let| const| Var 중복 선언 가능, 재할당 가능 let 중복 선언 불가능, 재할당 가능 const 중복 선언 불가능, 재할당 불가능 Scope 스코프 스코프는 “범위”라는 뜻을 가지고 있다. | “변수에 접근할 수 있는 범위”라고 할 수 있다. 스코프는 참조대상 식별자를 찾아내기 위한 규칙이다. JS는 이 규칙대로 식별자를 찾는다.(참조:모던JS) 모든 변수는 스코프를 가진다. js의 스코프는 2가지 Type(타입)이 있다. 전역 Gobal : 함수 어디에서든 접근이 가능하다. 지역 Local : 특정 함수와 해당 함수의 하위 자원에만 접근이 가능하다. 함수 내에 선언된 변수들이다. 함수 스코프와 블록 스코프로 나뉜다. JS는 기본적으로 함수 레벨 스코프(Function-level Scope)를 따른다. let, const 키워드를 사용하여 선언하면, 그 변수는 블록 레벨 스코프(Block-level Scope) 를 가진다. let과 const 변수는 선언된 블록 내에서만 유효하다. Hoisting 호이스팅 *1)인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 선언 순서에 상관없이 순서가 끌어올려 진 현상. == “호이스팅” 된다. let, const 사용하는 것을 권장 let, const도 호이스팅이 안된 것은 아니다. 호이스팅 되었지만, 접근만 하지 못하게 된 상태이다. 호이스팅의 문제점 == let, const를 권장하는 이유 호이스팅을 사용하면 결과의 예측이 힘들다. == 버그를 찾을 수 없다. 예시 및 자세한 내용 더보기 let 과 const는 TDZ(Temporal Death Zon)으로 인해, 값을 할당 하기 전에는 죽은공간으로 만든다. let 과 const는 호이스팅으로 메모리가 할당 되긴 했지만, 값이 초기화 되기전에는 접근이 불가능하다. 이런 오류가 뜸 : Uncaught ReferenceError: Cannot access ‘im_const’ before initialization 오류가 떠야 수정할 수 있는데, var는 undefined라고만 떠서, 버그를 찾을 수 없음 결론 : var는 스코프와 호이스팅을 고려했을 때, 오류를 찾아내기 힘드니, 사용을 지양하자. 참고 : 변수 선언 과정 선언 단계 Declaration : 변수 객체에 변수 등록 초기화 단계 Initialization : 등록된 변수를 메모리에 할당 (변수는 undefined로 초기화) 할당 단계 Assignment : 할당된 값을 undefined에 할당 // 호이스팅 예시
hoistFunc(); //순서 상관없이 실행이된다.
function hoistFunc() {
console.log(“hoist func”);
} —- *1)인터프리터 : 원시 언어의 명령을 번역, 실행하는 프로그램 (어셈블러, 컴파일러) 전역 변수, 지역변수 지역변수 란? – 함수 내부에서 선언된 변수를 뜻한다. – 함수 내에서만 유효. – 함수가 종료되면 메모리에서 삭제됨. 전역변수 란? – 함수 외부에서 선언된 변수 – 프로그램이 종료되어야, 메모리에서 삭제됨 – 어느영역에서나 접근 가능 – 전역 변수의 사용은 변수의 이름이 중복 될 수 있고, 의도치 않은 재할당에 의한 상태 변화로 코드를 예측하기 어렵게 만드므로 사용을 억제해야한다. 그 외 함수를 먼저 호출을 해야, 변수가 출력된다. 전역변수의 문제점 변수의 최소화 전역변수와 지역변수 함수 스코프 변수의 생명주기 변수의 유효범위 지역변수와 전역 변수의 차이 참조 : https://poiemaweb.com/js-scope https://f-lab.kr/insight/understanding-javascript-hoisting?gad_source=1 https://velog.io/@saemileee/Javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%ED%81%B4%EB%A1%9C%EC%A0%B8 https://vanillacreamdonut.tistory.com/306#:~:text=%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%98%20%EC%B9%98%EB%AA%85%EC%A0%81%20%EB%8B%A8%EC%A0%90!&text=%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%80%20%ED%95%A8%EC%88%98%EA%B0%80,%EA%B3%BC%20const%EA%B0%80%20%EB%82%98%EC%99%94%EB%8B%A4%EA%B3%A0%20%ED%95%9C%EB%8B%A4!