자바스크립트 함수 동작방식 질문드립니다.

게시물 수정 , 삭제는 로그인 필요

1. 실행결과 aaa가 찍힘

function foo() {console.log('aaa')} 

2. 실행결과 에러 발생, 1번과 차이점,괄호연산자 안에 함수 작성

(function bar() {console.log('aaa')}); 

3. 실행 결과 aaa 찍힘, 함수명있음 괄호연산자 안에 함수작성함 뒤에 () 붙여줌

(function test() {console.log('aaa')}()); 

4. 실행 결과 aaa 찍힘, 함수명없음 괄호연산자 안에 함수작성함 뒤에 () 붙여줌

(function() {console.log('aaa')}()); 

5. 코드 실행 결과 에러 발생, 함수명 명시하지않음

function() {}

자바스크립트 공부 중 각각의 함수가 다르게 작동하는것을 확인하여 궁금하여 질문드립니다.

자바스크립트에서 함수명은 함수 내부에서만 호출가능한것으로 알고있습니다.

1번 예시의 경우 자바스크립트 엔진에서 암묵적으로 식별자를 생성해준다고 학습하였습니다.

그림과 같이 메모리 공간을 확보해 함수 객체가 저장된 메모리 주소와 함수객체가 메모리 상에 있는것으로 보입니다. 자바스크립트 엔진에서 암묵적으로 함수 이름과 같은 식별자를 생성하여, 식별자의 참조값으로 함수객체가 저장된 메모리 주소가 할당되며, 식별자명을 통해 함수 호출을 하게되는 것으로 이해하였습니다.

2번 예시의 경우 괄호연산자(...) 안에 함수를 작성하여 함수 호출 시 함수가 정의되지않았다는 에러가 찍히게됩니다. 함수명은 함수 내부에서만 호출가능한 것인데, 함수 외부에서 호출을 시도하여 에러가 찍히는것으로 보입니다. 즉, 식별자가 없어서 호출을 못하는 것으로 보이는데, 괄호연산자(....)안에 함수를 작성할 경우 함수객체를 위한 메모리 공간을 확보하고 참조값도 생성하지만, 식별자를 암묵적으로 생성해주진않는건가요? 1번 예시와 괄호연산자(...)에 함수를 작성한 것만 다른데 이렇게 동작되는 이유가 궁금합니다.

3번 예시의 경우 즉시실행함수를 사용하여 2번 코드에서 마지막 호출()만 붙여준 차이점 밖에 없습니다. 하지만 함수가 정상적으로 호출되는것을 확인하였습니다. 3번의 경우 함수객체를 위한 메모리 공간을 확보하여 함수객체를 만들고 참조값을 위한 메모리 공간도 확보하여 최종적으로 식별자가 함수객체 저장된 메모리 주소를 참조해 test()를 호출하는 원리인가요? 일반함수의 호출 원리와는 다른것 같아, 어떤 원리로 함수가 호출되고 실행결과가 나오는지 궁금합니다.

1,2번의 예시의 그림처럼 그림을 포함한 설명이 가능하다면 그림포함 설명을 해주셨으면 감사하겠습니다.

4번 예시의 경우 익명함수로 즉시실행을 하였을 경우 함수명이 없어 자바스크립트 엔진에서 함수객체 생성은 하지만, 식별자는 생성하지않아 호출을 못할것으로 생각되었습니다. 하지만 코드실행결과 정상적으로 함수 호출이되었습니다. 이 경우 참조값을 할당한 식별자도 없을거로 생각되는데, 함수객체가 저장된 메모리 주소를 어떻게 찾아서 함수객체가 저장된 메모리에 접근하는지 궁금합니다.

1,2번의 예시의 그림처럼 그림을 포함한 설명이 가능하다면 그림포함 설명을 해주셨으면 감사하겠습니다.

5. 4번 예제와 비교를 위해 익명함수를 그냥 선언했을 경우는 함수 이름이 없어 에러가 떳습니다.

4번 예시의 경우도 함수이름은 없지만 함수객체가 생성되어서 호출된것으로 보이는데, 5의 경우 괄호연산자(...)를 쓰지않고 익명함수를 선언하여 함수객체 자체가 메모리에 올라가지않은것으로 추측하고있습니다. 4번 예시의 경우와 5번 예시의 경우 괄호연산자(...)안에 함수를 선언, 함수호출을 위한()를 코드 마지막에 추가해준것만 다른것으로 보이는데 왜 5번에서는 에러가나고 4번에서는 정상적으로 호출되는지 궁금합니다. 1,2번의 예시의 그림처럼 그림을 포함한 설명이 가능하다면 그림포함 설명을 해주셨으면 감사하겠습니다.

1번 예시의 그림

2번 예시의 그림