chapter-02

챕터 2 : 최신 자바스크립트

아직 최신 자바스크립트 문법을 익히지 못했다면 지금이 최신 문법을 배울 좋은 기회입니다.

예제

ES6에서의 변수 선언

const 키워드

1. 전통적인 var을 사용한 방법 (Live, 소스 코드, JSBin)
2. const 예시 ❌ (Live, 소스 코드, JSBin)

let 키워드

3. 전통적인 var을 사용한 방법 (Live, 소스 코드, JSBin)
4. let 예시 (Live, 소스 코드, JSBin)
5. var을 사용한 전통적인 루프 카운터 (Live, 소스 코드, JSBin)
6. const를 사용한 루프 카운터 (Live, 소스 코드, JSBin)

템플릿 문자열

7. 전통적인 문자열 병합 예제 (Live, 소스 코드, JSBin)
8. 템플릿 문자열을 사용한 문자열 병합 (Live, 소스 코드, JSBin)
9. 템플릿 문자열 - Email 사용 예시 (Live, 소스 코드, JSBin)
10. 템플릿 문자열 - HTML 사용 예시 (Live, 소스 코드, JSBin)

디폴트 파라미터

1. 디폴트 파라미터 (Live, 소스 코드, JSBin)
2. 디폴트 파라미터에 객체 사용 (Live, 소스 코드, JSBin)

화살표 함수

1. 전통적인 함수 (Live, 소스 코드, JSBin)
2. 화살표 함수 (Live, 소스 코드, JSBin)
3. 파라미터가 2개 이상인 화살표 함수 (Live, 소스 코드, JSBin)
4. 복수의 파라미터와 한 줄의 몸체부를 가지는 화살표 함수 (Live, 소스 코드, JSBin)
5. if문이 포함된 화살표 함수 ❌ (Live, 소스 코드, JSBin)
6. 오류가 발생하는 화살표 함수 ❌ (Live, 소스 코드, JSBin)
7. setTimeout ❌ (Live, 소스 코드, JSBin)
8. setTimeout과 .bind 함께 사용 (Live, 소스 코드, JSBin)
9. setTimeout과 화살표 함수 함께 사용 (Live, 소스 코드, JSBin)
10. setTimeout과 'this' 문제 ❌ (Live, 소스 코드, JSBin)
11. 'this' 문제점 확인하기 (Live, 소스 코드, JSBin)

ES6 트랜스파일링

JSBin에서의 트랜스파일링

1. JavaScript 탭 (JSBin)
2. ES6/Babel 탭 (JSBin)
3. 브라우저에서(인라인) 트랜스파일링 하기 (Live, 소스 코드)

ES6 객체와 배열

구조 분해를 사용한 대입

1. 구조 분해 (Live, 소스 코드, JSBin)
2. 객체를 분해해서 함수의 인자로 넘기기 (Live, 소스 코드, JSBin)
3. 객체의 구조 분해 형태를 함수의 인자로 사용하기 (Live, 소스 코드, JSBin)
4. 배열 구조 분해 (Live, 소스 코드, JSBin)
5. 콤마를 사용한 배열 구조 분해 (Live, 소스 코드, JSBin)

객체 리터럴 개선

6. 객체 리터럴 개선 (Live, 소스 코드, JSBin)
7. 개선된 객체 리터럴로 객체에 메서드 포함시키기 (Live, 소스 코드, JSBin)
8. 예전 방식의 객체 선언 문법 (Live, 소스 코드, JSBin)
9. 새로운 방식의 객체 선언 문법 (Live, 소스 코드, JSBin)

스프레드 연산자

10. 배열과 스프레드 연산자 (Live, 소스 코드, JSBin)
11. 배열에 reverse()를 적용한 후 구조 분해하기 (Live, 소스 코드, JSBin)
12. 스프레드 연산자와 reverse(), 구조 분해 함께 사용하기 (Live, 소스 코드, JSBin)
13. 스프레드 연산자와 구조 분해 함께 사용하기 (Live, 소스 코드, JSBin)
14. 배열과 스프레드 연산자를 사용한 direction 함수 예시 (Live, 소스 코드, JSBin)
15. 객체 선언에 스프레드 연산자 사용하기 (Live, 소스 코드, JSBin)

프라미스(Promise)

1. getFakeMembers 함수 (Live, 소스 코드, JSBin)
2. fetch 함수 (Live, 소스 코드, JSBin)

ES6 클래스

1. 전통적인 생성자 함수와 프로토타입 (Live, 소스 코드, JSBin)
2. ES6 클래스 (Live, 소스 코드, JSBin)
3. 클래스 상속 (Live, 소스 코드, JSBin)