자바스크립트 함수: 선언, 매개변수, 반환값, 스코프, 호이스팅
프로그램에서 함수는 일련의 작업을 수행하는 코드를 모아둔 블록문입니다. 함수를 사용하면 코드를 재사용할 수 있어 코드를 간결하면서 효율적으로 작성할 수 있습니다. 자바스크립트에서 함수는 function 키워드를 사용하여 정의할 수 있으며, 필요한 곳에서 호출할 수 있습니다. 함수는 입력값을 받을 수 있고, 필요한 경우 출력값을 반환할 수도 있습니다.
이러한 함수의 기본 개념을 이해하고 자바스크립트에서 함수를 사용하는 방법을 알아보겠습니다.
▼ 목차
- 함수를 정의하는 세 가지 방식
- 함수 매개변수와 인자
- 함수의 반환값
- 스코프
- 함수 호이스팅
1. 함수를 정의하는 세 가지 방식
자바스크립트에서는 “함수 선언”, “함수 표현식”, “화살표 함수” 세 가지 방식으로 정의할 수 있습니다.
1. 함수 선언(Declaration)
1. 형식
function 식별자() {}
- function 키워드를 사용하여 함수를 정의합니다.
- 함수 이름이 필요하며, 이름으로 함수를 호출합니다.
2. 사용 예제
// 1. 함수 선언문으로 함수 정의하기
function sum(a, b) {
let result = a + b;
console.log(result); // 30
}
sum(10, 20); // 함수 이름으로 함수 호출
2. 함수 표현식(Expression)
1. 형식
const 변수명 = function() {}; // 익명 함수
const 변수명 = function 식별자() {}; // 네이밍 함수
- 함수를 변수에 할당하여 정의합니다.
- 함수 이름을 생략할 수 있습니다.
- 변수 이름으로 함수를 호출합니다.
2. 사용 예제
// 2. 함수 표현식으로 함수 정의하기
// 1) 익명 함수
const sum = function(a, b) {
let result = a + b;
console.log(result); // 30
};
sum(10, 20); // 변수 이름으로 함수 호출
// 2) 네이밍 함수
const sum2 = function add(a, b) {
let result = a + b;
console.log(result); // 30
};
sum2(10, 20); // 변수 이름으로 함수 호출
add(10, 20); // 에러 발생 Uncaught ReferenceError: add is not defined
☞ 주의사항: 함수 표현식은 함수를 호출할 때 변수 이름으로 호출해야 됩니다.
3. 화살표 함수(Arrow Function)
화살표 함수는 ES6에서 추가된 함수 정의 방법입니다.
1. 형식
() => {};
- “=>” 기호를 사용하여 함수를 정의합니다.
- 함수 이름이 필요하지 않으며, 변수에 할당하여 사용합니다.
- 함수 내용이 한 줄일 경우 중괄호 {}를 생략할 수 있습니다.
2. 사용 예제
// 3. 화살표 함수으로 함수 정의하기
const sum = (a, b) => {
let result = a + b;
console.log(result); // 30
};
sum(10, 20); // 변수 이름으로 함수 호출
// 한 줄인 경우에는 {} 생략할 수 있습니다.
const add = (a, b) => a + b;
2. 함수 매개변수와 인자
함수에는 매개변수(parameter)와 인자(argument) 두 가지가 있습니다. 매개변수는 함수를 정의할 때 사용하고 인자는 함수를 호출할 때 전달되는 값입니다. 함수 내부에서 매개변수를 사용하여 인자를 처리하고 결과를 반환할 수 있습니다.
▼ 사용 예제
// 매개변수(parameter)를 사용하는 함수 예제
function sum(num1, num2) {
console.log(`${num1} + ${num2} = ${num1 + num2}`); // 10 + 20 = 30
}
sum(10, 20); // 함수 호출시 10, 20이라는 인자(argument)가 전달됨
// 매개변수(parameter)를 사용하는 함수 예제
function sum2(num1, num2) {
return num1 + num2;
}
const result = sum2(10, 20); // 함수 호출시 10, 20이라는 인자(argument)가 전달됨
console.log(result); // 결과값 30이 출력됨
3. 함수의 반환값
함수의 반환값은 함수 내부에서 return 키워드를 사용하여 지정한 값을 의미합니다. 함수가 호출되면 함수 내부에서 연산이 수행되고 return 키워드를 만나면 해당 값을 반환하고 함수의 실행이 종료됩니다.
▼ 사용 예제
// 반환값이 없는 함수 예제
function say(name) {
console.log(`안녕하세요, ${name}님!`); // 안녕하세요, BlueShare님!
}
say("BlueShare"); // 함수 호출시 'BlueShare'이라는 인자가 전달됨
// 반환값이 있는 함수 예제
function sum(num1, num2) {
return num1 * num2;
}
const result = sum(10, 20); // 함수 호출시 10, 20이라는 인자가 전달됨
console.log(result); // 결과값 200이 출력됨
4. 스코프
스코프(scope)란 변수가 유효한 범위를 의미합니다. 자바스크립트에서는 함수 스코프(Function Scope)와 블록 스코프(Block Scope) 두 가지 스코프가 있습니다.
1. 함수 스코프(Function Scope)
- 함수 스코프는 함수 내에서 변수를 선언할 경우 해당 변수가 유효한 범위를 함수 내부로 제한하는 스코프입니다.
- 함수 내부에서 선언된 변수는 함수 내부에서만 접근 가능하며 함수 외부에서는 접근할 수 없습니다.
▼ 사용 예제
function sum() {
let num1 = 10; // 함수 스코프 변수
console.log(num1); // 출력: 10
}
sum();
console.log(num1); // ReferenceError: num1 is not defined
let num1 = 10; // 전역 변수
function sum() {
let num1 = 20; // 함수 스코프 변수
console.log(num1); // 출력: 20
}
sum();
console.log(num1); // 출력: 10
2. 블록 스코프(Block Scope)
- 블록 스코프는 중괄호 {}로 둘러싸인 블록 내에서 변수를 선언할 경우 해당 변수가 유효한 범위를 블록 내부로 제한하는 스코프입니다.
- 블록 스코프는 ES6(ES2015)에서 let과 const 키워드가 추가되면서 등장했습니다.
- 블록 내부에서 선언된 변수는 블록 내부와 그 하위 블록에서만 접근 가능하며 블록 외부에서는 접근할 수 없습니다.
▼ 사용 예제
{
let num1 = 10; // 블록 스코프 변수
console.log(num1); // 출력: 10
}
console.log(num1); // ReferenceError: num1 is not defined
let num1 = 10; // 전역 변수
{
let num1 = 20; // 블록 스코프 변수
console.log(num1); // 출력: 20
}
console.log(num1); // 출력: 10
☞ 함수 스코프와 블록 스코프는 변수의 유효 범위를 다르게 제한합니다. 함수 스코프는 함수 내에서 선언된 변수가 함수 내에서만 유효하고 블록 스코프는 중괄호 내에서 선언된 변수가 해당 블록 내에서만 유효합니다.
5. 함수 호이스팅
함수 호이스팅(Function Hoisting)은 함수를 선언하기 전에도 해당 함수를 사용할 수 있는 자바스크립트의 특징입니다. 함수 선언이 스코프 맨 위로 끌어올려지기 때문에 발생하는 현상입니다.
▼ 사용 예제
say(); // 출력: "BlueShare!"
function say() {
console.log("BlueShare!");
}
▼ 사용 예제: 함수 호이스팅은 함수 표현식을 사용할 때에는 동작하지 않습니다.
say(); // TypeError: say is not a function
var say = function() {
console.log("BlueShare!");
};
☞ 함수 호이스팅은 함수 선언문에서만 동작하며 함수 표현식에서는 동작하지 않습니다. 함수 호이스팅은 코드의 가독성을 해치므로 함수를 선언하기 전에 사용하지 않도록 주의해야 됩니다.
자바스크립트 기초 이전 게시물
- 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
- 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
- 자바스크립트 자료형 종류 및 사용 예시
- 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
- 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
- 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
- 자바스크립트 반복문: for, while, do-while등 사용법과 예제
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!