javaScirpt - let, var, const의 차이점 - 7월 6일 발표

개요

javaSciprt 프로젝트를 하던 중 변수 선언시 어떤걸 언제 사용해야하는지 잘 모르겠어서 찾아보던 중 찾게 된

해당 블로그의 글을 정리하였다.

https://www.codecada.com/js/16/javascript-var-vs-let-vs-const

 

내용

ES6 출시와 함께 JavaScript는 더욱 강력한 프로그래밍 언어가 되었다.

이미 var라는 키워드가 있는데 어째서 let과 const가 필요하게 된 것일까?

 

var 키워드

 var는  javascirpt에서 변수를 생성하는데 사용되는 가장 오래된 전통적인 키워드이며 모든 웹 브라우저에서 지원이 되었다.

var를 사용하여 변수를 정의하면 선언이 함수 내부 또는 외부에서 작성되었는지 여부에 따라 함수 범위가 정해지는데 여기에서 범위란 Javascirpt의 실행 컨텍스트 또는 코드의 캡슐화를 나타내며, 변수의 접근성을 결정한다.

 

함수의 범위

• 전역 범위 : 변수가 코드베이스 내에 어디에서나 사용할 수 있는 경우 전역 범위라 한다. 함수 외부에서 정의된 변수는 전역 변수를 가진다.
• 지역 범위 : 코드 블록 내에서 정의된 변수는 해당 블록에 대한 지역 번수이며, 해당 코드 블록 내에서만 접근할 수 있다. 
  • 코드 블록에는 함수, 루프, try-catch 블록이 포함된다.

var test1 = "Akande";
var test2 = "Olalekan Toheeb";

var hi = function() {
  var max = test1 + ' ' + test2;
  console.log(max);  // 정상 출력
}

console.log(test1); // 정상 출력
console.log(test2); // 정상 출력

console.log(max); // error

 

var 호이스팅

var 키워드를 사용하여 선언된 변수는 코드를 실행하기 전에 선언된 파일 또는 함수의 맨 위로 이동이된다

이 프로세스를 호이스팅이라하며 선언하기 전인 var 변수를 사용하는 것이 유효하다.

console.log(test)
var test = "hi";

 

var 키워드의 특성

var 키워드를 사용하여 변수를 선언하면 본질적인 버그가 발생하고 중복 코드가 발생할 수 있다. 예를 들면 루프 및 try-catch 블록 내에서 코드 블록 까지의 변수 범위를 지정하는 것은 불가능하다.

이러한 문제를 해결하기 위해 ES6에서 두 개의 새로운 변수 키워드를 도입하게 되었다.

 

let 키워드

const 키워드와 함께 let키워드는 2015 ES6에 도입된 JavaScirpt 키워드이며, var 키워드의 고유한 문제를 개선하고 해결하기 위해 생겼다.

let 키워드는 블록 범위 JavaScript 변수 선언 키워드이며 지속적으로 변경되는 변수를 선언하는데 사용하도록 설계되었다.

전역 또는 함수 범위가 있는 var 키워드와 달리 선언된 변수는 중괄호 ( {} )로 정의 된 블록 안에서만 사용할 수 있도록 범위가 지정되며 이 중괄호 안의 코드는 외부에서 접근할 수 없다.

{
  let hi= "호롤로"
  console.log(hi)   // 정상 출력
}

console.log(hi)   //  error

 

const 키워드

const 키워드는 let 키워드와 마찬가지로 ES6에서 도입된 두번째 변수 선언 키워드이다.

코드 블록 범위를 가진다는 점은 let 키워드와 동일하지만, 코드 블록의 실행 수명동안 값이 변경되도록 설계된 let 키워드와 달리 const 키워드는 블록의 실행 수명 동안 값이 변경되지 않는 상수를 선언하도록 설계되었다.

const로 변수의 값을 변경해야하는 경우라면  let 변수로 전환해야하며, const 변수로는 값 재할당이 불가능하다.

const test = "헬로우";
test = "메롱"; // TypeError

 

그러나 const로 선언된 JavaScript 객체의 속성 업데이트, 추가, 삭제하는 것은 가능하다.

• 객체의 수정 제한
  
  • 추가 X, 삭제 X, 변경 X = Object.freeze();
  • 추가 X, 삭제 X, 변경 O = Object.preventExtensions();
  • 추가 X, 삭제 O, 변경 O = Object.seal();
• 제한된 객체에 대한 수정이 이루워졌을 때 에러 발생 방법 : 'use strict' 키워드를 파일 최상단에 배치.
• 보호된 객체인지 알고싶을 때 : Object.isFrozen();

 

const max = {
  test1: "hi",
  test2: "메롱:
}

max.test1 = "바뀌어라 얍";

 

결론

변수 선언은 코딩을 시작할 때 가장 먼저 배우는 것이며, 정확하게 이해하는것이 매우 중요하다.

최근에는 대부분 ES6 기반으로 개발하기 때문에 let과 const를 사용한다.

 

변수 키워드 선택 방법

• let은 코드 블록에서 값이 변경되는 변수를 선언.
• const는 코드 블록 내에서 값이 변경되지 않는 변수를 선언.
• const키워드를 사용하여 프로젝트 전체의 상수를 선언.
• var의 특성으로 인한 문제점이 있으니 사용하지 말고, 가급적 let 또는 const 키워드를 사용.

 

다음 발표 내용 : JavaScript의 값 참조