modern javascript

'use strict';

안전한 자바스크립트를 작성할 수 있도록 돕고, ECMAScript의 진화에 대비하는 모드.

• 전체 스크립트 또는 부분 함수에 적용 가능
• 스크립트를 결합해야한다면, 함수를 기준으로 사용하길 추천
• 실수로 변수를 생성하는 것을 막는다. 변수를 잘못 입력했을 때 전역 변수가 존재한다고 가정하고 동작이 될 수 있는데 strict 모드에서는 오류를 발생하도록 한다.
• 예외를 발생하는 코드를 넘기지 않는다.( 쓸 수 없는 프로퍼티에 할당하는 등)
• strict 모드에 대한 더 자세한 내용 관련 링크 :
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode

html에서 script 파일 연결

<script src="main.js"></script>

브라우저에서 html 문서를 분석할 때는 코드를 작성된 순서대로 분석하는데 중간에

parsing HTML -> blocked(fetching js, executing js) -> parsing HTML

asyn

<script asyn src="main.js"></script>

• html 문서 분석과 스크립트 파일 다운로드를 병렬적으로 처리한다. 동시에 처리하는 도중 스크립트 파일의 다운로드가 끝나면 분석을 멈추고 스크립트를 실행한 후 남은 문서를 분석하여 화면을 구성한다.
• 다운로드 시간이 단축된다는 장점이 있으나 여러 개의 스크립트가 다운로드 되는 경우 작성된 순서와 상관없이 다운로드된 순서대로 스크립트가 실행된다.

defer

<script defer src="main.js"></script>

• html 문서 분석과 스크립트 파일 다운로드를 병렬적으로 처리하며, 다운로드가 완료된 후에도 모든 html 문서 분석 후 스크립트를 실행하여 화면을 구성한다. 작성된 순서대로 실행할 수 있다.

let(in ES6)

블록 스코프로 변수를 선언한다.
let a = 3;

• 새로운 블록 범위에서 재선언이 가능하다.

  //var hoisting

  • 어디에서 선언했든 제일 위로 선언을 올려서 실행되는 것
  • 변수가 선언되기 전에 코드가 사용될 수 있다.
  • var는 어디에서든 처리가 되며 선언된 변수의 값이 할당되면 전역변수처럼 생성이 된다.
  • let 사용이 권장

  const

• 값을 선언함과 동시에 변경되지 않는다.

  논리 연산자

• 모든 논리 연산자는 처음에 나온 값이 결과값을 확정할 수 있다면 그 이후의 코드는 분석하지 않고 다음 코드로 넘어간다.

• 따라서 무거운 코드가 있다면 가장 마지막에 작성하는 것이 좋다.

  function

• first-class function : 변수에 할당이 가능

• 보통 하나의 기능만을 하도록 작성

• 재사용이 가능(sub program)

• object

  
  function 함수이름(매개변수, 여러 개도 가능){}
  function () {} // 익명 함수, 보통 변수에 할당해서 사용
  const fun = () =>{} // 화살표 함수
  
  (function a(){})(); //IIFE 즉시 실행 함수, 정의되자마자 실행

  드림코딩 : 자바스크립트 기초 강의(ES5+)