KnP House for Daily

[ES6] Arrwo function Depth 본문

Web/ES6

[ES6] Arrwo function Depth

K.ung 2016.06.11 16:22

Arrow function의 심화 학습!!



/*
	심화 arrow
 */

/*
	this 를 lexicall bidning 된다.
	arrow는 외부 context를 가지지 않고 바로 감싸고 있는 scope의 context를 상속한다.
 */

//es5
var obj = {
	name : 'park',
	initializeHandlers : function(){
		var selector = document.querySelector('#name');

		selector.addEventListener('blur', function(evt){
			this.name = evt.target.value;
		}.bind(this));
	}
};

//es6
const obj = {
	name : 'park',
	initializeHandlers : function(){
		const selector = document.querySelector('#name');

		selector.addEventListener('blur',(evt) = {
			this.name = evt.target.value;
		});
	}
};

/*
	arrow 에 arguments는 기존 arguments 변수가 없으며, function으로 wrapping된 arguments가 존재한다.
	이름에 대한 참조라고한다(MDS참조 )
 */

//bad way
const variadicAdder = (x) => {
	return () = {
		let args = Array.prototype.slice.call(arguments, 0);
		return args.reduce( (prev, cur) => {
			return prev + cur;
		}, x);
	}
}

const variadicAdder2 = variadicAdder(5);
console.log(variadicAdder2(10,11,12)); // referrence error 

//Good way
const variadicAdder = (x) => {
	return function(){
		let args = Array.prototype.slice.call(arguments, 0);
		return args.reduce( (prev, cur) => {
			return prev + cur;
		}, x);
	}
}

const variadicAdder2 = variadicAdder(5);
console.log(variadicAdder2(10,11,12)); 
// arguments는 이름에 대한 참조를 하기 때문에 function으로 wrapping 후 안에서 arrow를 사용


/*
	new 연산자를 사용하는 것과 같이 사용 할 수 없다.(constructor 로 사용 불가)
 */

const Person = (name) => {
	this.name = name;
};

let p = new Person('park');

이 포스트는 순전히 개인 공부용으로 소장하기 위한 것임을 알리는 바이다.


출처 : https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

'Web > ES6' 카테고리의 다른 글

[ES6] destructing assignment  (0) 2016.06.14
[ES6] rest parameter  (0) 2016.06.14
[ES6] let 과 const 에 대해  (0) 2016.06.13
[ES6] Arrow function 으로 map, promise 사용  (0) 2016.06.11
[ES6] Arrwo function Depth  (0) 2016.06.11
[ES6] Arrow function Basic Syntax  (0) 2016.06.11
0 Comments
댓글쓰기 폼