[양재동코드랩] 자바스크립트 강의 1일차 - 수업소개, var, let, const

• 김영보 강사님

자바스크립트의 궁극적인 목적

• 관련 기술을 통합, 제어하여 사용자에게 콘텐츠 제공
• 백엔드와는 다른 관점으로 접근해야 함
  • HTML은 구조적인 관점으로, CSS는 비유, DOM은 이벤트 핸들러, 자바스크립트는 통합 컨트롤 등 관점이 다 다름
• 사용자에게 콘텐츠를 어떻게 제공할 것인가 생각하는 것이 가장 중요

ES6 스펙

• ES5와 ES6 스펙이 두배가량 차이 남
  • 그만큼 많은 내용이 바뀜
  • 객체지향적인 면이 많이 보완됨
  • ES6에는 활용 부분이 많음
    • 쉽게 코딩할 수 있도록
    • 객체지향도 쉽게 접근할 수 있도록
• 자바스크립트는 객체지향 언어
  • ES5에서는 new 연산자를 사용하는 빈도가 적었음
  • ES6부터는 빈번하게 사용됨
  • ES6의 기본은 class
  • ES5와 ES6는 확실히 다르다.
• Property key와 property name의 차이
  • ES5에서는 오브젝트 생성 시 프로퍼티의 key에 변수를 쓸 수 없었음
    • 엔진이 문자열로 취급
  • ES6에서는 Symbol이 등장
    • 문자열이 아닌 값
    • 프로퍼티에 Symbol value를 사용할 수 있기 때문에 변수도 key로 할당 가능
  • 즉, property name은 문자열, property key는 symbol이 포함됨
• function과 method
  • Array.isArray()는 함수
  • Array.prototype.forEach()은 메서드
  • ES6 오면서 이 논리가 깨짐
    • Array.of()가 메서드
  • Prototype 내에 위치한 함수들은 method
  • ES6에 static method가 추가됨

var 키워드

• 변수 선언 구분
  • 로컬 변수
  • 글로벌 변수
    • 자바스크립트의 발목을 잡았다고 생각함
    • 대부분의 언어에서는 클래스 내에 변수와 메서드를 선언해서 사용
    • 자바스크립트는 예외적으로 전역적인 오브젝트를 사용할 수 있음
      • Var 키워드를 사용하지 않고 변수를 선언하면 글로벌 변수가 됨
        • 전역 변수라 오해하게 됨
        • window 오브젝트를 명시해야하지만 엔진이 대신함
      • 사실 글로벌 변수도 글로벌 객체의 지역변수임
      • 개발자들이 글로벌 오브젝트에 대한 인식 없이 글로벌 변수라 생각하고 구현하면서 개념을 혼동하는 문제들이 발생함
      • ES6부터는 글로벌 변수에 대한 개념을 제거함
    • 자바스크립트를 객체지향적으로 사용하지 않게 됨
• 변수 선언 구분 목적
  • 스코프
    • 모든 변수와 함수들은 오브젝트 내에 속함
      • 함수도 오브젝트이기 때문에 함수 내에 선언한 변수도 함수에 속함
    • 글로벌 변수 또는 함수도 window 라는 오브젝트 내에 속함
  • 함수 안에서 글로벌 변수 선언 방지를 위해 use strict 사용
    • ES5에서는 선언
    • ES6에서는 디폴트
      • 사실 전체에 대해 디폴트는 아니지만 class내에서는 use strict 모드가 기본이고, ES6에서는 class 사용이 원칙이 되다보니 디폴트와 다르지 않음

let 변수

• 스코프를 가진 변수 선언

• var는 함수 내의 스코프

  • 함수 내의 if문 내에 사용해도 함수 전체가 스코프
  • 호이스팅 문제 발생

• let은 블록, 문장, 표현식이 스코프

  • 스코프가 많아짐에 따라 엔진 성능에 영향을 줄 수 있기 때문에 트레이드오프가 있음
  • 일반적인 경우에는 성능에 크게 지장을 주는 로직이 없지만 WebGL이나 머신러닝 쪽에서는 영향이 있을 수 있기 때문에 성능을 요구하는 곳에서는 고민해볼 필요가 있음

• let은 호이스팅되지 않음

  • 자바스크립트의 유연성을 떨어뜨리는 단점도 됨

• Temporal dead zone

  • 같은 스코프안에 같은 이름 선언 불가
    • 에러발생

• Memo : 자바스크립트는 key, value를 식별자로 사용하기 때문에 함수 오버로딩이 존재하지 않음

• 글로벌영역에서 var로 선언한 변수는 글로벌 오브젝트 내에 선언되지만 let은 글로벌 오브젝트에 선언되지 않음

  • 별도의 로컬영역에 선언되는 것으로 추정됨
  • 디버깅 모드로 확인해보면 스크립트 영역에 선언됨

• ES6에서는 글로벌영역에서 오브젝트를 지정하지 않고 함수를 호출하면 함수는 호출되지만 this가 undefined로 설정됨

  • ES5에서는 오브젝트를 지정하지 않더라도 글로벌오브젝트(window)가 this로 자동 지정됨

• 브라우저 개발자도구로 보면 let변수도 var변수처럼 선언 위치가 아니더라도 스코프에 진입하면 지역변수로 잡힘

  • 브라우저의 표현일 뿐인지, 엔진에서 실제 그렇게 처리하는지는 모르겠음
  • 하지만 선언 위치보다 상위에서 변수에 접근하면 에러 발생
  • var변수의 경우에는 호이스팅으로 인해 undefined일 뿐 에러가 발생하지는 않음

• 예제

  var node = document.querySelector("ul");
  for (let k = 0; k < node.children.length; k++) {    // for 루프가 돌 때마다 let 변수가 Block 영역에 생성됨
      var el = node.children[k];
      el.onclick = function(event) {
          event.target.style.backgroundColor = "yellow";
  
          // let 변수 k는 Block 영역에 잡힘
          // for 루프가 돌때마다 Block 영역이 생성되고 해당 영역에 각각의 let 변수가 선언됨
          // 그래서 클릭 이벤트가 발생할 때마다 다른 Block 영역의 k값이 호출됨
          console.log(k);
      }
  }

  • let 사용 시에는 Block 영역이 별도로 생성되기 때문에 트레이드오프가 존재함

const 변수

• let 변수와 유사하지만 선언과 동시에 값을 초기화 해야함
  • let과 마찬가지로 Block 스코프
• 변경 불가
• 다른 변수들보다 const 사용을 우선적으로 검토
  • 값이 변경되지 않는 다면 const 사용
• 기존에는 상수의 경우 대문자로 변수명을 지정하는 것이 관례였음
  • 하지만 값 변경 가능
• const의 경우에는 문법적으로 상수이기 때문에 굳이 대문자 선언을 안해도 되지만 컨벤션에 따라 유연하게 사용
• 오브젝트의 경우 값의 재할당은 불가능하지만 오브젝트의 프로퍼티는 변경 가능
  • 즉, const 변수의 개념은 const로 선언한 변수에 재할당이 불가능한 것을 의미
• 대부분 let보다는 const를 사용하는 경우가 많음