23/10/14

JavaScript

var & let & const

• let 과 const 는 es6 들어와서 생김. 즉 최신 문법이란 의미.

• var 는 let 과 마찬가지로 바꿀수 있는 변수를 만든다.

Q. 그럼 뭐가 다른거지??
A. 결정 적인 차이는 let 과 const 를 이용하여 생성한 변수는 block scope 고 var 를 이용하여 생성한 변수는 함수, 전역 스코프라는 것.

• 블록 스코프는 블록이 그 변수가 영향을 미치는 범위로 지정된다는 의미이며, 블록은 아주 쉽게 이해해서 { } 중괄호다.
  { } 안에서 let 이나 const 로 변수를 생성하면 그 변수는 해당 블록(중괄호 영역) 으로 스코프가 설정되고, 그 블록 안에서만 사용할 수 있으며, 그 블록 밖에서는 사용할 수 없다.

• 블록을 만드는 { } 는 함수에 붙는 것 뿐만 아니라 if문, for문 등의 반복문에 붙는것까지 모두 포함한다.(단, 객체생성할때 쓰는 { } 는 해당하지 않는다 - 이건 애초에 key - value 쌍이잖아)

• 블록 스코프가 유용한 이유는 이렇게 변수의 적용 범위가 제한 됨으로써 예상치 못한 부작용을 막을 수 있기 때문이다.
  예를 들어, var 로 if 문 안에 변수를 만들었다고 가정하면, 그 변수는 if 문 밖에서도 사용할 수 있다. 그리고 if 문 안에서 선언한 변수를 if 문 밖에서 사용하려는 시도 자체가 이상한 것이다.

  "경험 많은 개발자라면 if 문 안에서 정의된 변수를 보면 그것이 그 if 문 안에서만 사용 될 것이라고 예상할 것이다."
  -Maximilian Schwarzmüller

• const 와 let은 블록스코프이기 때문에 전역변수에서 선언된 변수를 자신의 블록 내에서 재선언 할 수도 있다. 이를 shadowing 이라고 하며 아무런 오류도 발생시키지 않는다.

var 는 이상한 특징들이 더 있다.

 var userName = "Max";
 var userName = "jun";
 console.log(userName); // jun

이런식으로 변수를 중복해서 선언할 수 있으며

 console.log(userName);
 var userName = "Max";

이렇게 선언 전에 사용할 수도 있다. 위 코드에서 콘솔에 undefined가 찍히는데 이는 어제 hoisting 공부할때 살펴본 내용과 같다.

다만 어제는 몰랐던 사실은 let 과 const는 hoisting 도 다르게 된다는 것이다.

let const 로 선언한 변수도 hoisting 되는 것은 맞지만 var 변수가 호이스팅 되고 undefined 상태로 initialize 되는 것과 다르게 let, const 로 선언된 변수는 호이스팅 되어도 initialize 되지 않는다.

이는 상이한 코드의 실행 결과로 나타나는데, 위 코드에서 undefined 가 찍혔던 것과 달리 let 이나 const를 쓰면
Cannot access 'userName' before initialization 라는 오류 메시지를 받게된다.

그리고 이런 오류 메시지를 받는건 좋은 일이다!
이는 let 과 const가 변수를 사용하기 전에 미리 선언할 것을 강제한다는 의미이고, 결과적으로 더 이해하기 쉽고 깔끔한 코드가 된다는 뜻이기 때문.

var는 예약어에 변수를 선언하는것도 가능하게 한다(바람직하지 않음)

 var undefined =5 

let 과 const로는 undefined 라는 이름을 사용할수 없다. 이는 JS에서 이미 다른 의미로 사용하고 있는 이름이기 때문이다.

Strict mode

• 위에서 살펴본 var를 사용하여 의도하지 않은 결과들이 나오는 것을 strict mode를 이용하여 상당부분 막을 수 있다.
• 그냥 파일(이나 함수)의 시작 부분에 "use strict"라고 적기만 하면 된다.

Q. 그럼 나는 Strict mode 를 써야할까?
A. 아니다. 나는 애초에 es6 이후의 JS를 처음부터 배우는 입장이기 때문에 그냥 처음 코드 짜는걸 배울때부터 최신 문법으로 배울 것이고, 최신 문법을 사용하는 이상 엄격모드가 굳이 필요하진 않다. 다만 이런 기능이 있다는걸 알아 둘 필요는 있다.

defer & async

JS 파일을 HTML에서 불러올때 body 끝부분에 넣으면 나중에 parsing 할게 많아질때 웹페이지가 느려질 수 있음.

반대로 head 에 넣어버리면 JS파일은 바로 불러오지만 이때 아직 html parsing 이 끝나지 않았기 때문에 오류가 발생할 수 있음.

이걸 다 해결하는 방법이 </head> 바로 위에 넣되 defer라고 한단어 추가해 주는거임. 이러면 스크립트를 바로 다운로드 하긴 하지만 스크립트 실행은 html 구문 분석이 전부 끝난 뒤에만 실행하기 때문에 오류는 발생 하지 않는다고 함.

 <script src="assets/scripts/vendor.js" defer></script>
 <script src="assets/scripts/app.js" defer></script>

이런식으로 적는것.

defer 대신 async 를 적어도 되는데 이경우에도 스크립트 다운로드는 바로 하지만 html구문 분석까지 기다리지 않고 최대한 빠르게 실행해버림. 그리고 이러면 당연히 오류가 생길 수 있음. 또 async를 적으면 여러 js 파일이 존재할 경우 순서를 무시하고 그냥 먼저 다운로드 된것 부터 실행해버림. 파일의 실행 순서가 중요한 경우에도 async 는 쓰면 안됨.

결론적으로 더 고여서 async를 완전히 이해하고 쓸수 있게 되기 전까지는 그냥 얌전히 defer써라.

IDE

• 드디어 ctrl Z 의 반대를 배웠다! ctrl Y이다. 실수로 ctrl z 누른걸 이젠 ctrl Y로 되돌릴 수 있다 :)

• VSC 에서 extension 으로 설치한 Code Runner를 드디어 사용할 수 있게 되었다. 지금까지 사용하지 못한 이유는 node.js 를 설치하지 않았기 때문이었던 것으로 추청된다.

• Code Runner를 쓰면 터미널에 node 파일명.js 같은걸 입력할 필요 없이 재생 버튼만 누르면 된다.

• Code Runner에서 일부 JS 코드는 실행이 불가능하다. prompt 가 그중 하나인데, prompt는 브라우저의 기능이라고 들은 만큼 브라우저에서 실행시켜야만 하는 것으로 생각된다. node나 Code Runner 에선 ReferenceError: prompt is not defined 라는 오류 메시지가 출력된다.