선언자에 대한 고찰

be1le·2021년 11월 9일
17

consideration

목록 보기
1/4

지난 글에서 나는
이와같이 스스로에게 약속을 하였기에 약속을 지키러 돌아왔다!

선언자란?

선언자는 말그대로 자바스크립트에서 변수선언시 사용하는 단어이다.
사실 var 라는 선언자가 있음에도 ES6에서 const와 let이 추가된 이유는 무엇일까?
궁금하면500워...ㄴ...
그이유를 생각해보면서 선언자의 차이점에 대해 생각해 보도록 하자!

차이점 4가지.

  1. var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프이다!
  2. var로 선언한 변수만이 선언전에 사용하여도 에러가 나지않는다!
  3. const는 초기값을 필요로 한다!
  4. var, let은 값을 다시 할당할 수 있지만 const는 재할당이 불가능하다!

하나하나 자세하게알아보자!

1.var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프이다!

함수 레벨 스코프와 블럭 레벨 스코프가 무엇일까?

함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

블록 레벨 스코프(Block-level scope)
모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

스코프는 정말 중요한 개념이라 다음 블로그에서 더자세히 정리해볼 생각이다!
어디서본듯한

간단한 예제를 통해 생각해 보자면

블록 레벨 스코프를 따르지 않는 var 키워드의 특성 상, 코드 블록 내의 변수 foo는 전역 변수이다. 그런데 이미 전역 변수 foo가 선언되어 있다. var 키워드를 사용하여 선언한 변수는 중복 선언이 허용되므로 위의 코드는 문법적으로 아무런 문제가 없다. 단, 코드 블록 내의 변수 foo는 전역 변수이기 때문에 전역에서 선언된 전역 변수 foo의 값 123을 새로운 값 456으로 재할당하여 덮어쓰게된다.
위상황에서의 문제는 var를 사용하면 의도치 않게 전역변수가 바뀔수도 있다는것이다. 이는 디버깅과 싸워야 하는 개발자에게 절대 반갑지 않은 소식이다.

하지만 let을 사용하면 아래처럼 실행된다.

let 키워드로 선언된 변수는 블록 레벨 스코프를 따른다. 위 예제에서 코드 블록 내에 선언된 변수 foo는 블록 레벨 스코프를 갖는 지역 변수이다. 전역에서 선언된 변수 foo와는 다른 별개의 변수이다. 또한 변수 bar도 블록 레벨 스코프를 갖는 지역 변수이다. 따라서 전역에서는 변수 bar를 참조할 수 없다. 이처럼 블록 레벨 스코프를 따르는 변수를 선언하기 위해서는 let이 훨씬 편리함을 알 수 있다!!

  1. var로 선언한 변수만이 선언전에 사용하여도 에러가 나지않는다!

이는 호이스팅의 차이가 아니라 자바스크립트에서 사용하는 var, let, const, function, class 등등의 선언 키워드들은 모두 호이스팅이 된다.
var의 경우 호이스팅되면서 초기 값이 없으면 자동으로 undefined를 초기값으로 하여 메모리를 할당하게된다. 그래서 var의 경우 선언 전에 해당 변수를 사용하려고 해도 메모리에 해당 변수가 존재하기 때문에 에러가 발생하지 않습니다.
그런데 let, const의 경우 호이스팅이 되면서 초기 값이 없다면 var처럼 자동으로 초기값을 할당하지 않는다. 그래서 값이 할당되기 전까지 메모리에 할당하지 않기 때문에 선언전에(정확히는 값이 할당되기 전에) 사용하려고 하면 메모리에 해당 변수가 존재하지 않아서 에러를 발생시키게 되는 것 이다! :)

  1. const는 초기값을 필요로 한다!

이말은 쉽게말해 선언과 초기화를 동시에 해야한다는 것이다!

위처럼 선언과 초기화를 동시에 진행하지 않는다면 우리는 SyntaxError를 만나게 된다 :(

  1. var, let은 값을 다시 할당할 수 있지만 const는 재할당이 불가능하다!

const도 let과 마찬가지로 재선언이 불가하며, 또한 재할당도 불가하다. 재할당의 경우, 원시 값은 불가능하지만, 객체는 가능하다. const 키워드는 재할당을 금지할 뿐, ‘immutable’을 의미하지 않는다.

차이점 정리!

var의 문제점 3가지
1.변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
2.함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
3.변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.
이세가지 를 보완하기 위해 나온선언자가 let 과 const인 것이다!
let 과 const 의특징은
let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다.
const는 재선언이 불가하며, 재할당도 불가하다.

선언자의 차이를 정리하려다 보니 자연스레 scope등의 여러 주요개념을 만날 수 있었다. 현재는 코드를 써내려가며 선언자로 var를 택하는 일은 극히 드물다고 생각한다. 하지만 예전에 쓰인 코드(ES6 이전)를 이해하려면 var의 특징들을 알고있어야 수월히 코드독해가 가능할 것 이다!
다음 블로그도 더 유익한 정보와함께 돌아올 수 있길 바라며 글을 마치려한다 :)

참고문헌 => (모던 자바스크립트deepDive)

profile
그저 그런 개발자가 되지 않겠습니다.

4개의 댓글

comment-user-thumbnail
2021년 11월 10일

정말 유익한 정보 감사합니다 .

1개의 답글
comment-user-thumbnail
2021년 11월 10일

유익한 정보 너무 좋아요 (•̀ᴗ•́)و

1개의 답글