Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

왕초보 코딩 개발 일지 블로그

[23.05.09] 함수 호이스팅 (함수 선언문과 함수 표현식의 차이) 본문

Javacript

[23.05.09] 함수 호이스팅 (함수 선언문과 함수 표현식의 차이)

아캔두우잇 2023. 5. 9. 16:48
반응형

함수 선언문과 함수 표현식은 자바스크립트에서 함수를 정의하는 두 가지 방법입니다.

함수 선언문은 함수 이름을 지정하고, 함수 몸체를 중괄호({})로 둘러싸서 정의합니다. 함수 선언문은 함수가 정의되기 전에 호출될 수 있습니다.

function func1(파라메터){
    document.write(파라메터,'함수 선언문<br>');
}

반면, 함수 표현식은 변수에 함수를 할당하는 형태로 정의합니다. 함수 표현식은 변수가 선언된 이후에야 호출할 수 있습니다.

const func2 = function(파라메터){
    document.write(파라메터,'함수 표현식<br>'); 
}

두 방식의 가장 큰 차이점은 호이스팅(Hoisting)입니다. 호이스팅은 자바스크립트가 실행될 때, 변수와 함수 선언을 메모리에 <미리> 할당하는 것을 의미합니다.

함수 선언문은 호이스팅이 가능하며, 함수를 정의하기 전에도 호출할 수 있습니다. 함수 표현식은 호이스팅이 불가능하며, 변수에 함수를 할당한 이후에만 호출할 수 있습니다.

따라서, 함수 선언문과 함수 표현식은 선언 방식, 호이스팅 여부, 호출 가능 여부 등에서 차이가 있습니다.

 

 

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 호이스팅 굉장히 중요!! -->
    <script src="ex02hoisting.js"></script>
</body>
</html>

ex02.hoisting.js

// 호이스팅 : 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 현상
// 소스코드 처리 과정 : 평가 -> 실행
// 소스코드 평가 : 모든 선언문(변수, 함수 등) 등록
// 소스코드 실행 (런타임)

// 변수 호이스팅

var goHome = '집에 가고싶다';
console.log(goHome);

// 호이스팅이 되면 선언한 시점과 상관 없이 끌어올려져서 선언된 것처럼 작동한다.

func1('위1:');
// func2('위2:');
    // func2는 함수 표현식으로 정의되었습니다. 함수 표현식으로 정의된 함수는 호이스팅이 되지 않습니다.
    // func2('위2:');는 func2가 정의되기 전에 호출되었으므로 에러가 발생합니다.

// 아래는 함수 선언식
function func1(파라메터){
    document.write(파라메터,'함수 선언문<br>');
}
// 아래는 함수 표현식
const func2 = function(파라메터){
    document.write(파라메터,'함수 표현식<br>');
}

// 함수 선언문은 선언한 시점과 상관 없이 함수를 호출할 수 있지만
// 함수 표현식은 함수 선언 후에 함수를 호출 해야한다.
    // 안그러면 위에 func2처럼 오류나서 뒤에 코드 다 진행안됨.
func1('아래1 :');
func2('아래2 :');



// 아래처럼 함수 선언문으로 정의된 함수는 호이스팅이 되어 해당 함수가 정의되기 전에 호출하더라도 에러가 발생하지 않습니다.
greet1('Charlie1');
function greet1(name) {
    console.log(`Hello, ${name}!`);
  };
greet1('Charlie2')

// 함수 표현식으로 정의된 함수는 호이스팅이 되지 않습니다.
// 그러므로 함수 정의 후 함수 호출하는 순서를 잘 지켜야 한다.

const greet3 = function(name) {
    console.log(`Hello, ${name}!`);
  };
greet3('Jiwon');

const greet2 = (name) => {
  console.log(`Hello, ${name}!`);
};
greet2('Dave');

 

반응형

'Javacript' 카테고리의 다른 글

[23.05.09] 자바스크립트 배열 인덱스 데이터 추가 및 삭제 방법  (0) 2023.05.09
[23.05.09] 자바스크립트 반복문 활용 : 숫자 배열 안에서 최댓값 출력 & 홀수만 출력  (0) 2023.05.09
[23.05.09] if와 switch를 사용하여 자판기 만들기  (0) 2023.05.09
[23.05.08] 배경바꾸는 버튼  (0) 2023.05.08
[23.05.08] 예제 background color  (0) 2023.05.08
'Javacript' Related Articles more