0. ES6란?
ES6(ECMAScript 6)는 ECMAScript 표준의 가장 최신 버전.
현대적인 코드를 사용하면, 코드가 간결해지고 생산성이 향상된다.
이것이 ES6를 사용해야 하는 이유.
1. 변수 선언 방식의 차이(var, let, const)
var은 재정의와 재선언 모두 가능하다.let은 가변변수로 재정의가 가능하지만 재선언은 불가능하다.const는 불변변수로 재선언과 재정의 모두 불가능하다.
- 재선언: 똑같은 이름의 변수를 다시 만드는 것
- 재정의: 값이 지정된 변수에 값을 바꾸려는 것
스코프(scope): 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효범위
//변수 선언
var x = 2;
//재정의
x = 4;
//재선언
var x = 4;var의 문제점
- 변수 선언이 유연하기 때문에 예기치 못한 값을 반환할 수 있다.
- 코드가 길어진다면 어디에서 어떻게 사용 될지 파악하기 힘들다.
- 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
- 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환(호이스팅 발생)
3. 화살표 함수 (Arrow function)
화살표 함수는 함수 표현식을 보다 단순하고 간결한 작성하는 문법이다.
//기본 함수 형식
let sum = function(a, b){
return a + b;
};
//화살표 함수 형식
let sum = (a, b) => a + b;- 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다.
- 인수가 하나도 없을 땐 괄호를 비워놓으면 된다. 다만, 이 때 괄호는 생략할 수 없다.
- 본문이 한 줄 밖에 없다면 중괄호를 생략할 수 있다.
- 중괄호는 본문 여러 줄로 구성되어 있음을 알려주며, 중괄호를 사용했다면 return으로 결괏값을 반환해주어야 한다.
4. 모듈 내보내고 가져오기 (export/import)
모듈을 내보내는 방법으로는 named export와 default export가 있다.
// named export 기본 형식
export { 모듈명1, 모듈명2};
export { 모듈명1, 모듈명2} from 'js 파일 경로';
// default export 기본 형식
export default 모듈명;
import 모듈명 from 'js 파일 경로';-
named export는 한 파일에서 여러 개를 export할 때 사용 가능하다. export한 이름과 동일한 이름으로 import해야 하며, 중괄호에 묶어서 import 해야 한다. -
다른 이름으로 import 하려면
as를 사용하고, 한파일에 있는 클래스나 변수들을 한 번에 import 하려면* as를 사용한다.
// named export는 중괄호 포함 import
import { named1, named2 } form './example.js';
// named export에서 as를 사용하여 다른 이름으로 import
import { named1 as myExport, named2 } from './example.js';
// 한파일에 있는 모든 클래스나 변수를 * as를 사용하여 한 번에 import
import * as Hello from './example.js';default export는 하나의 파일에서 단 하나의 변수 또는 클래스 등만 export 할 수 있다. 또한 import 할 때 아무 이름으로나 자유롭게 import 가능하며, 중괄호에 묶지 않아도 된다.
// default export 는 중괄호 없이 import
import default1 form './example.js'5. forEach() / map() / reduce()
forEach()와 map()은 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어 주는 역할을 한다.
- forEach() : 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행
배열.forEach((요소, 인덱스, 배열) => {return 요소});
map(): 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환
배열.map((요소, 인덱스, 배열) => { return 요소 });
하지만 forEach()와 map()은 역할은 같지만, 리턴값의 차이가 있다.
forEach()는 기존의 배열을 변경하는 반면, map()은 결과값으로 새로운 배열을 반환한다.
var arr = [1,2,3,4,5];
//forEach()
var newArr = arr.forEach(function(e, i){
return e;
});
// return -> undefined
// map()
var newArr = arr.map(function(v, i, arr) {
return v + 1;
});
// return -> 2, 3, 4, 5, 6reduce() : 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환
`배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);
result = sum.reduce((prev, curr, i) => {
console.log(prev, curr, i);
return prev + curr;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// 10 5 4
result; //15- 초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이 된다.
- reduce()는 초깃값을 배열로 만들고, 배열에 값들을 push하면 map과 같아진다.
나의 공부 일기