[js] 자바스크립트 기초

자바스크립트의 구성
JavaScript = ECMAScript + DOM + BOM

 

1. ECMAScript

• 중구난방스런 자바스크립트의 표준화를 위한 명세서
• ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
• ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공

https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

ECMA-262 - Ecma International

2. DOM

• 문서 객체 모델(Document Object Model)
• XML을 HTML에서 사용할 수 있도록 확장한 애플리케이션 인터페이스
  • 문서를 표현한 트리 생성
  • DOM API 통해 노드(HTML) 조작 가능

3.BOM

• 브라우저 객체 모델(Browser Object Model)
• 브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스
  • window, location, navigator, screen, history (쿠키), Ajax 관련 객체 등
• HTML5에 표준 명세 제정됨

 

---

에버그린 브라우저(Evergreen Browser)

• 브라우저가 사용자에게 재설치를 요구하지 않아도, 자동적으로 업데이트할 수 있는 브라우저
• 브라우저 자동 업데이트에 따라 ECMAScript 호환성이 높아짐
• IE 제외
  • 트랜스파일러(Transpiler)를 사용해 최신 버전의 ECMAScript를 호환 가능하도록 만듦
• https://caniuse.com/?search=const 

"const" | Can I use... Support tables for HTML5, CSS3, etc

 

---

새로운 환경, Node

• 다양한 개발 도구 등장
  • 패키지 매니저 - npm, Yarn
  • 정적 분석 & 포메터 - ESLint, Prettier
  • 테스트 - Jest, cypress, Storybook
  • 번들러 - webpack, rollup.js, Parcel
  • 프레임워크 - Vue, React, Angular

 

---

공부 키워드

• 일급 객체(First-class object) 조건
  • 변수나 데이터 구조에 할당 가능
  • 매개변수로 사용
  • 반환 값으로 사용
  • ex. function
• 단축 평가(Short-circuit Evaluation)
  
  • 단순한 true/false의 판단이 아니라 표현식을 수행하고 그 수행 결과를 반환하는 것
  • expr1 && expr2 : expr1의 결과가 Falsy이면 expr1의 결과 반환, 그렇지 않으면 expr2의 결과 반환
    • falsy: undefined, null, 0, false, NaN, ''
  • expr1   ||  expr2 : expr1의 결과가 Truthy이면 expr1의 결과 반환, 그렇지 않으면 expr2의 결과 반환
• 함수 선언 시
  • 기명 함수 표현식으로 
    • 기명: 디버깅에 유리
    • 함수 표현식: 호이스팅 이슈 제거
      • 호이스팅(hoisting): 자바스크립트 엔진이 코드를 파싱할 때 var키워드와 function을 먼저 코드 상단으로 끌어올려서(hoist) 미리 준비해두는 것, 위에서 순차적으로 읽은 후 재배치 하므로 성능 이슈 발생

    • var add = function add(a, b) {