#기본기19_함수의 호출방식에 따른 차이

나는 아직도 함수가 어렵다..

함수의 호출방식에 따른 차이를 알아보자.

a() , b() 함수가 있을 때, 함수의 호출방식에 따라 모두 다른 결과가 나오게 된다.

 

 

 

 

1. a(b)

• b가 전달된다, b함수 자체가 a()함수의 인자로 전달된다. a()함수 내에서 b함수가 필요한 시점에 호출해서 사용할 수 있다.

// 결과화면 
// I say a 
// undefined : a함수가 반환값이 없기 때문에 undefined가 출력된다.
function a(){
	console.log("I say a")
}

function b(){
	console.log("You say b")
}
a(b)     

// 결과화면 
// I say a 
// You say b : a함수의 결과값으로 b함수를 호출했기에, You say b가 나오게 된다.
// undefined : b함수 반환값이 없기 때문에 undefined가 출력된다.
// b함수도 반환값이 있다면,
// a함수 console.log()실행 => a함수 반환값 => b함수 console.log()실행 => b함수 반환값 순서로 나오게 된다.
function a(){
	console.log("I say a")
    return b() 
}

function b(){
	console.log("You say b")
}
a(b)

2. a(b())

• b()함수가 실행되고, 그 결과값(return값)이 함수의 인자로 전달된다

// 결과화면
// You say b : b()함수가 먼저 실행된다.
// I say a
// undefined : b함수의 결과값이 없으므로 undefined가 나온다, b함수가 먼저실행되니까!

function a(){
	console.log("I say a")
}

function b(){
	console.log("You say b")
}
a(b())     


// You say b
// end : 이후 return 값으로 undefined가 a함수로 전달된다.
// I say a 
// You say b 
// end 
// undefined : 전달된 b함수의 return 값인 undefined가 a함수의 return으로 나온다.

function a(){
	console.log("I say a")
	return b()
}

function b(){
	console.log("You say b")
    return console.log("end") // console.log()는 return 값으로 undefined를 반환한다.
}
a(b())

// return을 console.log()말고 다른걸로 했을 때 
// 결과화면
// You say b
// I say a
// You say b
// "end" : b의 return 값이 a에게 전달되어 a의 return 값으로 나오게 된다.

function a(){
	console.log("I say a")
	return b()
}

function b(){
	console.log("You say b")
    const end = "end"
    return end 
}
a(b())

3. a(()=>b())

• a함수가 실행되고, b함수를 콜백함수로 호출한다, b함수의 결과 값이 나오게 된다.

// 결과화면 
// a가 먼저 실행됩니다 : a함수가 실행되고
// "b is activated!"  : 콜백함수로 b함수를 호출합니다, b 함수의 return값이 a함수의 리턴값으로 반환됩니다.

function a(callback){
    console.log("a가 먼저 실행됩니다")
	return callback()
}
function b(){
    const sentence = "b is activated!"
    return sentence
}
a(()=>b())

// 결과화면
// ()=>b() 
function a(callback){
    console.log("a가 먼저 실행됩니다")
	return callback // 여기서 괄호를 없애면
}
function b(){
    const sentence = "b is activated!"
    return sentence
}
a(()=>b())  // a() 안의 ()=>b() 콜백함수 자체가 반환이 되버린다.

// 결과화면
// a가 먼저 실행됩니다.
// undefined

function a(callback){
    console.log("a가 먼저 실행됩니다")
    setTimeout(callback, 5000) // setTimout함수의 첫번째 인자는 함수 자체가 되어야 한다.
}
function b(){
    const sentence = "b is activated!"
    return sentence  // 반환값이 함수가 아닌 문자열이므로 b is activated가 나오지 않는다
}
a(()=>b())

// 결과화면
// a가 먼저 실행됩니다
// undefined
function a(callback){
    console.log("a가 먼저 실행됩니다")
    setTimeout(callback, 5000) // 2. 전달된 함수가 함수 자체가 아닌 반환값이므로 b is activated가 나오지 않는다.
}
function b(){
    const sentence = "b is activated!"
    return sentence  
}
a(b) //  1. 함수자체를 전달했지만

// 결과화면
// a가 먼저 실행됩니다
// undefined : setTimeout의 반환값이 없으므로 나오는 것, 반환하면 타이머식별자인 숫자가 나오게됨. 
// 5초뒤 b is activated!
function a(callback){
    console.log("a가 먼저 실행됩니다")
    setTimeout(callback, 5000) // 2. 5초 뒤 b함수가 실행되면서 b is activated가 나오게 됨
}
function b(){
   console.log("b is activated!")
}
a(b) // 1. 함수 자체를 전달
a(()=>b()) // 1. 함수의 반환된 값을 콜백함수로 전달한다.

4. a(()=>b)

• a함수가 실행되고, b함수가 콜백 함수로 호출된다, b함수 자체가 a함수의 인자로 전달되서  a함수 내에서 필요한 시점에 호출해서 사용할 수 있다. 이거는.. 사실 아직 잘 이해가 되지는 않는다. 콜백함수에 전달할 때 함수가 실행된 후 그 반환값(함수)이 setTimeout의 첫번째 인자값으로 들어가야 하므로 a(()=>b)는 실행되지 않는다. a(()=>b())로 작성해야 실행이 된다.

// 결과화면
// a가 먼저 실행됩니다
// undefined

function a(callback){
    console.log("a가 먼저 실행됩니다")
    setTimeout(callback, 5000) // 2. ??
}
function b(){
   console.log("b is activated!")
}
a(()=>b) // 1. b함수 자체를 콜백함수로 전달한다.


// 결과화면
// a가 먼저 실행됩니다
// undefined
// 5초 뒤 b is activated! 출력됨

function a(callback){
    console.log("a가 먼저 실행됩니다")
    setTimeout(callback, 5000) // 2. 5초 뒤 b함수가 실행되면서 b is activated가 나오게 됨
}
function b(){
   console.log("b is activated!")
}
a(()=>b()) // 1. 함수의 반환된 값을 콜백함수로 전달한다.