[javaScript/공부] 화살표 함수, this, 호이스팅을 알아보자

화살표 함수와  this, 그리고 호이스팅 알아보기

 

 

---

       화살표 함수? 

function () {}
() => {}

위가 전통적 함수 표기법, 아래가 화살표 함수다.

화살표 함수가 훨씬 간결해서 저것만 쓰면 안되나? 싶어서 찾아보니,

동작 방식에서 차이가 있었다.

 

 

01 this 바인딩의 차이

this 란, 함수나 메서드 내에서 객체를 참조하는 키워드다. (다음 목차에서 더 설명)

function에서는 this가 동적으로 결정된다. 즉 아래와 같이 사용이 가능하다.

const obj = {
	value: 10,
	example: function () {
		console.log(this.value); //this는 obj를 가리킴 -> 출력: 10
    },
};

하지만 화살표 함수에서는 상위 컨텍스트의 this를 상속받아 사용하기 때문에 위와같이 사용할 경우 undifined 값이 뜬다.

const obj = {
  value: 10,
  example: () => {
    console.log(this.value); // this는 상위 스코프의 this(window)를 참조 -> 출력: undefined
  },
};

 

 

02 arguments 객체

function은 암묵적으로 arguments를 가지는 반면,

화살표 함수는 arguments를 갖지 않는다.

function func() {
	console.log(arguments);
    }
func(1) //[1]

arrow () => {
	console.log(arguments);
    }
arrow(1) //ReferenceError: arguments is not defined

위와같이 function으로 함수를 선언하면, arguments가 호출되는 반면

화살표 함수로 선언하면 오류가 뜨는 모습

 

결론

복잡한 this 처리, 혹은 객체 메소드 정의할 때는 전통적 function 함수 사용
그 외 콜백이나 간단한 함수는 화살표 함수 사용

 

 

---

       this? 

함수나 메소드 내에서 객체를 참조하는 키워드다.

각 상황에 따라 this의 동작이 달라지는데,

 

 

01 전역에서의 this

//브라우저에서
console.log(this); //window

//Node.js에서
console.log(this); //global

 

 

02 객체 메소드에서의 this

메소드를 호출한 객체를 참조한다.

const h1s = document.querySelectorAll('h1');
const h2s = document.querySelectorAll('h2');

function colorize() {
	this.innerText = "hi";
    this.style.color = "red";
} //colorize라는 함수 선언

for (let h1 of h1s) {
	h1.addEventListener('click', corolize)
} //this가 여기서는 h1s가 되기 때문에, 모든 h1에 적용

for (let h2 of h2s) {
	h2.addEventListener('click', corolize)
} //this가 여기서는 h2s

예를들어 this를 사용하여 함수를 선언했을 때, 

그 함수를 불러오면 this 자리에 해당 객체가 들어와서 적용된다.

아주 유용!

 

 

03 화살표 함수에서의 this

상위 스코프의 this를 사용한다.

따라서 해당 함수가 선언된 환경의 this를 그대로 참조!

정규 함수만 두개 연달아 선언할 경우,

const lalala = {
	value: 'John',
    name: function () { //여기선 lalala 객체를 참조
    	const name2 = function () {
        	console.log(this.name); //전역 객체 혹은 undefined 참조, lalala와 연결X
        };
        name2(); //전역객체 혹은 undefined
    }
};

lalala.name(); //undefined

일반 함수의 this는 호출 위치에 따라 결정되기 때문에 cat과 연결성이 없다.

하지만 여기서 상위 스코프의 this를 상속받는 화살표 함수를 쓰면,

const lalala = {
	value: 'John',
    name: function () { //lalala 객체를 참조
    	const name2 = () => {
        	console.log(this.name); //상위 스코프(name)의 this 상속
        };
        name2(); //lalala 객체 참조
    }
};

lalala.name(); //John

이게 가능하다!

 

 

04 강제로 this 설정하기

call	인수를 개별적으로 전달
apply	인수를 배열로 전달
bind	새로운 함수를 생성

function example(a,b) {
	console.log(`${this.name}, ${a}, ${b}`);
}

const person = {name: 'John'};


//call: 인수를 개별적으로 전달
example.call(person, '26', 'Korean');

//apply: 인수를 배열로 전달
example.apply(person, ['26', 'Korean']);

//bind: 새로운 함수를 생성
const example2 = example.bind(person);
example2('26', 'Korean');

위 세가지 예시 모두 John, 26, Korea을 출력

 

 

---

       호이스팅? 

코드 실행 전 변수와 함수 선언을 끌어오는 동작이다.

이때 화살표 함수는 호이스팅이 제한적인데,

전통적 함수는 전체가 호이스팅 되는 반면,화살표 함수는 호이스팅 되지만, 초기화 전에 호출할 수 없다.

console.log(arrow()); //RefferenceError: Cannot access 'arrow' before initialization
console.log(funct()); //"Hello"

//const 사용하여 함수 선언
const arrow = () => {
	return "hello";
}
//함수 선언
function funct() {
	return "Hello";
}

 

 

---

정말 너무 어렵고...........

this와 화살표 함수의 관계를 이해하느라 오래걸렸지만 겉핥기는 성공한 거 같다.............

 

그래도 지금 알아두면 나중에 다시 공부할 때 더 빨리 이해되겠지~!