함수
자바스크립트의 함수는 코드를 재사용하고 구조화하는 데 중요한 역할을 합니다. 함수는 일련의 작업을 수행하는 코드 블록입니다. 함수는 호출될 때마다 실행되며, 필요한 매개변수를 받아서 작업을 수행한 후 결과를 반환할 수 있습니다.
함수 선언식과 함수 표현식
함수 선언식 (Function Declaration)
// 함수 선언식
function greet() {
console.log("안녕하세요!");
}
// 함수 호출
greet(); // 안녕하세요! 출력- 함수 선언식은
function키워드를 사용합니다 - 함수 이름, 매개변수 목록, 그리고 중괄호로 둘러싸인 함수 본문으로 구성됩니다.
- 함수 선언식은 호이스팅(Hoisting) 이 발생합니다. 즉, 함수가 선언된 코드 블록의 맨 위로 올라가 변수처럼 취급됩니다. 이는 함수 선언 전에도 함수를 호출할 수 있다는 것을 의미합니다.
greet("진우");
function greet(name) {
console.log("안녕하세요, " + name + "님!");
}함수 greet는 선언하기 전에 호출되고 있습니다. 그럼에도 불구하고 이 코드는 에러 없이 실행되며 "안녕하세요, 진우님!"이라는 메시지를 출력합니다. 이는 함수 선언식이 호이스팅에 의해 스크립트 실행 전에 먼저 메모리에 할당되기 때문입니다. 따라서 함수를 선언하기 전에 호출해도 문제가 없습니다.
함수 표현식 (Function Expression)
// 함수 표현식
var greet = function (name) {
console.log("안녕하세요, " + name + "님!");
};
// 함수 호출
greet("진우"); // 안녕하세요, 진우님! 출력- 함수 표현식은 반드시 함수 이름을 명시적으로 선언할 필요가 없으며, 익명 함수 형태로 사용할 수 있습니다.
- 함수 표현식은 선언된 블록 범위 내에서만 유효합니다. 즉, 함수가 선언된 블록 외부에서는 해당 함수에 접근할 수 없습니다.
- 함수를 변수에 할당하고 해당 변수를 통해 함수를 호출할 수 있습니다.
- 함수 표현식은 호이스팅되지 않습니다. 즉, 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 됩니다. 선언부만 호이스팅하게 됩니다.
// 변수 선언과 함수 할당이 함께 있는 함수 표현식
console.log(myFunc); // undefined
var myFunc = function() {
console.log("함수가 호출되었습니다.");
}; myFunc와 같은 변수에 함수를 할당하려 할 때, myFunc 변수 자체는 호이스팅되지만, 함수는 아직 할당되지 않았기 때문에 해당 변수를 사용하면 undefined가 출력됩니다. 즉, myFunc 변수는 선언되었지만 함수가 아직 할당되지 않아 undefined가 출력되는 것입니다.
간단히 말하면, 변수 선언은 호이스팅되어 변수가 선언되기 전에 사용될 수 있지만, 함수 할당은 호이스팅되지 않아 함수가 정의되기 전에는 사용할 수 없다는 것입니다.
즉시 실행 함수(IIFE)
즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 정의함과 동시에 즉시 호출되는 함수 표현식입니다. 이를 통해 함수 내의 변수들이 전역 스코프를 오염시키지 않고, 모듈화 및 캡슐화를 할 수 있습니다. 주로 함수 스코프를 생성하거나 모듈 패턴을 구현할 때 사용됩니다.
// 함수가 정의되자마자 즉시 실행됩니다.
(function() {
console.log("이 함수는 즉시 실행됩니다!");
})();
// 즉시 실행 함수에 "예시"라는 인수를 전달하여 호출하고 있습니다. 이렇게 하면 함수 내부에서 name 매개변수로 사용됩니다.
(function(name) {
console.log("안녕하세요, " + name + "님!");
})("예시");매개변수와 인수
매개변수(parameters)
매개변수(parameters)는 함수 정의에서 함수가 받을 값의 이름을 나타냅니다. 함수가 호출될 때 이러한 값을 받아들입니다. 매개변수는 함수 본문에서 변수처럼 사용되어 함수 내에서 해당 값을 참조할 수 있습니다.
function add(num1, num2) {
// 매개변수 num1과 num2를 변수처럼 사용하여 값을 더합니다.
var sum = num1 + num2;
console.log(sum);
}
// 예시에서는 num1과 num2를 더하여 sum 변수에 저장하고, sum 변수의 값을 출력합니다.
// 매개변수 num1에 10, num2에 20을 전달하여 함수 호출
add(10, 20); // 30 출력인수(arguments)
인수(arguments)는 함수를 호출할 때 전달되는 값입니다. 이 값은 함수의 매개변수에 할당됩니다. 함수를 호출할 때 전달하는 값의 개수와 함수 정의에서 선언된 매개변수의 개수가 일치해야 합니다.
function add(num1, num2) {
console.log(num1 + num2);
}
// 10과 20이라는 인수를 전달하여 함수 호출
add(10, 20); // 30 출력반환값
함수 반환값은 함수가 수행한 작업의 결과로 생성되는 값입니다. 함수는 return 키워드를 사용하여 값을 반환합니다. 함수가 값을 반환하지 않는 경우에는 undefined가 반환됩니다.
- 함수 내부에서
return키워드를 사용하여 반환값을 지정할 수 있습니다. return문을 만나면 함수는 해당 값을 반환하고 실행을 중단합니다. 따라서return문 이후에 오는 코드는 실행되지 않습니다.
// 두 숫자를 더하는 함수
function add(a, b) {
return a + b;
}
// 함수 호출 결과를 변수에 저장
var result = add(3, 5);
// 나중에 변수를 사용하여 함수 호출 결과에 접근
console.log(result); // 출력: 8
// 변수를 사용하여 함수 호출 결과를 다시 사용
console.log("결과 값은 " + result + "입니다."); // 출력: 결과 값은 8입니다.add 함수는 두 개의 매개변수 a와 b를 받아들여 두 값을 더한 후 반환합니다. 반환된 값은 result 변수에 저장되어 나중에 사용됩니다.
반환값이 없는 경우
함수가 명시적으로 반환값을 지정하지 않으면 undefined가 반환됩니다. 이는 함수 내부에 return문이 없거나 return문이 실행되지 않는 경우에 해당됩니다.
// return 문을 사용하지 않은 함수
function noReturnFunc() {
let a = 5;
let b = 3;
let c = a + b;
}
let result = noReturnFunc(); // 함수를 호출하고 반환값을 result에 저장
console.log(result); // 출력: undefined
// return 문을 사용한 함수
function returnFunc() {
let a = 5;
let b = 3;
return a + b; // a + b의 결과를 반환
}
let resultWithReturn = returnFunc(); // 함수를 호출하고 반환값을 resultWithReturn에 저장
console.log(resultWithReturn); // 출력: 8위 코드에서 볼 수 있듯이, noReturnFunc 함수는 return 문이 없으므로 undefined를 반환합니다. 반면, returnFunc 함수는 return 문을 사용하여 계산 결과를 반환하므로, 해당 함수를 호출하면 계산 결과인 8이 반환됩니다.
