javascript - #01 var // let // const

kyo3553·2020년 5월 23일
2

javascript

목록 보기
2/4

태클은 언제나 환영입니다.
오타 혹은 잘못된 정보로 인한 수정이 필요할 시, 언제나 태클 걸어주세요.
여러분의 태클이 저를 공부하게 만든답니다.

var // let // const

Javascript에서 변수 선언방식은 var, let, const 3가지가 있다.
나는 보통 var만 이용하여 공부했었는데, 각 선언방식마다 차이가 있으며, 이번 공부를 통해 나에게 잘못된 코드 작성 습관이 있다는 것을 알게 되었다. 그렇다면 var, let, const 의 차이점은 무엇이 있을까.

변수값의 변환, 유효범위, (호이스팅)

크게 3가지 부분에서 차이점을 보이고 있었는데, 아직 호이스팅에 대한 개념이 부족하여 변수값의 변환, 유효범위의 차이점에 대해 작성하려고 한다.

1. 변수값의 변환

var food = "pizza";
console.log(food); // pizza

var food = "chicken";
console.log(food); // chicken

var food = "no food";
console.log(food); // no food
  • 위의 코드처럼 var를 사용하여 변수를 선언하였을 때, 변수의 값이 계속하여 변환되어 출력하는 것을 확인할 수 있었다. 즉, var은 할당되는 값이 변경될 수 있다. 하지만, 이 변수 선언방식은 ES6 이후 지양하는 변수선언방식이 되었다. (ES에 관한 정보는 다음에 다뤄보기로 하자.)

  • ES6 이후 권장하는 변수선언방식에는 let과 const가 있다.

let food ="pizza";
console.log(food); // pizza

let food ="chicken";
console.log(food); // error
  • 위의 예시처럼 최초 let으로 변수선언을 하여 출력했을 땐 정상적으로 pizza가 출력되지만, 하지만 같은 변수명을 사용하였을 땐 에러가 발생한다. 즉, let은 재선언이 불가능하다. const역시 마찬가지다. 그럼 let 과 const의 차이는 무엇일까?
let food ="pizza";
console.log(food); // pizza

food ="chicken";
console.log(food); // chicken
  • let은 위의 코드처럼 재할당이 가능하다. 하지만 const는 이조차 불가능하다. 아래의 예시를 참고해보자.
const food ="pizza";
console.log(food); // pizza

food ="chicken"
console.log(food); // error
  • const food만 선언했다면 에러가 발생하지 않겠지만, 위의 예시처럼 작성하게 된다면 에러를 발생한다. 이처럼 const는 값의 변경이 없는 상수값에 사용하는 변수선언방식이다. 당연히 const는 변수선언과 동시에 값을 할당해 주어야한다.

2. 변수의 유효범위

var food ="pizza";
function fastfood(){
	var food ="chicken";
  console.log(food); // chicken
}
console.log(food); // pizza
  • 먼저 var의 유효범위이다. 위의 코드 결과는 chicken, pizza 가 출력된다. 즉, 현재 변수의 유효범위가 함수 내라는 것을 알 수 있는데 이것을 Function-scope라 하며 var의 유효범위이다. 반대로 let과 const는 Block-scope의 범위를 가진다.
let food ="pizza";
{
	let food ="chicken";
  console.log(food); // chicken
}
console.log(food); // pizza
  • 아까 전에 변수값의 변환에서 let은 재선언이 불가능하다고 언급했었다. 하지만 위와 같이 block을 지정해주고 선언하게 되면 각각 scope를 가지게 되므로 정상적으로 작동하게 된다.
  • 참고로 const는 상수의 경우에 사용이 가능하다. 추가로 배열 객체, 함수 요소내의 값을 수정할 수 있다. 아래 예시 참고.
const number =[1,2,3,4];
number.push(5);
console.log(number); //[1,2,3,4,5]
  • 추가로 var, let, const는 처리 속도면에서도 차이를 보인다고 한다. 특히 var는 let, const에 비해 처리속도가 느린편이다.

0개의 댓글