본문 바로가기

프론트엔드/JavaScript56

this 함수별 정의 구분: this 일반(Normal) 함수는 호출 위치에 따라 this 정의 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의 const happy = { name: 'Happy', normal: function() { console.log(this.name) }, arrow: () => { console.log(this.name) } } happy.normal() happy.arrow() const amy = { name: 'Amy', //happy의 함수 자체가 할당되는 구조 (소괄호()를 입력안했기 때문에 함수를 호출하는 것이 아니다 normal: happy.normal, arrow: happy.arrow } amy.normal() amy.arrow() // 생성자 함.. 2021. 5. 28.
생성자 함수 (prototype) 생성자 함수는 첫글자를 대문자로 하는 파스칼 케이스로 입력되어야한다. prototype 속성을 이용하여 각 생성자 함수에서 공통으로 사용되어지는 함수를 생성할 수 있다. 그렇게 되면 메모리관리를 효율적으로 관리할 수 있다 onst happy = { first_name: 'Happy', last_name: 'oh', getFullName: function () { return `${this.first_name} ${this.last_name}` } } console.log(happy) console.log(happy.getFullName()) const amy = { first_name: 'Amy', last_name: 'Clarke', getFullName: function() { return `${th.. 2021. 5. 27.
콜백 함수 콜백함수: 실행 위치를 보장해주는 함수, 함수의 인수로 사용되는 함수 화살표 함수를 이용한다 // setTimeout(함수, 시간) function timeout(cb) { setTimeout(() => { console.log('안녕하세요'); // 원하는 출력 위치에 콜백함수 입력 cb(); }, 4000); } // timeout() // 콜백함수 설정 timeout(() => { console.log('콜백함수') }) console.log('먼저 출력') 2021. 5. 26.
타이머 함수 타이머 함수 setTimeout(함수, 시간): 일정 시간 후 함수 실행 setInterval(함수, 시간): 시간 간격마다 함수 실행 clearTimeout(): 설정된 Timeout 함수를 종료 clearInterval(): 설정된 Interval 함수를 종료 // 3초뒤 실행하는 함수 const timer = setTimeout(function () { console.log('안녕!!') }, 3000) // 화살표 함수 setTimeout( () => { console.log('화살표 함수 안녕!!') }, 3000) // h1태그를 클릭하면 timeout이 종료되도록 선언 const h1El = document.querySelector('h1') h1El.addEventListener('clic.. 2021. 5. 26.
호이스팅 호이스팅(Hoisting) 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 보통의 코드들은 위에서 아래로 읽어가며 작동하지만 호이스팅 현상은 호출을 선언보다 먼저 해도 동작이 되는 현상이다. // 호이스팅 // 함수 선언부가 유효범위 최상단으로 끌어 올려지는 현상 const a = 7 // 호이스팅 현상 발생 double() function double() { console.log(a * 2) } 2021. 5. 26.
즉시 실행 함수 즉시 실행 함수: 선언을 하지 않고 바로 사용가능한 함수 실행중 아래와 같은 에러 메시지가 생긴다면 위쪽 함수 호출하는 부분에서 세미콜론(;)이 빠져있는지 확인 후 넣어준다 Uncaught TypeError: (intermediate value)(...) is not a function // 즉시실행함수 // IIFE, Immediately-Invoked Function Expression const a = 7 // 일반 함수 예제 function double() { console.log(a * 2) } double(); //즉시실행함수 예제(앞에 함수에 반드시 끝났다는 표시에 ; 을 입력해주어야 한다) (function () { console.log("즉시 실행", a + 3) })(); (functi.. 2021. 5. 26.

티스토리툴바