JavaScript 문법 : this, Arrow Function
📎 JavaScript
를 쓰는 이유 : HTML
을 조작하기 위해 사용한다.
📎 'use strict';
(strict mode)
- 자바스크립트를 엄격하게 실행할 수 있도록 상단에 작성해준다.
📕 this
Keyword
<script>
console.log(this); // 콘솔창에 this 키워드 출력
function printThis (){
console.log(this);
}
printThis(); // 콘솔창에 this 키워드를 출력하는 함수 실행
</script>
✔️ this 값은 window{...} 라고 출력된다. 즉, 나를 담고있는 {object}를 출력한다.
📎 window
- 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체(오브젝트)입니다.
** 전역변수 란 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수입니다.
✔️ strict mode
에서 일반 함수 내에서 this를 출력을 쓰면 undefined
가 출력된다.
✔️ 함수나 변수를 <script></script>
안의 전역공간에서 만들면 {window}라는 전역 Object에 보관된다.
<script>
window: {
함수 () {
console.log();
}
}
</script>
✔️ Constructor(Object 생성 기계) 안에서 this
를 사용하면 instance(새로 생성되는 object)를 뜻한다.
<script>
function Machine(){ //constructor
this.name = 'kim';
}
var newObject = new Machine(); //new object, instance
</script>
✔️ this를 addEventListener 안에서 사용하면 e.currentTarget와 동일하게 지금 이벤트가 동작하는 곳을 뜻한다.
<script>
document.getElementById('btn').addEventListener('click', function(e){
console.log(this); // id가 btn인 HTML
console.log(e.currentTarget); // 위와 동일한 결과
})
</script>
🔎 CASE 1 : EventListener 안에서 Callback 함수를 쓴다면 this는?
<script>
document.getElementById('btn').addEventListener('click', function(e){
var newArray = [1,2,3];
newArray.forEach(function(){
console.log(this);
});
});
</script>
함수 안에 들어가는 함수를 콜백함수라고 부른다. 즉, 함수 안에서 파라미터 역할로 들어가는 함수를 뜻한다.
✔️ forEach라는 함수 안에 function(){} 콜백함수를 넣어서 사용한다.
✔️ 결과
Callback 함수는 그냥 일반 함수와 같기 때문에 {window} 객체가 출력된다.
🔎 CASE 2 : Object 안에서 Callback 함수를 쓴다면 this는?
<script>
var newObject = {
names : ['Kim', 'Lee', 'Park'];
printThis : function(){
newObject.names.forEach(function(){
console.log(this)
});
}
}
</script>
✔️ 결과
forEach함수 안에 Callback 함수는 그냥 일반 함수와 같기 때문에 {window} 객체가 출력된다.
🔎 CASE 3 : Object 안에서 Callback 함수를 arrow function으로 쓴다면 this는?
<script>
var newObject = {
names : ['Kim', 'Lee', 'Park'];
printThis : function(){
console.log(this);
newObject.names.forEach(() => {
console.log(this)
});
}
}
</script>
✔️ arrow function 특징 : 내부의 this 값을 변화시키지 않고 외부 this 값 그대로 재사용 가능하다.
✔️ 결과
상위 코드의 this값을 그대로 물려받아서 사용하기 때문에 {names} 가 출력된다.
📗 Arrow Function
기존 문법 : function() {} → 신 문법 : () => {}
✔️ 신문법의 특징은 this 값을 함수 밖에 있던걸 그대로 씀
✔️ Object 내 this 출력하는 명령을 하는 함수를 실행했을 때, 기존문법에서는 그 함수를 포함하고 있는 Object가 출력됨
✔️ Object 내 this 출력하는 명령을 하는 함수를 실행했을 때, 신문법에서는 window{...} 가 출력됨
Author And Source
이 문제에 관하여(JavaScript 문법 : this, Arrow Function), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimdohee/JavaScript-문법-this-Arrow-Function저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)