[220107] 익명함수, arrow함수, 함수가 생성되고 호출되는 순서

목록

1.   함수를 선언하는 여러가지 방법

2.   함수가 생성되는 순서

3.   익명함수

4.   호출되는 순서

 

---

 

함수를 선언하는 여러가지 방법

function test(){ console.log("hello world!") }

let elementObj = { addEventListener:함수,}
elementObj.addEventListener("click",test)


elementObj.addEventListener("click",function(){console.log('익명함수')})
elementObj.addEventListener("click",function(){console.log('두번째')})
elementObj.addEventListener("click",()=>console.log('세번째'))
elementObj.addEventListener("click",$=>console.log('네번째'))

/*
	elementObj.addEventListener("click",[함수코드])
	1. 함수를 정의한 다음에 함수명만 작성해서 보내기
	2. 익명함수를 바로 작성해서 보내는 방법
	3. 익명함수를 Arrow 함수로 바꿔서 가능
*/

뭔지 모르고 야금야금 사용했던 익명함수와 애로우함수가 뭔지 제대로 알아보자

 

---

 

함수가 생성되고, vs가 코드를 읽는 순서

비구조할당문이나 {}객체, 또는 배열을 많이 사용해봐야 감이 잡힌다는 함수 생성순서.

우선은 정리해놓고 틈날때마다 볼 수 있도록 정리해두었다.

 

    ingoo()
    function ingoo() {
        console.log('a')
    }

자바스크립트는 보통 동기적코드로 이루어져서 위에서 아래로, 책처럼 왼쪽에서 오른쪽으로 읽히게 되어있다.

그런데, 함수 실행이 제일 위에 있는데 왜 실행되는 걸까?

함수 내용은 아래에 위치해있어서 아무런 기능이 없는 함수로 읽혀야할텐데.

 

함수가 제일 먼저 읽히기 때문이다.

우리가 시험공부를 할때 중요표시를 먼저 해놓은 내용을 먼저 읽듯이, 함수를 제일 먼저 읽어놓고 시작한다.

 

 

---

 

먼저 읽히고 바로 실행되는 익명함수 = arrow함수

let abc = function() {
	console.log('먼저실행')
}

let abc2 = () => {
	console.log('hello')
}

 

( 인자 ) => { 실행코드 }

• 이름이 없어서 익명함수, 또는 화살표를 쓴다고해서 arrow함수라고 부른다.
• 넣을 값이 없으면 ()=>{}만으로도 사용이 가능하다. 내용이 없는 빈 객체가 된다.
• 먼저 읽고 바로 실행되는 선독선행 성질을 가졌다.
• 이대로 사용되지는 않고 보통은 함수 자체를 변수에 담아서 사용한다.
• 나중에는 이대로 사용을 많이 하므로 arrow 함수에 빨리 익숙해지자.

 

함수가 제일 먼저 실행된다고 코드 중간중간에 적지말고 제일 위에 작성하는 습관을 들이자. 

이유 : arrow 함수를 가끔 먼저 읽지 않는 순간도 존재해서, 강제로 먼저 읽게 하기 위해서.

 

 

 

---

 

생성되는 순서를 알아봤으니 호출되는 순서를 알아보자

     function fn1(){
        fn2()
        console.log("fn1")
    }

    function fn2(){
        console.log("fn2")
        fn3()
    }

    function fn3(){
        console.log("fn3")
        fn4()
    }

    function fn4(){
        fn5()
        console.log('fn4')
    }

    function fn5(){
        console.log('hello')
        fn6()
    }

    function fn6(){
        console.log('hello, world')
    }

    f1()

입사 시험에서 이렇게 코드를 주고서 console.log() 콘솔로그의 출력순서를 맞추는 문제를 종종 낸다고한다.

그 정도로 반드시 알아두어야할 순서니까 인식해두자.

 

그렇다면 도중에 함수가 호출된다면, 아래에 있는 console.log()는 어떻게 출력을 해야할까.

도중에 호출되면 중간에 끼어서 같이 출력되는걸까?

 

 

---

이제 여기서 우리가 지난 시간에 배웠던  지식을 꺼내와야한다.

 

1.   콜스택과 메모리힙

https://hancoco.tistory.com/74

[220105] 스택과 큐 구조의 차이점

 

자바스크립트는 보통 동기적코드로 이루어져서 책처럼 코드가 읽힌다.

읽힌 순서대로 프링글스 과자처럼 위에서 차곡차곡 쌓이고, 맨 위부터 꺼내지는 스택 구조로 코드를 처리한다.

그렇다면 차례대로 함수를 읽어왔을테니 콜스택에는 다음과 같이 쌓이게 된다.

기억해야할 것은,

1. 위에서부터 차례차례로 실행된다는점
2. 호출과 동시에 콜스택에 할당된 함수는 호출이 끝나면 콜스택에서 사라진다는 점

 

 

이렇게 차곡차곡 쌓였고, 읽어서 쌓을 코드가 더이상 없다면 테스크큐에 넣어둔 코드를 실행할 순서다.

   function fn1(){
        fn2() 			// ----> f2함수를 부르러 간다!!!!
        console.log("fn1")	// 나는?!?? 하고 남겨진 코드
    }

f1 함수가 실행되면서, fn2함수를 만나게된다.

()가 붙어있으므로 바로 fn2함수를 실행하러 넘어간다.

f1 함수는 fn2함수를 호출해서 fn2함수로 넘어간 상태로, console.log("f1")은 실행되지 않는다.

 

 

 

콜스택에 쌓는 흐름으로 진행도를 체크해보자면 다음과 같다

     function fn1(){//실행
        fn2() //---> 호출
        console.log("fn1")
    }

    function fn2(){//실행
        console.log("fn2")//실행
        fn3()//---> 호출
    }

    function fn3(){//실행
        console.log("fn3")//실행
        fn4()//---> 호출
    }

    function fn4(){//실행
        fn5()//---> 호출
        console.log('fn4')
    }

    function fn5(){//실행
        console.log('hello')//실행
        fn6()//---> 호출
    }

    function fn6(){//실행
        console.log('hello, world')//실행
    }

    f1() // 함수호출로 최초로 실행됨

 

이미 실행된 결과값을 작성해보자면

fn2
fn3
hello
hello,world

가 나올것이다.

 

 

이제 다 쌓았으므로 호출을 마저 완료해야한다.

     function fn1(){//실행
        console.log("fn1")
    }

    function fn2(){} //실행완료

    function fn3(){} //실행완료

    function fn4(){//실행
        console.log('fn4')
    }

    function fn5(){} //실행완료

    function fn6(){} //실행완료

f6()부터 f1()까지 차례대로 호출해서 완료가 된 함수는 차례대로 사라지고 다음과 같은 결과가 나온다.

fn2
fn3
hello
hello,world
fn4
fn1

 

 

자바스크립트를 실제로 돌려 결과값과 비교해보자.

 

 

굳굳.