항해 99 2주차 회고 - ES6

HTML, CSS를 둘러보고 처음으로 프로그래밍 언어로 JS(Java Script)를 선택하고 공부하면서 ES6라는 단어를 자주 접하게 된다. 
ES6라고 줄여서 사용하고 ECMASCRIPT6 라는 이름을 처음 들었을 땐, 자바 스크립트처럼 또 다른 프로그래밍 언어인줄 알았다. 

ES는 사실 자바스크립트와 다른 프로그래밍 언어를 뜻하는 것이 아니다. 오히려 자바스크립를 부르는 또 다른 이름이라고 생각하면 입문자입장에서는 이해하기 쉽다. (사실은 자바스크립트의 이름이 아니라 자바스크립트의 표준을 부르는 말이다.)
ES는 자바스크립트의 기준을 정해놓은 표준이다. 자바스크립트도 시간이 지남에 따라 새로운 기능이 생기고 버전이 업그레이드 되면서 
ECMA라는 국제 표준화 기구에서 관리하며 자바스크립트 사용하면서 준수해야 하는 규칙이나 세부사항들을 정해놓는데, 
그것을 ECMASCRIPT라고 부르는 것이다.

그렇다면 ES 뒤에 6은 왜 붙는 것일까? 
ES에 버전이 업그레이드되고 새로운 기능들이 추가됨에 따라 이를 명시하기 위해 1, 2, 3 등등 버전들을 명시하기 위함에 있다.
그중 2015년에 출시한 ES의 6번째 버전을 ES6라고 우리는 부르고 있다. (또는 출시한 연도를 붙여 ES2015라고 부르기도 한다..)

특히 ES6의 전과 후의 변화는 너무나도 크다. 
다양한 내장 함수들과 화살표 함수 등 여러 가지 기능들이 추가되었지만, 가장 큰 변화는 변수의 선언에 있다고 생각한다.
ES6 이전에는 변수를 선언할 때, 변수명 앞에 var를 붙이거나 심지어 var가 없어도 되는 경우도 있다고 한다

var를 사용하면 변수를 선언하기도 전에 사용할 수도 있었다. 

var로 변수를 선언한 경우

let으로 변수를 선언한 경우

사진과 같이 var로 선언하면 선언 하기 전부터 undefined값으로 할당되어 사용할 수 있게되고, let으로 선언하게 되면 i라는 변수는 정의된적이 없다는 오류와 함께 사용할 수 없는 모습을 보여준다. var의 이런 특징을 호이스팅(Hoisting)이라고 하는데, 변수 선언 후에는 할당된 값으로 이후에 사용이 가능하다는 점이 있다. 입문자의 경우, "오류를 안내고 작동하게 해주는 것이 좋은 것이 아닌가?" 라는 생각을 할 수 있는데, 반대로 예상치 못한 오류가 발생했을 때, 어디서 무엇이 잘못된 것인지 원인을 알 수 없다는 점이 단점으로 작용할 수 있습니다. 

var키워드는 중복선언이 가능합니다.

var로 변수 선언

let으로 변수선언

중복선언 또한 입문자의 입장에서는 "자유롭게 변수의 값을 변경할 수 있으면 좋은게 아닌가" 라고 생각할 수 있습니다!
(제가 그랬습니다..)
그러나 코드가 10줄이 아니라 1000줄 10000줄 이상이라고 생각해봅시다. 그리고 혼자 작업하는 것이 아닌 여러명의 개발자와 협력해서 개발을 하고 있다고 칩시다. 2번째 줄에 var로 변수를 선언하고 이후에 50번째 줄에 같은 이름으로 변수를 선언했을 때, 오류가 발생하지 않는다면? 우리는 모르고 계속 코드를 이어갈테고 한참 지난후에야 무언가 잘못되었다고 느낄 것입니다.
(그러면 뒤늦게 하나하나 찾아봐야겠죠??)

뿐만 아니라 나 혼자 작업할 때는 정상적으로 작동하는 코드가 다른 개발자와 합치면 내가 쓴 변수명과 다른 개발자가 작성한 변수명이 같아 이것 또한 문제가 될 수 있습니다. 함수안에 같은 이름으로 선언된 변수가 입력값으로 이상하게 들어갈 수 있기 때문이죠 ! ... 그외에도 더 많은 문제점들이 하..

이에 비해 let 혹은 const를 사용하면 변수이름의 중복사용이 안되기 때문에 긴 코드에서 실수로 중복으로 변수를 선언할 일도 있고 
선언했다 하더라도 어디서 문제가 되었는지 오류창으로 알려주기 때문에 그 부분만 수정하면 된다는 장점이 있습니다. 

var는 스코프도 지 맘대로다...

var키워드는 변수의 스코프가 함수 단위로만 구분되기 때문에 또 신박한 문제가 발생한다.

함수밖에서 선언된 i라는 변수는 전역변수이기 때문에 오류없이 동작하는 모습을 볼 수 있는데, test함수안에 선언된 변수t는 지역변수이기 때문에 함수밖에서 선언된 경우에는 오류가 발생한다. 매우 정상적인 모습이다.

하지만 함수가 아닌 조건문이나 반복문에서 선언된 변수는 우리가 예상한 지역변수로 작동하는 것이 아닌 전역변수로 작동하여 조건문과 반복문 밖에서도 사용이 가능하다는 문제점이 발생한다. 

정리하면 

var	함수 스코프
let	블록 스코프
const	블록 스코프

함수 스코프 : 함수를 기준으로 스코프를 구분 
블록 스코프 : 중괄호로 감싸진 코드 블록에 따라 구분

즉! 이러한 이유로 ES6 이후로 생긴 let과 const라는 새로운 변수 키워드는 기존의 var의 문제를 해결해준 아주 고마운 친구이다! 
앞으로 개발 공부를 시작하는 사람으로서 var사용보다는 let과 const를 구분하여 사용하는 것이 더욱 깔끔한 코드를 작성하는데 도움이 될 것 같다! (그렇다고 var를 아예 모르지는 말자 .. 과거에 많은 개발자분들이 작성하신 코드에는 var로 선언된 변수가 많고 우리가 그 코드를 보게 될 경우도 있을 것이기 때문에 ㅎ)

모두 3주차도 화이팅!