책 읽다가 코딩하다 죽을래

자바스크립트 함수 특징, 함수선언문, 함수표현식, 화살표함수, 콜백함수 본문

코딩/자바스크립트

자바스크립트 함수 특징, 함수선언문, 함수표현식, 화살표함수, 콜백함수

ABlue 2021. 7. 22. 23:05

자바스크립트의 함수도 다른 언어와 달리 신기한 특징을 갖는다.

 

자바스크립트 함수는 값(value)이 될 수 있다.

 

 

const printFn = function(){
	console.log('fn');
}

printFn;

// ƒ (){
//  	console.log('fn');
// }

printFn();
// fn

 

 

그래서 이렇게 변수에 저장할 수 있으며,

변수에 () 을 붙이면 함수가 실행되고 변수만 적으면 함수 내용을 문자형으로 출력한다.

 

 

함수를 정의하는 데에는 함수선언문과 함수 표현식이 있다.

 

// 함수 선언문
function printFn(){
	console.log('fn');
}

// 함수 표현식(anonymouns funciton)
const printFn = function(){
	console.log('fn');
}

// 함수 표현식(arrow funciton)
const printFn = () => {
	console.log('fn');
}

 

함수 선언문 과 함수 표현식의 특징은 다음과 같다.

 

  • 함수 선언문
  1. 독립된 구문으로 존재
  2. 코드 블록이 실행되기 전에 미리 호이스팅 되어 블록 내 어디서든 사용이 가능
  • 함수 표현식
  1. 함수가 표현식의 일부로 존재
  2. 실행 컨텍스트가 표현식에 도달해야 만들어진다.(선언만 호이스팅 되고 메모리엔 들어가지 않는다.)

 

함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백 함수라고 한다.

 

function randomQuiz(answer, printMeToo, printNo){
    if(answer === 'I love you'){
        printYes();
    } else {
        printNo();
    }
}

const printMeToo =  function(){
    console.log('me too');
}
//named function    어나니머스 펑션과는 다르게 변수에 할당된 함수가 이름을 갖는 것
const printNo =  function print(){
    console.log('no');
}

randomQuiz('wrong', printMeToo, printNo);
randomQuiz('love you', printMeToo, printNo);