자바스크립트 기본 - 함수 표현식, 콜백 함수 (callback)

함수 표현식

함수를 만드는 방법은 2가지 입니다.

함수 선언식( Function Declaration ), 함수 표현식( Function Expression )

 

자바스크립트는 함수를 특별한 종류의 '값' 으로 취급합니다

그렇기 때문에 변수에 값을 할당하듯 함수를 할당할 수 있습니다.

let hello = function(){
  console.log("hello")
}
hello()  // hello

 

함수는 hello변수에 할당된 '값'이기 때문에 출력이 가능합니다.
함수 코드가 문자형으로 변경되어 출력됩니다.

console.log(hello)	// --->  ƒ (){
      			// --->   console.log("hello")
      			// --->  }

함수가 '값' 이기 때문에

변수를 복사해 다른 변수에 할당할 수 있습니다!

let hello = function(){
  console.log("hello")
}

let hi = hello  // 복사 !

hi() // hello

console.log(hi)	// --->  ƒ (){
      		// --->   console.log("hello")
      		// --->  }

 

Callback function

콜백함수란?

다른 함수의 인자로 전달되어 추후 호출되는 함수를 말합니다.

function askTravel(question, yes , no) {
  if (confirm(question,'')){
    yes()
  }
  else{
    no()
  }
}

const answerYes = () => console.log("모험가님 안녕하세요!")    	//콜백함수 입니다!
const answerNo = () => console.log("이번기회에 한번 가보시죠!")	//콜백함수 입니다!

askTravel("아프리카에 가보셨나요?" , answerYes, answerNo)

 

함수 표현식 vs 함수 선언문

 

 

1. 함수 선언문은 호이스팅의 영향을 받지만 함수 표현식은 호이스팅의 영향을 받지 않습니다.

호이스팅(hoisting) 이란?

자바스크립트 Parser가 var변수 선언과 함수 선언을 해당 선언의 유효 범위 최상단까지 끌어올려 선언하는것! 입니다.아래 코드를 봅시다!

hello()	--> 함수선언식 hello함수는 최상단으로 끌어올려 지기 때문에 에러없이 동작한다.
	    함수선언문은 해당 함수가 정의되기 전에도 호출이 가능합니다!

hi()	--> 함수표현식 hi함수는 호이스팅의 영향을 받지 않기 때문에 에러가 발생한다.
		// Uncaught ReferenceError: Cannot access 'hi' before initialization
       
function hello(){
  console.log("hello~")
}

const hi = function() {  // 여기부터 hi함수 사용이 가능합니다!
  console.log("hi")
}

어떤방법이 더 좋다 라고 말할 순 없습니다.

hoisting은 코드의 가독성과 유지보수를 위해 일어나지 않도록 하는게 좋습니다.

함수와 변수를 가능하면 코드 상단부에 선언하는 것으로 호이스팅으로 인한 스코프 꼬임현상은 방지 할 수 있습니다~

var변수 에서도 hoisting 현상이 발생하기 때문에 let과 const를 애용합시다!

그럼에도 hoisting에 대한 이해가 필요한 것은 아직 var가 쓰인 코드가 많기 때문... ㅠㅠ

 

2. 스코프의 차이

함수 선언문은 해당 함수가 선언된 코드 블럭 내 어디서든 접근이 가능하지만, 블록 밖에서는 접근이 불가능 합니다.

let age = 19

if(age === 19){
  function showHello(){
    console.log("hello")
  }
}
else{
  function showHello(){
    console.log("hi")
  }
}

showHello() // Uncaught ReferenceError: showHello is not defined

if문 스코프 안의 함수선언문 showHello 함수는 스코프 밖에서 사용 할 수 없습니다.

 

위와 같은 문제는 함수 표현식으로 해결 가능합니다!!!!

let age = 18
let showHello

if(age === 19){
  showHello = () => console.log("hello")        
}
else{
  showHello = () => console.log("hi")  
}
showHello() // hello
함수 표현식으로 외부변수 showHello에 함수라는 '값'을 할당했기 때문에 외부에서도 사용이 가능합니다~

 

제가 공부하는 해당 문서에서는

함수 선언문을 사용한 선언을 먼저 고려하라고 합니다.

함수가 선언되기 전 호출할 수 있다는것을 이점으로 생각한다고 하네요.

 

하지만 상황에 따라 호이스팅이 유지보수와 가독성을 해칠 수도 있다는 것을 잘 알고 사용하면 문제없을 것 같습니다.

 

 

기본이 중요하다.