[JS] const,let

 

 

  JavaScript에서는 변수를 선언할 때 const, let을 사용해 변수를 선언한다. 

 

(Var)

  ES6 이전에는 var로만 변수를 선언했었다. 이 var의 문제점이 있어서 const와 let이 탄생한 것이다.

---

 

 

var의 특징

 

 

Scope of variable

  var로 선언한 변수는 범위는 전역범위 혹은 함수범위(지역변수)로 지정된다.

  아래 예시 코드를 보면 더 이해가 쉽다.

var variable = "Hello?"; //이 변수는 전역변수

function actions() {
    var localVariable = "World"; //이 변수는 지역변수
}
console.log(variable); //Hello? 출력
console.log(localVariable); //error 지역변수 호출 ;ocalVariable isn't defined.

 

  위 코드처럼 var는 함수 안에서든 함수 밖 외부에서든 변수 선언이 가능하며, 전역변수와 지역변수를 구분한다.

 

 

Hoisting

  호이스팅은 함수선언, 변수선언이 맨 위로 이동되는 자바스크립트의 메커니즘이다.

console.log(consolePrint);
var consolePrint = "ok"; //undefined 출력

  다른 언어라면 consolePrint 변수는 console.log 전에 선언된 것이므로 아예 프로그램이 작동이 안 되는 코드이다.

하지만 JS에서는 호이스팅을 통해 변수 선언 전, 변수 호출이 가능한 것이다.

 

  좋아 보이지만, 호이스팅이 가능한 것은 매우 안 좋은 문제점이다.

 

 

---

 

var의 취약점

 

 

1. 선언 중복가능

  같은 이름의 변수를 중복 선언해도 프로그램이 동작이 된다. 

var twinsVar = 10;
var twinsVar = 20;
console.log(twinsVar); //20출력

  중복으로 선언된 변수가 프로그램에 큰 문제를 일으킬 수도 있다.

 

 

2. Hoisting 가능

  var는 호이스팅이 가능하다.

  호이스팅은 코드의 가독성과 유지보수에 안 좋은 영향을 끼친다. 가급적 호이스팅이 일어나지 않도록 프로그래밍해야 한다.

  호이스팅을 모르더라도 가급적 변수, 함수는 상단부에 선언하고 호출은 선언 후 호출하는 게 좋다. 

 

 

 

  위와 같은 이유 말고도 많은 단점이 있어서 ES6부터 새로운 변수 선언이 도입되었다.

let과 const이다.

---

 

let과 const

 

  let은 기존의 var의 대체하는 "변수" 역할을 하며, const는 "상수" 역할을 한다.

 

  var의 문제점 중 중복선언이 있었는데, let은 중복선언을 하면 오류가 난다.

let twins = "G";
let twins = "G2";
console.log(twins); //SyntaxError 'twins' has already been declared.

 

  구문오류: 'twins' 변수는 이미 선언되었다.

 

 

 

많은 컴퓨터 언어에서는 상수를 지원한다.

상수의 역할은 선언한 값을 다시 재할당(수정, 변경)이 안된다.

let과 마찬가지로 중복선언 역시 안된다. 또 const는 선언과 동시에 값을 할당해야 한다.

 

 

const a;
console.log(a); //SyntaxError const declaration.

const 선언 후 바로 값을 할당 안 해서 에러.

 

const a=100000;
a = 51;
console.log(a); //Type error

const는 상수이다. 값을 변경 못하는데 재할당(변경)해서 에러.

 

 

 

 

  Hoisting 불가능

console.log(hoistingCheck1);
console.log(hoistingCheck2);

const hoistingCheck1 = 50;
let hoistingCheck2;

const와 let은 var와 달리 hoising이 불가능하다. let과 const를 사용하면, 유지보수 측면과 코드가 안 꼬일 수 있다.

 

 

 

---

 

 

 

 

  const는 재할당이 불가능한 상수이다. 하지만 const로 선언한 배열이나 객체는 그 내부 속성이나 요소를 수정할 수 있다.

 

const obj={
    userName:"gil dong",
}
obj.userName = "Hong gil dong";
console.log(obj);   //길동이 홍길동으로 수정됨.

 

출력 결과 "gil dong"에서 "Hong gil dong"으로 재할당됨. 이처럼 cosnt로 선언된 객체나 배열의 경우 그 객체, 배열 자체는 재할당 못하지만, 내부 속성이나 요소는 속성 할 수 있다. 

  obj를 수정한 게 아니라, obj.userName 즉, 객체 안에 있는 userName을 수정한 것이다.

 

 

 

const arr = [1,2,3];
arr.push(4);
console.log(arr);   //[1,2,3,4] 출력

arr = [8,76,5,1];
console.log(arr);   //TypeError 배열 자체를 재할당은 못함. 재할당 할 시 let으로 선언.

let arr2 = [1,5];
arr2 = [5];
console.log(arr2);  //[5] 출력

 

배열 역시 const로 배열을 선언하면 배열 안에 있는 요소는 재할당 할 수 있고, 배열에 요소를 추가할 수도 있다.

하지만, 배열 자체를 재할당하는 것은 불가능하며, 배열을 재할당할 시 let으로 선언해야 한다.

 

 

 

 

 

대표사진 출처

https://www.flaticon.com/kr/free-icon/js_541509