함수

이서림·2024년 7월 30일

JavaScript

목록 보기

17/28

함수

반복적으로 필요한 코드를 하나의 덩어리로 묶어서 필요할 때마다 사용

함수 구조

기본적인 함수의 구조:

// 함수의 선언
function 함수이름(parameter1, parameter2...) { 
    // 실행코드...
    return 반환값
}
함수이름(argument1, argument2...) // 함수의 호출

함수 사용의 장점

재사용성 향상: 중복되는 코드를 줄이고 동일한 코드를 반복해서 사용할 수 있습니다.
가독성 및 유지보수성 향상: 함수의 역할을 쉽게 파악할 수 있고, 수정 및 업데이트가 용이합니다.
구조 파악 용이: 기능 단위로 코드를 분리하여 구조화할 수 있습니다.

함수 특징

매개변수와 인자

function doubleNum(num) { // num은 매개변수(함수와 메서드 입력 변수 이름)
	console.log(num * 2);
}
let arg = 10;

doubleNum(arg); // arg는 인자 (함수와 메서드에 실제 입력되는 값)

인자는 매개변수보다 적거나 많아도 오류가 발생하지 않음

function sum(a, b, c) {
	console.log(`--- ${a} + ${b} + ${c} ---`);
	return a + b + c;
}
console.log(sum(10, 20, 30)); // 60

console.log(sum(10, 20, 50)); // 80
// 인자가 매개변수보다 많을 때

console.log(sum(10, 20, 30, 40, 50)); // 60
// 인자가 매개변수보다 적을 때

console.log(sum(10, 20)); // NaN

인자를 전달받지 못했거나 전달받은 인자가 undefined면 기본값이 할당.

function sum(a, b, c = 10) { //c의 기본값은 10
	console.log(`--- ${a} + ${b} + ${c} ---`);
	return a + b + c;
}
sum(10, 20); //10 + 20 + 10

sum(40, 50, 60); //40 + 50 + 60

반환값

return 키워드를 사용하여 지정함
함수 내부에 return문이 없으면 undefined를 반환

function add(a, b) {
	return a + b;
	console.log(`${a} + ${b} = ${a+b}`);
}
function printAdd(a, b) {

console.log(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> + </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a<span class="token operator">+</span>b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">);

}
console.log('---add---');

let result = add(3, 4);

console.log(</span><span class="token string">result: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>result<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">); // 7
console.log('---printAdd---');

let result2 = printAdd(3, 4);

console.log(</span><span class="token string">result: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>result2<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">); // undefined

함수 선언 방법

함수 선언문과 함수 표현식

// 함수 선언문 (구문으로 선언)
function sum(x, y){
  return x + y;
}
// 함수 표현식 (함수 이름 없이 선언하여 변수에 값으로 할당)

let sumXY = function(x, y) {

return x + y;

};
console.log(sum(10, 20));

console.log(sumXY(10, 20));

화살표 함수

function 키워드를 화살표 기호로 대체해 표현
선언 시 함수 이름을 정할 수 없기 때문에 표현식으로 선언하여 사용

function func1(x, y) {
    return x + y
}
// 위 함수를 화살표 함수로 작성하면 아래와 같습니다.

let func1 = (x, y) => {

return x + y

}
// 함수 내부에 한 줄 표현식만 반환한다면 return 키워드를 생략할 수 있습니다.

let func2 = (x, y) => x + y;

console.log(func2(5, 10));
// 함수의 매개변수가 한 개라면 소괄호를 생략할 수 있습니다.

let func3 = x => x + 10

console.log(func3(10));

즉시 실행 함수

함수를 정의함과 동시에 즉시 실행하는 방법

(function() {
  console.log('이 함수는 만들어지자마자 바로 실행됩니다!');
})();
(function() {

document.querySelector(".btn").addEventListener("click", function(){

console.log('click!')

});

})();