[ES] var 키워드와 let, const.

안녕하세요, 늘 부족하지만 아는 것을 공유하는 AlbertKo입니다!

드디어, ECMAScript 강의에 한 걸을음 내딛었습니다! 박수!

블로그 운영을 본격적으로 시작한지 얼마 지나지 않았는데, 글 올리는 주기가 너무 불규칙했네요 ㅜㅜ

앞으로는 부지런히 운영할테니, 많은 관심 부탁드립니다!

저도 블로그를 유명하게 키워보고싶네요 ㅎㅎ

자, 그럼 본론으로 가시~ 기 전에, 제 계획에 대한 공지를 한 번 읽고 오시면 도움이 되지 않을까합니다.

흠흠, 그럼 정말 본론으로 들어가 보겠습니다.

우선 글의 제목을 보시면 var키워드와 let, const 키워드에 대한 설명을 드릴려고합니다.

사전에 var키워드에 대한 사전지식을 요구로하니, 한 번 훑어보고 오시길바랍니다.

그래도 간단하게 집고 넘어가자! var는 뭔가요?

네~ 그래도 var에 대해서 간단하게 집고는 넘어가야겠죠??

var는 Javascript에서 변수 선언을 위해 쓰이는 키워드입니다.

Javascript는 다른 일반적인 언어와는 다르게 변수에 동적 할당을 하게됩니다.

var a = 1

var b = "hello world"

console.log("a의 타입 : " + typeof a)

console.log("b의 타입 : " + typeof b)

// < 출력 >

// a의 타입 : number

// b의 타입 : string

위와 같이, 따로 형을 지정해주지 않았지만, 타입을 출력해보면 타입이 지정되있습니다.

엔진에서 값에 따라 타입을 동적으로 지정해주는 것 입니다.

이것은 양날의 칼이겠죠??? 타입을 따로 지정을 안해도되니 생산성이 올라가겠지만, 타입을 사전에 지정하지 않았기 때문에 오류가 생길 수 있습니다.

개인적으로 코딩할 때 타입을 지정해주는 정적 할당을 선호하기 때문에 (신뢰도 적으로나, 유지 보수 적으로나 정적 할당이 우수하다고 생각) 이에 대해서는 후에 Typescript를 공부하면서 배워보도록 합시다 ㅎㅎ

또, var 키워드는 다른 일반적인 언어에서는 상상도 못 할 행동도 가능합니다.

var a = 1

var b = "hello world"

var a = "AlbertKo"

console.log("a의 타입 : " + typeof a)

console.log("b의 타입 : " + typeof b)

// < 출력 >

// a의 타입 : string

// b의 타입 : string

띠용???

사전에 다른 언어들을 공부하신 분들은 심기가 불-편 하실겁니다.

"아니? a 변수를 앞에 선언했는데 또 선언하고 에러가 안나요????"

네... 안나요!

<그 외, 심기불편한 코드 >

console.log("a 출력 : " + a)

var a = 1;

// < 출력 >

// a 출력 : undefined

응??? 에러가 아니라 undefined가 출력이 됩니다.

이렇게 var가 말썽인 이유들은,

1. hoisting
2. 함수 단위 스코프

위 두가지를 크게 원인으로 말 할 수 있습니다.

호이스팅과 스코프에 대한 것은 간간히 나오겠지만, 자세한 설명은 넘어가겠습니다.

스코프는 말 그대로 '범위'를 말합니다. 변수에 접근 할 수 있는 범위라고 이해하시면 됩니다.

위 코드에는 안나와있지만, var 는 '함수 단위 스코프'이기 때문에 여러가지 문제가 발생할 수 있습니다.

호이스팅은 역시 말 그대로 '끌어올리는 것'을 말합니다.

이로인해 var는 어느 위치에 있든 스코프에 최상위에 선언한 것과 마찬가지인 것이 되는 것이고 그래서, console.log 를 상단에 두고 a를 출력했을 때 에러가 발생하지 않은 것입니다.

이러한 문제를 해결하고자 나온 것이 let과 const입니다.

let 키워드

let의 특징 보자면,

1. var는 함수스코프인 반면, let은 블록스코프입니다.
2. 같은 스코프 안에서 같은 이름의 let 변수는 선언할 수 없습니다.
3. let 변수는 호이스팅의 대상이 아닙니다.

위의 세개 정도의 특징으로 볼 수 있겠습니다.

우선 let은 블록 단위 스코프라고 했습니다.

let a = "hello"

{

let a = "world"

}

console.log("a 출력 : " + a)

// < 출력 >

// a 출력 : hello

위를 보면 hello가 출력이 됐습니다.

만약에 키워드를 var로 했다면 출력 값은 world가 됬겠지요???

또, let 키워드는 같은 스코프 안에서 같은 이름의 변수를 선언하지 못 한다고 하였죠??

let a = 1

let a = "hello"

console.log("a 출력 : " + a)

// < 출력 >

// SyntaxError: Identifier 'a' has already been declared

a 라는 이름의 변수가 이미 선언되었다고 에러가 납니다.

마지막으로 let은 호이스팅의 대상이 아닌 점이 있다고했습니다.

console.log("a 출력 : " + a)

let a = "hello"

// < 출력 >

// ReferenceError: a is not defined

a 변수가 스코프에 최상단으로 끌어올려지지 않았기 때문에 not defined 에러가 발생한 모습을 보실 수 있습니다.

const 키워드

그렇다면, const 키워드는 무엇 일까요?

let이 '변수'를 선언할 때 쓰이는 키워드라면, const 키워드는 '상수'를 뜻합니다.

그 외에는 let과 차이점이 없다고 보시면됩니다.

즉, const로 선언한 변수는 let과 똑같으나, 상수이기때문에, 할당 된 값을 변경할 수 없습니다.

주의할 점

var는 함수 단위 스코프, let은 블록 단위 스코프입니다.

만약에 for문을 돌린다고 하면, for 문안에서 var 키워드로 변수를 선언하면 크게 문제가 되지않지만,

let 키워드로 변수 선언을 한다면, 매 반복마다 해당 변수를 재선언하는 꼴이기 때문에 엔진마다 다르지만 let을 쓰면 대체적으로 성능이

크롬에서는 최소 3~4배, 사파리에서는 심각할 정도로 성능 차이가 난다고하니 참고해보세요.

let과 var의 성능 비교 -> 여기 들어가셔서 한 번 참고해보시면 좋을 것 같네요.

간단한 내용이지만, 이렇게 글을 쓰려고하니 확실히 힘이드네요...

늘 생각하는 것인데, 내가 아는 내용을 사용만 하려는 목적으로 그냥 공부한다면 사용하고 틀리면 고치면 되서 어렵다고 생각이 들지 않습니다만,

내가 아는 내용을 작은 것이라도 누군가에게 전달하는 것이 목적일 때에는, 저의 말에 따라 잘못된 정보를 알려줄 수 있다는 점에서 글을 작성할 때 항상 긴장하며 쓰게되네요.

뭐, 그만큼 신뢰도있는 정보를 전달을 하려면 저 역시 확실한 공부를 해야하기 때문에 저에게 돌아오는 것 역시 많을 것 같지만요 ㅎㅎ

앞으로도 글을 쓰려면 더 더욱 노력해야겠습니다.

---

안녕하세요. 현재 산업기능요원 회사 구직 중에 있습니다.

혹시 IT산업기능요원으로 유능한 웹개발자를 찾으시고 계신다면 감히 저를 추천해드립니다!!

댓글 혹은 myeongsku@gmail.com 으로 메일 주시면 감사하겠습니다!