[JS] JavaScript ES6

💡 ES6

• ES6(ECMAScript 6)는 ECMAScript 표준 버전 중 하나이다. (2015년)
  • 자바스크립트의 표준, 규격을 나타낸다.
• 새로운 자바스크립트 버전이 나올때마다 새로운 문법이 나온다. (ES7, ES8 버전도 나와있음)
• 브라우저 버전마다 지원되는 자바스크립트 버전이 다르기 때문에 '바벨(Babel)'을 통해 구버전 브라우저에서도 실행될 수 있도록 하기도 한다.

🟠 ES6 추가 기능들

아래와 같은 문법들이 추가되었다.

1. 변수선언
2. 템플릿 리터럴
3. 화살표 함수
4. this
5. 모듈
6. 클래스

✅ 변수 선언

• var은 재할당과 재선언 모두 가능하다. 변수 선언이 유연하기 때문에 예기치 못한 값을 반환할 수 있다.(요즘에는 거의 사용하지 않음)
• let은 가변변수로 재할당이 가능하지만 재선언은 불가능하다.
• const는 불변변수로 재선언과 재할당 모두 불가능하다.(상수)

let과 const 키워드를 사용하는 것을 권장한다!

✅ 템플릿 리터럴

• 템플릿 리터럴은 큰따옴표나 작은따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능이다.
• 플레이스홀더(${value} 를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.
• 기존의 방식보다 훨씬 간편하게 사용 가능

✅ 화살표 함수

• 화살표 함수는 함수 표현식을 보다 단순하고 간결한 작성하는 문법이다.
• 화살표 함수에 인자(argument)가 하나밖에 없다면 인자의 ()괄호를 생략할 수 있고,
  한줄로 표현이 가능하다면 return과 {}중괄호를 생략할 수 있다.

// 기본 함수 선언식
let sum = function(a, b) {
  return a + b;
};

// 화살표 함수 형식
let sum = (a, b) => a + b;

✅ this

• ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.
• JS의 this는 상황에 따라 다르게 바인딩된다.
  • 전역 공간, 일반 함수의 this : 전역 객체
  • 메서드 호출시 this : 메서드를 호출한 객체
  • 생성자 함수의 인스턴스의 경우 : this는 인스턴스를 가리킨다.
• 화살표 함수 this : 일반적인 function으로 선언한 함수는 메서드로 호출 / 함수 자체로 호출되냐에 따라 동적으로 this가 바인딩되는 반면, 화살표 함수는 this라는 변수 자체가 존재하지 않기 때문에 선언될 시점에서의 상위 스코프의 this를 참조한다.

✅ 모듈(export / import)

• ES5 이전에는 각 기능별로 JS 파일을 나누고 관리하는 것이 불가능했다.
  • ES5 : require을 통해 모듈화 가능
• ES6 부터는 import / export 로 모듈을 관리할 수 있다.
• 모듈 내보는 방법 2가지

  1. named export : 한 파일에서 여러개를 export, 중괄호({}) 이용

     // named export 기본 형식
     export { 모듈명1, 모듈명2 };
     import { 모듈명1, 모듈명2 } from 'js 파일 경로';

  2. default export : 한 파일에서 단 한개의 변수/클래스 등을 export

     // default export 기본 형식
     export default 모듈명;
     import 모듈명 from 'js 파일 경로';

✅ 클래스(class)

• ES6에서는 클래스(class)를 사용할 수 있다.
• 클래스는 객체를 생성하기 위한 템플릿(틀)이다.
• 클래스이지만 다른 객체지향 언어(Java 등)와 다르게 “프로토타입”이 바탕이 된다.
• 클래스 선언은 let과 const처럼 “블록 스코프”에 선언된
• 클래스는 반드시 정의한 뒤에 사용해야 한다.
• 상속을 통해 클래스의 기능을 확장해 나갈 수 있다.

class Add {
  constructor(v1, v2) {
    this.v1 = v1;
    this.v2 = v2;
  }
  calc() {
    return this.v1 + this.v2;
  }
}

const number = new Add(2, 3);
console.log(number.calc()); //5

---

BOM vs DOM

BOM(Browser Object Model)	DOM(Document Object Model)
웹 브라우저와 관련된 객체를 다루는 모델	HTML 문서의 요소들을 다루는 모델
window 객체를 중심으로 다양한 객체 포함 ex) navigator, location, history, screen ..	documenet 객체를 중심으로 HTML 문서의 요소와 관련된 객체들을 포함 ex) element, attribute, text …
브라우저 창 조작, 페이지 이동, 쿠키 설정 등 브라우저와의 상호작용	HTML 문서의 요소를 조작하고 변경 ⇒ 웹페이지와의 상호작용
브라우저마다 구현이 다를 수 있음	대부분 브라우저에서 동일하게 동작

쿠키 vs 캐시

쿠키	캐시
클라이언트(브라우저)에 저장되는 작은 데이터 조각, 정보를 저장하기 위해 사용(사용자에게 맡겨도 되는 정보만 저장)	웹페이지, 이미지, 동영상, 스크립트 등의 리소스를 저장하는 임시 저장소
서버→클라이언트로 전송되어 브라우저에 저장된 후 같은 서버에 다시 요청할때마다 클라이언트→서버로 전송	웹페이지 요청시 브라우저는 해당 페이지의 리소스를 서버에서 다운로드하여 캐시에 저장 => 같은 페이지 다시 접근하면 캐시된 리소스를 통해 서버에 다시 요청하지 않을 수 있음(빠른 페이지 로드)
사용자 인증, 세션 관리, 개인화 등을 위해 사용됨	웹페이지 로딩 속도 향상, 네트워크 트래픽 감소하는데 도움을 줌
유효 기간을 설정할 수 있어 일정 기간동안 유지	일정 시간이 지나면 자동으로 만료되어 새로운 버전의 리소스를 가져옴
클라이언트에서 수정이 가능하며, js를 사용하여 조작할 수 있다.	클라이언트에서는 캐시의 내용을 직접 수정할 수 없다.