S06L02 - 함수의 매개변수와 인수

html

JavaScript에서 함수 매개변수와 인수 이해하기
목차

소개 .......................................... 1
함수 매개변수 vs. 인수 ... 3
JavaScript의 기본 매개변수 ...... 7
정의되지 않은 매개변수 처리 ........ 12
매개변수 및 인수 사용을 위한 최선의 관행 ....... 17
결론 ............................................. 22
추가 자료 .......................... 24

소개
JavaScript 프로그래밍 영역에서 함수 매개변수와 인수를 이해하는 것은 기본입니다. 함수는 JavaScript 애플리케이션의 기본 구성 요소로, 개발자가 재사용 가능하고 효율적인 코드를 작성할 수 있게 합니다. 이 전자책은 함수 매개변수와 인수의 복잡성을 파고들어 그 역할, 차이점 및 최선의 관행을 설명합니다. 초보자이든 기본 지식을 가진 개발자이든 이 가이드는 프로젝트에서 이러한 개념의 이해와 적용을 향상시킬 것입니다.
매개변수와 인수의 중요성
매개변수와 인수는 함수가 작동하고 데이터와 상호 작용하는 방식을 정의하는 데 필수적입니다. 이들은 함수가 입력을 받아 처리하고 결과를 반환할 수 있게 하여 코드를 동적이고 다재다능하게 만듭니다. 이러한 개념을 숙달하면 코드베이스가 더 읽기 쉽고 유지 관리 가능하며 효율적이 됩니다.
장단점
장점:

재사용성: 함수는 다양한 입력과 함께 재사용할 수 있습니다.
모듈성: 코드는 관리 가능한 단위로 조직됩니다.
유지 관리성: 업데이트 및 디버깅이 더 쉽습니다.

단점:

복잡성: 관리가 잘못되면 버그와 정의되지 않은 동작으로 이어질 수 있습니다.
오버헤드: 매개변수의 과도한 사용은 함수를 번거롭게 만들 수 있습니다.

언제 그리고 어디서 매개변수와 인수를 사용해야 하는가
매개변수와 인수는 함수가 다양한 입력에 기반한 작업을 수행해야 할 때 언제든지 사용되어야 합니다. 특히 데이터 조작, 사용자 입력 처리 및 동적 응답이 필요한 시나리오에서 유용합니다.
비교 표: 매개변수 vs. 인수


특징
매개변수
인수


정의
함수 서명에 정의된 변수.
호출 중에 함수에 전달되는 실제 값.


사용 맥락
함수 정의 내에서 사용됩니다.
함수를 호출할 때 사용됩니다.


예제




		
		
			
			
Java
			
			function greet(name) {}
			
				
					
				
					1
				
						function greet(name) {}
					
				
			
		






		
		
			
			
Java
			
			greet("John");
			
				
					
				
					1
				
						greet("John");
					
				
			
		




유연성
기본 값을 가질 수 있습니다.
호출에 따라 수와 유형이 달라질 수 있습니다.


범위 및 크기 비교 표


특징
JavaScript
다른 언어 (예: Java, C++)


매개변수 유연성
매우 유연하며 정의되지 않은 매개변수를 허용합니다.
엄격하며 종종 정확한 수의 인수를 요구합니다.


기본 매개변수
기본 값을 사용하여 지원됩니다.
제한된 지원을 제공하며 종종 메서드 오버로딩을 요구합니다.


인수 전달
원시 타입은 값으로 전달하고, 객체는 참조로 전달합니다.
타입에 따라 일반적으로 값이나 참조로 전달됩니다.


함수 매개변수 vs. 인수
정의와 차이점
매개변수는 함수 정의에 나열된 변수로, 함수가 작동할 값의 자리 표시자 역할을 합니다. 반면 인수는 함수가 호출될 때 함수에 전달되는 실제 값입니다.
예제:




		
		
			
			
Java
			
			
function greet(name) { // 'name'은 매개변수입니다.
    console.log("Hello, " + name + "!");
}

greet("John"); // "John"은 인수입니다.

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function greet(name) { // 'name'은 매개변수입니다.
    console.log("Hello, " + name + "!");
}
 
greet("John"); // "John"은 인수입니다.
 
					
				
			
		


위 예제에서 name은 greet 함수 내의 매개변수이며, "John"은 함수 호출 시 제공된 인수입니다.
상호 교환성
일상적인 대화에서 매개변수와 인수는 종종 상호 교환적으로 사용되지만, 함수 작동에서는 명확하게 구분된 역할을 합니다. 이 구분을 이해하는 것은 명확하고 효과적인 코드를 작성하는 데 중요합니다.
여러 매개변수 처리
함수는 여러 매개변수를 받을 수 있어 더 복잡한 작업을 수행할 수 있습니다.
예제:




		
		
			
			
Java
			
			
function introduce(name, topic, experience) {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}

introduce("John", "JavaScript", "fun");

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function introduce(name, topic, experience) {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}
 
introduce("John", "JavaScript", "fun");
 
					
				
			
		


기본 매개변수 vs. 정의되지 않은 매개변수
JavaScript는 함수가 기본 매개변수 값을 가질 수 있도록 하여 일부 인수가 제공되지 않아도 함수가 작동하도록 합니다.
기본 매개변수 예제:




		
		
			
			
Java
			
			
function greet(name = "Guest") {
    console.log("Hello, " + name + "!");
}

greet(); // Outputs: Hello, Guest!
greet("John"); // Outputs: Hello, John!

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function greet(name = "Guest") {
    console.log("Hello, " + name + "!");
}
 
greet(); // Outputs: Hello, Guest!
greet("John"); // Outputs: Hello, John!
 
					
				
			
		


정의되지 않은 매개변수 처리:
인수가 제공되지 않으면 기본 값이 없는 매개변수는 undefined가 되어 예상치 못한 동작을 초래할 수 있습니다.
예제:




		
		
			
			
Java
			
			
function greet(name) {
    console.log("Hello, " + name + "!");
}

greet(); // Outputs: Hello, undefined!

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function greet(name) {
    console.log("Hello, " + name + "!");
}
 
greet(); // Outputs: Hello, undefined!
 
					
				
			
		


JavaScript의 기본 매개변수
기본 값 설정
기본 매개변수는 함수 호출 시 인수가 전달되지 않으면 매개변수를 기본 값으로 초기화하는 방법을 제공합니다.
예제:




		
		
			
			
Java
			
			
function greet(name = "Chand", topic = "JavaScript", experience = "fun") {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}

greet(); // Outputs: This is Chand, we are learning JavaScript, and it’s fun.
greet("Ashley"); // Outputs: This is Ashley, we are learning JavaScript, and it’s fun.

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function greet(name = "Chand", topic = "JavaScript", experience = "fun") {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}
 
greet(); // Outputs: This is Chand, we are learning JavaScript, and it’s fun.
greet("Ashley"); // Outputs: This is Ashley, we are learning JavaScript, and it’s fun.
 
					
				
			
		


기본 매개변수의 장점

정의되지 않은 값 방지: 매개변수가 의미 있는 기본 값을 가지도록 합니다.
기능 향상: 함수를 더욱 유연하고 견고하게 만듭니다.
함수 호출 단순화: 매번 모든 인수를 전달할 필요를 줄입니다.

예제 시나리오
사용자를 소개하는 함수를 고려해보세요. 기본 매개변수를 사용하면 일부 정보가 누락된 경우 기본 값을 제공할 수 있습니다.
예제:




		
		
			
			
Java
			
			
function introduceUser(name = "Andy", topic = "React", experience = "great") {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}

introduceUser("John", "Vue"); // Outputs: This is John, we are learning Vue, and it’s great.
introduceUser(); // Outputs: This is Andy, we are learning React, and it’s great.

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function introduceUser(name = "Andy", topic = "React", experience = "great") {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}
 
introduceUser("John", "Vue"); // Outputs: This is John, we are learning Vue, and it’s great.
introduceUser(); // Outputs: This is Andy, we are learning React, and it’s great.
 
					
				
			
		


주석이 포함된 코드 구현




		
		
			
			
Java
			
			
// 기본 매개변수가 있는 함수
function introduceUser(name = "Andy", topic = "React", experience = "great") {
    // 소개 메시지 표시
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}

// 모든 인수와 함께 함수 호출
introduceUser("John", "Vue", "amazing");
// Output: This is John, we are learning Vue, and it’s amazing.

// 일부 인수가 누락된 상태로 함수 호출
introduceUser("John", "Vue");
// Output: This is John, we are learning Vue, and it’s great.

// 인수가 전혀 없는 상태로 함수 호출
introduceUser();
// Output: This is Andy, we are learning React, and it’s great.

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						 
// 기본 매개변수가 있는 함수
function introduceUser(name = "Andy", topic = "React", experience = "great") {
    // 소개 메시지 표시
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}
 
// 모든 인수와 함께 함수 호출
introduceUser("John", "Vue", "amazing");
// Output: This is John, we are learning Vue, and it’s amazing.
 
// 일부 인수가 누락된 상태로 함수 호출
introduceUser("John", "Vue");
// Output: This is John, we are learning Vue, and it’s great.
 
// 인수가 전혀 없는 상태로 함수 호출
introduceUser();
// Output: This is Andy, we are learning React, and it’s great.
 
					
				
			
		


단계별 설명

함수 정의:

introduceUser는 세 개의 매개변수: name, topic, experience로 정의됩니다.
각 매개변수는 기본 값: "Andy", "React", "great"를 가집니다.


함수 호출:

모든 인수가 제공되면 함수는 이를 사용하여 메시지를 구성합니다.
일부 인수가 누락되면 함수는 기본 값으로 대체됩니다.
인수가 제공되지 않으면 모든 매개변수가 기본 값을 취합니다.



정의되지 않은 매개변수 처리
정의되지 않은 값의 문제
함수가 모든 필수 인수 없이 호출되면 누락된 매개변수는 undefined가 됩니다. 이는 제대로 처리되지 않으면 런타임 오류나 예상치 못한 동작을 초래할 수 있습니다.
예제:




		
		
			
			
Java
			
			
function displayInfo(name, age) {
    console.log(`${name} is ${age} years old.`);
}

displayInfo("John"); // Outputs: John is undefined years old.

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function displayInfo(name, age) {
    console.log(`${name} is ${age} years old.`);
}
 
displayInfo("John"); // Outputs: John is undefined years old.
 
					
				
			
		


정의되지 않은 매개변수로부터 함수를 보호하기
undefined 매개변수로 인한 문제를 방지하기 위해 기본 매개변수, 조건문 검사 또는 매개변수 구조 분해를 사용할 수 있습니다.
기본 매개변수 사용
앞서 논의한 바와 같이, 기본 매개변수는 undefined 값을 처리하는 간단한 방법을 제공합니다.
예제:




		
		
			
			
Java
			
			
function displayInfo(name = "Unknown", age = "N/A") {
    console.log(`${name} is ${age} years old.`);
}

displayInfo("John"); // Outputs: John is N/A years old.
displayInfo(); // Outputs: Unknown is N/A years old.

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function displayInfo(name = "Unknown", age = "N/A") {
    console.log(`${name} is ${age} years old.`);
}
 
displayInfo("John"); // Outputs: John is N/A years old.
displayInfo(); // Outputs: Unknown is N/A years old.
 
					
				
			
		


함수 내 조건 검사
또한, 함수 본문 내에서 매개변수가 undefined인지 확인하고 기본 값을 할당할 수 있습니다.
예제:




		
		
			
			
Java
			
			
function displayInfo(name, age) {
    name = name || "Unknown";
    age = age || "N/A";
    console.log(`${name} is ${age} years old.`);
}

displayInfo("John"); // Outputs: John is N/A years old.
displayInfo(); // Outputs: Unknown is N/A years old.

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						 
function displayInfo(name, age) {
    name = name || "Unknown";
    age = age || "N/A";
    console.log(`${name} is ${age} years old.`);
}
 
displayInfo("John"); // Outputs: John is N/A years old.
displayInfo(); // Outputs: Unknown is N/A years old.
 
					
				
			
		


기본 값을 가진 매개변수 구조 분해
객체를 매개변수로 받는 함수의 경우, 기본 값을 가진 구조 분해는 깔끔한 접근 방식을 제공합니다.
예제:




		
		
			
			
Java
			
			
function displayInfo({ name = "Unknown", age = "N/A" } = {}) {
    console.log(`${name} is ${age} years old.`);
}

displayInfo({ name: "John" }); // Outputs: John is N/A years old.
displayInfo(); // Outputs: Unknown is N/A years old.

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function displayInfo({ name = "Unknown", age = "N/A" } = {}) {
    console.log(`${name} is ${age} years old.`);
}
 
displayInfo({ name: "John" }); // Outputs: John is N/A years old.
displayInfo(); // Outputs: Unknown is N/A years old.
 
					
				
			
		


실용적 응용
undefined 매개변수 처리는 함수가 다양한 양의 데이터를 받을 수 있는 실제 애플리케이션에서 매우 중요합니다. 견고한 매개변수 처리는 애플리케이션의 신뢰성과 사용자 경험을 향상시킵니다.
매개변수 및 인수 사용을 위한 최선의 관행
1. 의미 있는 매개변수 이름 사용
매개변수에 대해 설명적인 이름을 선택하여 코드의 가독성과 유지 관리를 용이하게 만드세요.
예제:




		
		
			
			
Java
			
			
function calculateTotal(price, quantity) { ... }

			
				
					
				
					1
2
3
				
						 
function calculateTotal(price, quantity) { ... }
 
					
				
			
		


2. 기본 매개변수 활용
기본 매개변수를 활용하여 누락된 인수를 우아하게 처리하고 대체 값을 제공하세요.
예제:




		
		
			
			
Java
			
			
function greet(name = "Guest") { ... }

			
				
					
				
					1
2
3
				
						 
function greet(name = "Guest") { ... }
 
					
				
			
		


3. 과도한 매개변수 피하기
매개변수의 수를 제한하여 함수를 간단하고 집중되게 유지하세요. 함수가 많은 매개변수를 필요로 한다면, 관련 데이터를 그룹화하기 위해 객체를 사용하는 것을 고려하세요.
예제:




		
		
			
			
Java
			
			
function createUser({ name, age, email }) { ... }

			
				
					
				
					1
2
3
				
						 
function createUser({ name, age, email }) { ... }
 
					
				
			
		


4. 매개변수 검증
매개변수가 예상되는 기준(예: 타입 및 값 범위)을 충족하는지 확인하여 오류를 방지하고 데이터 무결성을 유지하세요.
예제:




		
		
			
			
Java
			
			
function setAge(age) {
    if (typeof age !== 'number' || age &lt; 0) {
        throw new Error("Invalid age provided.");
    }
    // 유효한 나이로 계속 진행
}

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function setAge(age) {
    if (typeof age !== 'number' || age &lt; 0) {
        throw new Error("Invalid age provided.");
    }
    // 유효한 나이로 계속 진행
}
 
					
				
			
		


5. 함수 매개변수 문서화
함수에 대한 명확한 문서를 제공하여 각 매개변수의 목적과 예상 값을 명시하세요.
예제:




		
		
			
			
Java
			
			
/**
 * 총 가격을 계산합니다.
 * @param {number} price - 단일 항목의 가격.
 * @param {number} quantity - 항목의 수.
 * @returns {number} - 총 가격.
 */
function calculateTotal(price, quantity) { ... }

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						 
/**
 * 총 가격을 계산합니다.
 * @param {number} price - 단일 항목의 가격.
 * @param {number} quantity - 항목의 수.
 * @returns {number} - 총 가격.
 */
function calculateTotal(price, quantity) { ... }
 
					
				
			
		


6. 가변 인수를 위한 나머지 매개변수 사용
함수가 불특정 다수의 인수를 받아야 할 때, 나머지 매개변수를 사용하여 효율적으로 처리하세요.
예제:




		
		
			
			
Java
			
			
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

sum(1, 2, 3, 4); // Outputs: 10

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
 
sum(1, 2, 3, 4); // Outputs: 10
 
					
				
			
		


7. 매개변수 순서 유지
함수 호출 시 매개변수의 순서가 정의와 일치하도록 하여 의도치 않은 동작을 방지하세요.
예제:




		
		
			
			
Java
			
			
function registerUser(username, email, password) { ... }

// 올바른
registerUser("john_doe", "john@example.com", "securePassword");

// 잘못된
registerUser("securePassword", "john_doe", "john@example.com"); // 오류 발생

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						 
function registerUser(username, email, password) { ... }
 
// 올바른
registerUser("john_doe", "john@example.com", "securePassword");
 
// 잘못된
registerUser("securePassword", "john_doe", "john@example.com"); // 오류 발생
 
					
				
			
		


8. 가독성 향상을 위한 구조 분해 사용
함수 매개변수에 객체 구조 분해를 사용하여 코드의 명확성을 개선하고 복잡성을 줄이세요.
예제:




		
		
			
			
Java
			
			
function displayUser({ name, email }) {
    console.log(`Name: ${name}, Email: ${email}`);
}

const user = { name: "John", email: "john@example.com" };
displayUser(user);

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function displayUser({ name, email }) {
    console.log(`Name: ${name}, Email: ${email}`);
}
 
const user = { name: "John", email: "john@example.com" };
displayUser(user);
 
					
				
			
		


9. 매개변수 검증 라이브러리 구현
더 큰 프로젝트의 경우, Joi나 Yup과 같은 라이브러리를 사용하여 함수 매개변수를 검증하여 일관성과 신뢰성을 보장하세요.
Joi 사용 예제:




		
		
			
			
Java
			
			
const Joi = require('joi');

const schema = Joi.object({
    name: Joi.string().min(3).required(),
    age: Joi.number().integer().min(0)
});

function createUser(data) {
    const { error, value } = schema.validate(data);
    if (error) {
        throw new Error(error.details[0].message);
    }
    // 검증된 데이터로 계속 진행
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						 
const Joi = require('joi');
 
const schema = Joi.object({
    name: Joi.string().min(3).required(),
    age: Joi.number().integer().min(0)
});
 
function createUser(data) {
    const { error, value } = schema.validate(data);
    if (error) {
        throw new Error(error.details[0].message);
    }
    // 검증된 데이터로 계속 진행
}
 
					
				
			
		


10. 필요할 때 리팩터링
정기적으로 함수를 검토하고 리팩터링하여 매개변수 사용을 최적화하고 성능 및 유지 관리를 향상시키세요.
리팩터링 전:




		
		
			
			
Java
			
			
function updateProfile(name, email, phone, address, city, state, zip) { ... }

			
				
					
				
					1
2
3
				
						 
function updateProfile(name, email, phone, address, city, state, zip) { ... }
 
					
				
			
		


리팩터링 후:




		
		
			
			
Java
			
			
function updateProfile({ name, email, phone, address, city, state, zip }) { ... }

			
				
					
				
					1
2
3
				
						 
function updateProfile({ name, email, phone, address, city, state, zip }) { ... }
 
					
				
			
		


결론
함수 매개변수와 인수를 숙달하는 것은 효율적이고 유지 관리 가능한 JavaScript 코드를 작성하는 데 필수적입니다. 매개변수와 인수의 차이를 이해하고, 기본 값을 활용하며, 정의되지 않은 매개변수를 처리하고, 최선의 관행을 준수함으로써 개발자는 다재다능하고 견고한 함수를 만들 수 있습니다. 이 전자책은 기본 개념, 실용적 구현 및 고급 기술을 다루어 JavaScript 여정에서 여러분을 강화시켰습니다. 이러한 전략을 수용하여 코딩 능력을 향상시키고 견고한 애플리케이션을 구축하세요.
SEO 키워드: JavaScript 함수 매개변수, JavaScript 인수, 기본 매개변수, 정의되지 않은 매개변수 처리, 함수 최선의 관행, JavaScript 프로그래밍, 초보자 JavaScript, JavaScript 튜토리얼, 함수 구문, JavaScript 코딩 팁
추가 자료

MDN Web Docs: Functions
JavaScript Info: Functions
Eloquent JavaScript: Functions
You Don't Know JS: Scope & Closures
W3Schools의 JavaScript 튜토리얼

이 기사는 AI가 생성했습니다.
특징	JavaScript	다른 언어 (예: Java, C++)
매개변수 유연성	매우 유연하며 정의되지 않은 매개변수를 허용합니다.	엄격하며 종종 정확한 수의 인수를 요구합니다.
기본 매개변수	기본 값을 사용하여 지원됩니다.	제한된 지원을 제공하며 종종 메서드 오버로딩을 요구합니다.
인수 전달	원시 타입은 값으로 전달하고, 객체는 참조로 전달합니다.	타입에 따라 일반적으로 값이나 참조로 전달됩니다.