일반함수의 this와 화살표함수에서 this는 다르게 정의된다. 어떻게 다른지 알아보자. 일반함수는 호출 위치에 따라 this 정의! 화살표함수는 자신이 선언된 함수 범위에서 this 정의! 예제1) const leo = { name: 'leo', normal: function () { console.log(this.name) }, arrow: () => { console.log(this.name) } } leo.normal() //leo leo.arrow() //undefined leo라는 변수안에 객체테이터가 할당되어 있다. 여기서 일반함수로 정의된 부분은 호출 위치에서 정의되는데 normal메소드에서 일반함수로 선언했을 때 여기서 사용한 this는 어떤 걸 지칭하는지 알 수가 없다. but 기본적으..

const seo0 = { firstName: 'seo0', lastName: 'yoon', getFullName: function () { return `${this.firstName} ${this.lastName}` } } console.log(seo0) 객체데이터가 있고, firstname, lastname은 속성(프로퍼티), 프로퍼티에 함수가 할당되어있으면 '메소드'라고 부르기로 약속했다. `${}` 백틱기호를 활용하여 데이터를 보관하려고 한다. 여기서, this라는 부분은 바로 우리가 위에서 지정했던 seo0으로 생각하면 된다. this = seo0 하지만 seo0은 변수에 할당했기때문에 언제든지 바뀔수있는 구조이고 이부분을 염두해둬야하기때문에 this라는것을 통해서 지칭한다. (this에 대한..

콜백 (callback) - 함수의 인수로 사용되는 함수 function timeout() { setTimeout(() => { console.log('내가 먼저 나올래') }, 3000) } timeout() console.log('끝') 코드를 실행해보면 (화살표함수로 작성하였다.) '내가 먼저 나올래' 부분보다 '끝' 라는 함수가 먼저 호출되는것을 볼 수 있다. 그럼 여기서 '내가 먼저 나올래'가 더 위에 나올 수 있게 하려면 어떻게 해야할까? 그때 콜백을 사용한다. function timeout(callback) { //'콜백'이란 매개변수를 정의했다. setTimeout(() => { console.log('내가 먼저 나올래') callback() //내가 실행을 보장하고 싶은 곳에 넣은 후 호..

타이머 함수 setTimeout(함수, 시간): 일정 시간 후 함수 실행 setInterval(함수, 시간): 시간 간격마다 함수 실행 clearTimeout(): 설정된 timeout 함수를 종료 clearInterval(): 설정된 interval 함수를 종료 1. setTimeout / clearTimeout setTimeout(function () { console.log('내가 타이머다') }, 3000) //밀리세컨드(ms) 3초 앞에서 배웠던 화살표 함수를 사용해보자. setTimeout(() => { console.log('내가 타이머다') }, 3000) //밀리세컨드(ms) 3초 (편안) 함수를 호출하면 3초후에 '내가 타이머다' 가 호출됨 반면, 클리어타임아웃은 셋타임아웃을 종료시킨다..

호이스팅(hoisting) 매우 간단하다. 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상! 함수표현일땐 불가능. 예제를 출력하면 당연하게도 typeerror발생! 이유는? 더블함수가 실행할때는 더블함수가 만들어지지않아서 (자바스크립트는 기본적으로 위에서 아래로 실행되기때문에) const a = 7 double() const double = function () { console.log(a * 2) } 예제) 함수선언일땐 가능 const a = 7 double() function double() { console.log(a * 2) } 함수선언은 밑에다가 작성을해도 호출이 가능하다. 언제 유용할까? 복잡한 로직을 사용할때, 복잡한 코드를 위에서 아래로 읽어내려갈때, 더블함수가 어디에서 실행되는지 찾기..