[JavaScript] 자바스크립트 사용자 정의 함수 function, 호이스팅에 관해서.

JavaScript

 

사용자 정의 함수(function)

하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다.

 

1. 이름만 존재하는 함수

 

함수 선언식

function 함수이름(){	//함수 선언전에 함수를 호출해도 실행가능
    함수가 호출 되었을 때 실행할 문장;
    ...
}

함수이름();


함수이름();

function 함수이름(){	//함수 선언전에 함수를 호출해도 실행가능
    함수가 호출 되었을 때 실행할 문장;
    ...
}

*** 호이스팅

 

*** 호이스팅

자바스크립트 엔진이 script 태그를 만나면 자바스크립트 파일을 먼저 읽고 선언된 함수를 메모리에 저장합니다. 이 과정이 끝나면 코드가 위에서부터 차례대로 실행되며 '함수 선언식' 으로 만들어진 함수의 경우 메모리에 저장되어 있기 때문에 문제없이 실행되지만 '함수 표현식'으로 만든 함수는 아직 값이 할당되기 전이기 때문에 에러가 발생합니다. 함수 선언식으로 선언된 함수는 호이스팅이 된다고 표현합니다.
함수 표현식을 권장하고 있다.

 

함수 표현식    // 권장 사항

const 함수이름 = function(){	// 함수 선언전에 함수를 호출하면 에러
    함수가 호출 되었을 때 실행할 문장;
    ...
}

함수이름();

 

 

2. 매개변수가 있는 함수

 

함수 선언식

function 함수이름(매개변수1, 매개변수2 ...){
    함수가 호출 되었을 때 실행할 문장;
    ...
}

함수이름(값1, 값2 ...);

 

함수 표현식

 

const 함수이름 = function(매개변수1, 매개변수2 ...){
    함수가 호출 되었을 때 실행할 문장;
    ...
}

함수이름(값1, 값2 ...);

 

* 나머지 매개변수

생략 접두사( ... ) 를 사용하여 특정 위치의 인수부터 마지막 인수까지 한 번에 지정할 수 있습니다.

function 함수이름(매개변수1, 매개변수2, ...매개변수3){
    함수가 호출 되었을 때 실행할 문장;
    ...
}

함수이름(값1, 값2, 값3, 값4, 값5, 값6, 값7);

매개변수1 : 값1
매개변수2 : 값2
매개변수3 : 값3, 값4, 값5, 값6, 값7
로 출력된다.

...매개변수3 은 값을 배열로 받게된다.

 

* 디폴트 매개변수

매개변수의 값을 정하지 않으면 대신 기본값을 변수에 저장합니다.

function 함수이름(매개변수1=값1, 매개변수2=값2, ..){
    함수가 호출 되었을 때 실행할 문장;
    ...
}

 

3. return값이 있는 함수

function 함수이름(매개변수1, 매개변수2 ..){
    함수가 호출 되었을 때 실행할 문장;
    ...
    return 값;
}

let 변수 = 함수이름(값1, 값2 ..);

return 값이 변수에 들어간다.

값을 함수로 되돌려 줍니다.

 

* 함수를 만들고 직접 호출하는 함수

(function(){
    함수가 호출 되었을 때 실행할 문장;
    ...
})();