JavaScripe Koans 라는 퀴즈 형식의 문제를 풀어가면서 Js의 기본 문법을 정리하면서 모르는 것들도 배워가는 시간을 가졌던 것 같다.
여기선 문제를 풀면서 새롭게 알게 된 것들을 정리하려고 한다.
1. 화살표 함수(Arrow Function)
화살표 함수는 함수를 보다 간결하고 단순하게 표현하기 위해 사용하는 것이다.
const add = function(x , y) {
return x + y;
}
// 위의 함수 표현식을 화살표 함수로 표현하면 다음과 같다.
const add = (x , y) => { return x + y; };
const add = (x , y) => x + y; // 위의 예제를 더욱 간결하게 한 결과이다.
요약
화살표 함수는 간결함을 위해 사용되며, 함수의 본문이 한 줄일 때 사용하면 유용하다.
본문이 두줄 이상이라면 중괄호를 사용해야하며 반드시 반환값을 return 해야한다.
2. this 예약어
this는 자기 참조 변수로 자신이 속한 객체를 가리킨다.
함수 호출 방식에 따라 this 가 바라보는 대상이 달라진다.
1. 함수 호출
2. 메소드 호출
3. 생성자 함수 호출
4. apply / call / bind 호출
평범하게 this를 호출하면 this는 window라는 전역 객체를 가리킨다.
console.log(this); // this는 window 객체를 가리킴.
this를 함수를 선언 후 호출한다면 window 객체를 가리킨다.
function add() {
return this;
}
console.log( add( ) ); // Window
하지만 객체, 클래스 내부에 선언된 this라면 가리키는 것이 달라지는데 예시를 한번 들어보겠다.
const character = {
name: 'ujun',
ballon: function() {
console.log('Hello '+ this.name);
}
}
character.ballon();
여기서의 this는 해당 메서드를 호출한 객체(character)를 가리킨다.
요약
함수 내부에서 this를 사용한다면 경우에 따라 값이 바뀔 수 있다.
라는 것만 알아두어도 좋다고 생각한다..
