JavaScript - 함수 매개변수

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 자바스크립트 함수 매개변수의 흥미로운 세상으로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서 저는 이 중요한 주제를 안내해 드리겠습니다. 그러니 좋아하는 음료를 손에 들고 편안하게 앉아, 이 코딩 모험을 함께 시작해 보세요!

JavaScript - Function Parameters

함수 매개변수와 인자

초보 단계부터 시작해 보겠습니다. 자바스크립트에서 함수는 특정 작업을 수행하는 작은 기계와 같습니다. 때로는 이 기계들이 제대로 작업을 수행하기 위해 입력이 필요합니다. 이때 매개변수가 등장합니다!

매개변수는 무엇인가요?

매개변수는 함수 선언에 나열된 변수입니다. 이들은 함수가 호출될 때 전달되는 값을 위한 占位符로 작용합니다.

간단한 예제를 보겠습니다:

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

greet("Alice");

이 예제에서 name은 매개변수입니다. 함수를 greet("Alice")로 호출할 때 "Alice"는 인자입니다. 함수는 이 인자를 사용하여 인사를 맞춤화합니다.

여러 개의 매개변수

함수는 여러 개의 매개변수를 가질 수 있습니다. 인사 함수를 확장해 보겠습니다:

function greet(name, time) {
console.log("Good " + time + ", " + name + "!");
}

greet("Bob", "morning");

여기서 우리는 두 개의 매개변수 name과 time을 가지고 있습니다. 함수를 호출할 때 매개변수 정의된 순서대로 두 개의 인자를 제공합니다.

기본 매개변수

occasionally, you might want to set a default value for a parameter. This is useful when you want the function to work even if an argument isn't provided:

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

greet(); // Outputs: Hello, friend!
greet("Charlie"); // Outputs: Hello, Charlie!

이 경우 name에 대해 인자가 제공되지 않으면 기본적으로 "friend"로 설정됩니다.

인자 객체

이제 좀 더 고급 내용에 대해 이야기해 보겠습니다: arguments 객체. 이는 모든 함수 내부에서 사용할 수 있는 로컬 변수입니다. 이는 함수에 전달된 인자의 배열처럼 보이는 객체입니다.

function sumAll() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

console.log(sumAll(1, 2, 3, 4)); // Outputs: 10

이 함수는 임의의 수의 인자를 받아 모두를 더할 수 있습니다. 정말 멋지죠?

값을 통한 인자 전달

자바스크립트에서는 기본 자료형(수, 문자열, 불리언)을 함수에 전달할 때 값으로 전달됩니다. 이는 함수가 값을 복사본으로 받는다는 의미입니다.

function changeValue(x) {
x = 5;
console.log("Inside function: " + x);
}

let num = 10;
console.log("Before function call: " + num);
changeValue(num);
console.log("After function call: " + num);

출력:

Before function call: 10
Inside function: 5
After function call: 10

이와 같이 함수 내에서 x를 변경해도 원래 num 변수는 영향을 받지 않습니다.

참조를 통한 인자 전달

반면에 객체는 참조로 전달됩니다. 이는 함수 내에서 객체를 변경하면 원래 객체도 변경된다는 의미입니다.

function changeName(person) {
person.name = "Jane";
console.log("Inside function: " + person.name);
}

let myPerson = {name: "John"};
console.log("Before function call: " + myPerson.name);
changeName(myPerson);
console.log("After function call: " + myPerson.name);

출력:

Before function call: John
Inside function: Jane
After function call: Jane

여기서 함수 내에서 name 프로퍼티를 변경하면 원래 myPerson 객체도 변경됩니다.

주의사항

이 동작은 강력하면서도 위험할 수 있습니다. 복잡한 데이터 구조를 효율적으로 수정할 수 있지만, 주의를 기울이지 않으면 예상치 못한 부작용이 발생할 수 있습니다. 항상 기본 자료형인지 객체인지 신경 쓰세요!

모든 것을 합쳐서

이제 우리가 배운 여러 개념을 결합한 재미있는 예제로 마무리해 보겠습니다:

function createSuperHero(name, power = "flying", weaknesses) {
let hero = {
name: name,
power: power,
weaknesses: []
};

for (let i = 2; i < arguments.length; i++) {
hero.weaknesses.push(arguments[i]);
}

return hero;
}

let myHero = createSuperHero("Captain Awesome", "super strength", "kryptonite", "public speaking");
console.log(myHero);

이 함수는 슈퍼 헴어 객체를 생성합니다. 기본 매개변수, 인자 객체, 기본 자료형과 객체 모두를 처리합니다. 실행해 보세요!

결론

축하합니다! 함수 매개변수에 대한 자바스크립트 기술을 습득했습니다. 연습이 완벽을 이루는 열쇠라는 점을 기억하고, 이 개념들을 자신의 코드에서 실험해 보세요.

여기서 다루었던 방법들의 빠른 참조 표입니다:

방법	설명
기본 매개변수	`function name(param1, param2) {...}`
기본 매개변수	`function name(param = defaultValue) {...}`
인자 객체	`arguments[i]`를 사용하여 인자에 접근
값을 통한 전달	기본 자료형(수, 문자열, 불리언)에 적용
참조를 통한 전달	객체와 배열에 적용

행복한 코딩을 기원하며, 함수가 항상 버그 없이 실행되길 바랍니다!

Credits: Image by storyset