어머! 애 좀 var! 문제가 있네!

Judy·2021년 12월 31일
1

JavaScript

목록 보기
12/14
post-thumbnail

1.var가 가진 문제

ㅁ 함수 레벨 스코프로 동작: 전역 변수의 남발 및 코드 복잡도 증가
ㅁ 변수 선언시 var키워드 생략 허용 : 변수의 의도하지 않은 전역화
ㅁ 중복 선언 허용 : 변수의 의도하지 않은 값 변경
ㅁ 변수 호이스팅 : 변수 선언 이전에 참조 가능

2. let 과 const의 등장

전역 변수는 유효 범위(scope)가 넒어서 어디서 사용될 것인지 파악하기 힘들고, 의도하지 않게 변경될 수 있어서 복잡성을 증가시키는 원인이 된다. ES6에서는 var의 이런 단점을 보완하기 위해 let과 const키워드를 도입하였다.

(이전에 정리하였던 내용)

2-1. scope

(1) 함수 레벨 스코프(Function-level scope)

  • 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.
    즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

(2) 블록 레벨 스코프(Block-level scope)

  • 모든 코드 블록(함수,if문,for문,while문 등)내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
    즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

var 예시를 보자.

  • var키워드는 블록 레벨 스코프를 따르지 않는 특성으로, 코드 블록 내의 변수 red는 전역변수이다.
  • 전역 변수 red가 선언되어있지만, var 키워드는 중복 선언이 허용되므로 문제가 되지 않는다.
  • 그러나 코드 블록 내의 변수 red는 전역 변수이기 때문에 전역에서 선언된 전역 변수 red의 값 1234는 5678 값으로 재할당 되어 덮어쓰이게 된다.

let 예시를 보자

  • let키워드는 블록 레벨 스코프를 따르는 특성으로, 코드 블록 내에서 선언된 변수 blue와 red는 지역 변수이다.
  • 전역에서 선언된 변수 blue와 코드 블록 내의 변수 blue는 별개인것이다.
  • 변수 red 또한 지역변수이므로 전역에서는 변수 red를 참조할 수 없다.

2-2. 변수 중복 선언 금지

  • var는 동일한 이름을 갖는 변수를 중복해서 선언할 수 있었지만, let 키워드로는 중복 선선을 할 수 없다.

예시를 보자.

  • var의 문제 없는 변수 중복 선언과 재할당이 되는 것 또한 확인 할 수 있다.

  • let 키워드를 중복으로 선언 시 SyntaxError 문법 에러가 발생한다.

2-3. 호이스팅

  • 호이스팅이랑 var로 선언된 변수나, function등을 속한 스코프의 최상단을 옮기는 것처럼 동작하는 특성을 말한다.
  • 하지만 let과 const 키워드의 경우에는 변수 선언 이전에 참조하면 Reference Error가 발생한다.

호이스팅 예시를 보자

  • var키워드로 선언된 변수를 선언문 이전에 참조하면 undefined가 반환된다.

  • let 키워드로 선언된 변수를 선언문 이전에 참조하면 어떻게 될까?

  • ReferenceError가 발생한다.

  • var 키워드의 호이스팅은 스코프에 변수를 선언(선언 단계)하고, 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화(초기화단계)한다

var호이스팅의 할당 단계 예시를 보자

  • dog는 "개" 라는 할당문을 통해 할당 단계가 실행되고, 변수 dog의 값이 "개"로 할당 되었다.

let 호이스팅의 할당 단계 예시를 보자

(친절한 JS 😆)

  • 스코프 선두에서 선언 단계와 초기화 단계가 실행되고, 변수 선언문 이전에 변수를 참조할 수 있다. -> undefined
  • cat="고양이"; -> 할당문에서 할당 단계가 실행된다.
  • + 참고 ) 변수의 생성과 호이스팅

3. Const

  • const는 상수(변하지않는 값)를 위해 사용하지만 반드시 그런것은 아니다.
    -let과 대부분 동일한 특징을 갖고 있지만 다른점이 있다.

3-1. let과 비슷하지만 조금 다른 너, Const

  • let은 재할당이 자유롭지만 const는 재할당이 되지 않는다.

  • const는 반드시 선언과 동시에 값이 할당되어야하며, 그렇지 않을 경우 SyntaxError가 발생한다.

-But! 객체의 프로퍼티는 보호되지 않아서, 객체의 내용은 변경할 수 있다.
(객체 타입 변수에 할당된 주소값은 변경되지 않다. 따라서 객체 타입 변수 선언에는 const를 사용하는 것이 좋다.)

profile
영원히 공부하는 멋진 장선생!!

0개의 댓글