:)8W
오늘도
배워봅니다.
시작
1. let, const
- 기존에는 var를 통해서 변수를 선언하고 할당
- ES6부터는 let과 const가 지원
- et은 재선언 불가, 재할당 가능한 변수이고 const는 재선언 불가, 재할당 불가능한 변수다.
- 두 선언 키워드를 통해서 좀 더 보다 예측 가능한 코드를 작성할 수 있다.
2. 템플릿 리터럴
- 백틱(Back tick)을 통해서 지원
- 기존에 자바스크립트 변수를 문자열과 함께 쓰기위해서는 +를 통해서 연결해주어야 했지만, 템플릿 리터럴이 지원되며 한번에 나타낼 수 있음
- 사용방법은 나타내고자 하는 문자열을 백틱으로 감싸고, 중간에 자바스크립트 표현식을 사용하고 싶다면 해당 변수를 ${}로 묶어 표현이 가능함
3. 객체 리터럴
- 객체 안에 함수를 사용하는 것이 가능
- 이전보다 간결해진 코드로 객체를 선언하는 것이 가능
- 변수만으로 메서드 생성
- 메서드 생성 방식 간소화
4. 화살표 함수
- 함수표현식을 화살표 함수로 간결하게 표현 가능
- 화살표 함수를 통해 만들어진 본문에 return 만 있는 경우 return과 {}를 생략할 수 있다.
// ES5 함수표현식 function add(a, b) { return a + b; } // ES6 함수표현식 - 화살표 함수 const add = (a, b) => { return a + b; } // ES6 함수표현식 - 화살표 함수 return 생략 const add = (a, b) => a + b;5. 구조 분해 할당
- 구조를 분해해서 할당하겠다는 뜻으로 객체나 배열에서 사용
- 값을 해체하고, 각각 개별 값을 변수에 새로 할당하는 과정을 의미
const arr = [1, 2, 3] const [one, two, three] = arr console.log(one) // 1 console.log(two) // 2 console.log(three) // 36. 스프레드 연산자
- 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다.
// Array let arr1 = [1, 2, 3, 4, 5]; let arr2 = [...arr1, 6, 7, 8, 9]; console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] // String let str1 = 'paper block'; let str2 = [...str1]; console.log(str2); // [ "p", "a", "p", "e", "r", " ", "b", "l", "o", "c", "k" ]7. Default Parameter
- parameter의 초기값을 지정해주는 것
- 기존에는 함수안에 if문을 써서 값이 없을 때를 나타냈어야 했는데, 이를 다른 형식으로 사용할 수 있다.
function test(num = 1) { console.log(num); } test(); 1 test(undefined); 1 test(null); null test(""); "" test(false); false test(NaN); NaN8. Promise
- 이전에는 비동기를 처리하기 위해서 callback함수를 이용한 콜백패턴을 통하였는데 콜백헬을 발생시키는 문제가 있었습니다. 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메소드를 이용해서 에러 처리를 효과적으로 할 수 있게 되었습니다.
9. Class
- 자바스크립트는 프로토타입 기반의 객체지향언어로 클래스 기반의 객체 지향 프로그래밍을 지원하도록 Class 키워드를 도입하였습니다. Class의 도입으로 상속 등의 개념을 적용할 수 있어 더 좋은 가독성을 가진 코드를 만들어 낼 수 있게 되었습니다.
10. 등등
- 삼항 연산자, short-hand-property 등이 있다
Hi!