요즘 바빠서 포스팅이 어렵네요 :(
그래도 꾸준히 올려보려고 노력하고 있습니다. 😂
제가 첫글에도 말씀드렸다시피, 인터넷 상에 가이드 같은 것 들은 워낙 좋은 글들이 많아서 저는 실무를 하면서 겪을 수 있는 어려운 이슈나 경험 및 고도화 위주로 포스팅을 하려고 했었는데요.
오늘은..^^ 쉬어가는 의미에서 javascript에서 가장 기초가 되는 변수 선언방식에 대해서 글을 써보려고 합니다.
기존 ES5 방식이었던 var의 방식에서부터 ES6 방식인 let, const까지 알아볼텐데요.
그럼 ES5부터 ES6까지 어떠한 차이점이 있는지부터, 어떻게 활용하는지까지 알아보겠습니다.
var란?
바로 예제 코드로 들어가겠습니다.
function scope(){
// for scope
for(var i = 0; i < 10; i++) {
}
console.log(i); // 출력 : 10
// if scope
if (true) {
var my = "my";
}
console.log(my); // 출력 : "my"
}아니? console.log가 블록밖으로 나와있네요. 과연 console.log들은 찍힐까요?
정답은 YES입니다.
이유는 아래와 같습니다.
var의 스코프 범위가 함수단위이기 때문입니다.
이외에도 중복선언 이슈, 재할당 이슈, 선언 위치에 따라 전역스코프를 갖는 이슈, 호이스팅 등등 개발자가 구현하려는 로직과 다르게 동작하게되는 특성들이 있었습니다. (단점이 많았던 거죠)
그래서 나온게 바로 let, const라고 생각하시면 됩니다.
let이란?
자 코드로 바로 비교를 해봅시다.
function scope(){
// for scope
for(let i = 0; i < 10; i++){
}
console.log(i); // 에러
// if scope
if (true) {
let my = "my";
}
console.log(my); // 에러
}위와 같이 let으로 변환하면 스코프의 범위가 바뀌기 때문에 에러가 발생합니다.
개발자가 예상할 수 있는 스코프 범위를 갖는다고 생각합니다.
let은 그냥 쉽게 블록단위 {} 에서만 스코프범위를 갖는다고 생각하면 어렵지 않습니다.
오히려 더 이해하기 쉽죠?
자, 이를 활용하여 둘가지 방식의 차이점을 알아보는 코드를 보겠습니다.
var list = document.querySelectorAll("li");
for (var i = 0; i < list.length; i++) {
list[i].addEventListener("click", function(){
console.log(i + "번째 리스트 클릭");
})
}li 엘리먼트를 선택자로 잡아서 클릭 이벤트를 등록해놓고, 클릭 할때마다 해당하는 index 번호를 콘솔로 찍고싶은 간단한 예제입니다.
과연 제대로 동작할까요?
정답은 NO
아마 의도했던 바와는 달리 제일 마지막 li의 인덱스가 계속 출력될것입니다.
왜그럴까요?
이유는 "click" 이벤트에 등록되는 콜백함수가 closer scope를 가지고 있어서 그렇습니다.
쉽게 말하면 저 i변수를 function이라는 콜백함수에서 계속 기억(공유, 참조)하고 있기 때문입니다.
이해가 좀 되시나요?
이를 쉽게 해결할수있는 방법이 있습니다.
바로 let을 활용하는 방법인데요.
var list = document.querySelectorAll("li");
for (let i = 0; i < list.length; i++) {
list[i].addEventListener("click", function(){
console.log(i + "번째 리스트 클릭");
})
}이렇게 간단하게 var만 let으로 변경해주면 scope 범위가 블럭단위로 변동이되면서 지역변수화 시킨것과 같은 개념으로 해결할 수 있습니다.
아주 간단하게 해결이 가능합니다.
이해를 하고 쓴다면 도움이 아주 많이 되겠죠?
그럼 나머지 const에 대한 선언방식에 대해 알아보겠습니다.
const란?
const는 JAVA에서 final과 비슷하다고 생각하시면 될 것 같습니다.
즉 변할수 없는 상수값을 선언할 수 있는데요.
예를들어 const ENGLISH = "ABCD"로 초기화 한 순간 해당 변수는 값을 재할당하거나 변동할 수 없습니다.
이러한 특성때문에 오류를 줄이기 위하여 기본으로 변수선언을 const로 사용하고, 변동이 필요한 부분은 let으로 선언하는식으로 사용하는게 좋겠죠?
const에 대해 또 중요한 부분이 있습니다. 이제 막 javascript를 배우시는 개발자 분들이 쉽게 착각할 수 있는 부분이라고 생각하는데요.
const라고해서 무조건 불변을 의미하는건 아닙니다.
배열(Array)이나 객체(Object)의 값을 변경하는것은 가능하거든요.
자 이제 javascript 변수 선언의 차이점과 활용법을 알아보고 이해했으니, 상황에 맞게 선언방식을 선택하여 사용하시면 될 것 같습니다.
아주 기초중에 기초지만 도움이 되었으면 하는마음에서 글을 작성하였습니다.😆
그럼 다들 더위 조심하시길 바랍니다:)
