화살표 함수
기존 JS의 함수 사용
function add(first, second) { // 기명 함수 -> 이름이 있다.
return first + second;
}
var add = function(first, second) {
return first + second;
};
// 무기명 함수(익명 함수) -> anonymous function화살표 함수는 익명 함수를 선언하여 변수에 대입하는 방법과 매우 유사하다.
(변수 명으로 함수 호출)
ES6 의 화살표 함수
var addThis = (first, second) => first + second;
// 본문(중괄호)이 비어있고 결과를 바로 리턴하는 경우에는 중괄호를 생략하고 뒤에 바로 반환 표현식을 넣는다.
var addAndMultiple = (first, second) => ({ add: first + second, multiply: first * second });
// 반환값이 객체라면 괄호로 결과값을 감싸주고 짧게 표현 가능하다.화살표 함수는 특히 커링과 같은 디자인 패턴에서 사용되는 함수를 반환할 때 계단형 함수 선언과 같은 구조가 만들어지지 않게 해준다는 장점이 있다.
function addNumber(num) {
return function(value) {
return num + value;
};
// 타고 타고 밑으로 계속 타고 들어가는(계단 형식으로) 함수
}
// 화살표 함수로 변환
var addNumber = num => value => num + value;
콜백 함수의 this 바인딩 문제
// bind함수를 통해 this scope를 전달한 예
class MyClass {
value = 10;
constructor() {
var addThis2 = function(first, second) {
return this.value + first + second;
}.bind(this);
var addThis3 = (first, second) => this.value + first + second;
}
}JS 에서 공부했던 내용이다.
화살표 함수는 콜백 함수의 this 범위로 인해 생기는 오류 (클래스 내부에서의 this는 일반적인 상황에서 전역 객체를 가리켜 버리기 때문에 명시적으로 bind를 통해 this를 가리켜줘야 한다.) 피하기 위해 bind 함수를 사용하여 this 객체를 전달하는 과정을 포함한다.
코드를 보면 addThis2 함수는 this를 bind() 함수에 전달하여 this의 범위를 유지하고 있다. addThis3 함수의 경우 화살표 함수 이므로 이 과정이 생략되어 있다. => ES6에서는 화살표 함수로 <콜백 함수에서의 this 바인딩 문제>를 해결한다.
객체 확장 표현식과 구조 분해 할당
ES6에서는 이전 JS 문법 중에서도 특히 객체를 선언할 때, 객체나 배열의 특정 값을 추출할 때의 불편함을 많이 개선했다. (이해하기 쉽고, 짧아졌다.)
기존 JS 에서의 객체 확장 표현식
var x = 0;
var y = 0;
var obj = { x: x, y: y};
// 키 이름이 키 값과 동일하다.
var randomKeyString = 'other';
var combined = {};
combined['one' + randomKeyString] = 'some value';
// 연산 결과를 키 값으로 대입할 때는 키값을 지정할 코드를 추가로 작성해야 한다.
var obj2 = {
methodA: function() { console.log('A'); },
methodB: function() { return 0; },
};
// 객체에 함수를 추가할 때는 변수에 함수를 할당해야 한다. (function 키워드)ES6 에서의 객체 확장 표현식
var x = 0;
var y = 0;
var obj = { x, y };
// 객체 생성할 때 키 값을 생략하면 자동으로 키의 이름으로 키 값을 지정한다.
var randomKeyString = 'other';
var combined = {
['one' + randomKeyString]: 'some value',
// 객체 생성 블록({}) 안에 대괄호([])를 사용하여 표현식을 작성하면 추가하여 계산된 키값을 생성할 수 있다.
};
var obj2 = {
x,
methodA() { console.log('A'); },
// function 키워드를 생략하여 함수를 선언할 수 있다.
methodB() { return 0; },
};기존 JS 에서의 구조 분해 사용
var list = [0,1];
var item1 = list[0];
// 인덱스를 활용한다.
var item2 = list[1];
var item3 = list[2] || -1;
// 설정 값으로 할당이 안될 경우 기본값 할당해줄거 따로 지정해준다.
var temp = item2;
item2= item1;
item1 = temp;
// 배열의 두 값 치환
var obj = {
key1: 'one',
key2: 'two',
};
var key1 = obj.key1;
// 키값 변수에 할당
var key2 = obj.key2;
var key3 = obj.key3 || 'default key3 value';
// 해당 키값이 없으면 기본값으로 할당
var newKey1 = key1;
// 객체의 키값을 다른 변수에 할당ES6 에서의 구조 분해와 구조 할당
var list = [0, 1];
var [
item1,
item2,
item3 = -1,
] = list;
// 대괄호 블럭 사이에 추출하고자 하는 값의 인덱스 위치에 변수를 배치한다.
// = 기호를 변수와 함께 사용하여 기본값을 할당한다.
[item2, item1] = [item1, item2];
// 인덱스 위치에 각각 변경할 변수를 교차 배치하여 배열의 두 값을 치환한다.
var obj = {
key1: 'one',
key2: 'two',
};
var {
key1: newKey1,
// 콜론(:)을 활용하여 새 변수명을 선언하여 추출된 키값을 다른 변수명으로 할당한다.
key2,
// 객체의 키값을 변수에 할당한다.
key3 = 'default key3 value',
} = obj;구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 한다. '분해(destructuring)'는 '파괴(destructive)'를 의미하지 않는다. 구조 분해 할당이란 명칭은 어떤 것을 복사한 이후에 변수로 '분해(destructurize)'해준다는 의미 때문에 붙여졌다. 이 과정에서 분해 대상은 수정 또는 파괴되지 않습니다. 배열의 요소를 직접 변수에 할당하는 과정과 똑같고 코드의 길이만 줄어든다고 이해하면 된다 .
var [item1, ...otherItems] = [0, 1, 2];
var { key1, ...others } = { key1: 'one', key2: 'two' };
// otherItems = [1, 2]
// others = { key2: 'two' }라이브러리 의존성 관리
기존의 JS에서는 라이브러리나 모듈의 의존성을 script 태그를 이용해서 관리했다.
예를 들어 app.js가 math.js 를 사용한다고 했을 때 html 문서에서 app.js를 먼저 참조할 경우 정의되지 않는 함수를 참조하는 의존성 문제가 발생한다.
=> 프론트 스터디 채원이 발표 내용 , 돔 트리를 구성하며 script 태그를 읽는 순간(만나는 순간) 그대로 pause 되고 가서 작업을 수행한 후 돌아와서 원래의 흐름을 이어가기 때문에
그래서 script 엘리먼트의 선언 순서가 매우 중요하다는 것을 알 수 있다.
ES6 에서는 import 구문을 사용하여 script 엘리먼트 없이 연결된 파일 및 의존 파일을 먼저 모두 내려받고 코드를 구동하도록 하여 위에서 얘기한 참조 순서에 따른 의존성 문제를 매우 간단하게 해결했다.
