자바스크립트 공부하기 - 함수

 

1. 함수란?

함수는 어떤 일을 대신 해주는 로봇이라고 생각하면 돼!
예를 들어, **"계산기"**가 있다고 해보자. 계산기에 숫자를 넣으면 더하거나 빼주지?
자바스크립트에서도 특정한 일을 하는 코드 묶음을 **"함수"**라고 해.

---

2. 함수 만드는 방법 

🍕 피자 가게 이야기로 쉽게 이해하기!

🍽 함수 선언식 (Function Declaration) : "미리 준비된 레시피"
피자 가게에서 레시피를 미리 공책에 적어두면 언제든 피자를 만들 수 있어요!

function makePizza() {  
  console.log("🍕 피자를 만들었어요!");  
}  
makePizza();  // 결과: 🍕 피자를 만들었어요!

• 레시피(함수)를 미리 선언하면 가게(코드) 어디서든 사용할 수 있어요!
• 함수를 위에서 선언하지 않아도 실행할 수 있어요. (호이스팅이 가능해요!)

 

🍳 함수 표현식 (Function Expression) : "즉석에서 만든 요리법"
이번에는 레시피를 바로 적어서 사용하는 경우예요.

const makePizza = function() {  
  console.log("🍕 피자를 만들었어요!");  
};  
makePizza();  // 결과: 🍕 피자를 만들었어요!

 

 

• 변수에 함수를 저장해서 사용해요.
• 요리법(함수)이 정의되기 전에 사용할 수 없어요!

 

 

함수 선언식은 미리 준비된 레시피로, 어디서든 사용할 수 있어요.
함수 표현식은 즉석에서 만든 요리법이라서, 만든 후에만 사용할 수 있어요.

 

📌요약

1. 함수 선언식은 미리 정의해도, 코드 위쪽에서 호출할 수 있어요!
   • 위쪽에서 선언되므로, 코드 어디에서든 호출이 가능해요.
2. 함수 표현식은 정의된 후에만 사용할 수 있어요!
   • 정의된 후에 호출해야 오류가 발생하지 않아요.

---

3. 인수란?

인수(Argument)는 **함수에게 주는 정보(재료)**야!
예를 들어, 너한테 **"김밥 만들어 줘!"**라고 하면 뭐가 필요해?
김, 밥, 참치 같은 **재료(인수)**가 필요하지!

함수도 마찬가지야. 예를 들어, 숫자를 두 개 받아서 더하는 함수를 만들 수 있어!

function add(a, b) {   // a와 b는 "인수" (재료)
  console.log(a + b);  // a + b 계산 후 출력
}

 

Chat GPT : 이제 문제 풀어볼래?
📌 "안녕, [이름]!"을 출력하는 함수를 만들어서 실행해 봐! 🚀

 

function greet(name) { 
console.log("안녕, " + name);
}​

 

 ME : 그럼 이 코드에서 name은 호출 할 때 쓸 수 있는거네 ! 약간 변수랑 느낌이 비슷한 것 같아

 

ChatGPT : 

맞아! 느낌이 비슷해! 😊
name은 함수 안에서만 쓰이는 "임시 변수" 같은 개념이야!

 

 

📌그냥 변수와 인수의 차이점 정리하면
✅ let name = "Jane"; → 이건 변수, 함수 바깥에서도 사용 가능!
✅ function greet(name) { ... } → 여기서 name은 인수(Argument), 함수 안에서만 사용됨!

 

---

4. 매개 변수란 (parameter)?

인수를 전달받아 기능을 수행하는 함수를 만들 때는, 함수 정의 시 parameter를 추가 해야 한다.

 

**Parameter(파라미터)**는 **함수 선언할 때 "자리를 마련하는 것"**이라고 생각하면 돼!

즉, 함수가 어떤 인수를 받을 준비를 하는 자리를 마련하는 것이 parameter야.

function greet(name) {   // 여기에서 'name'이 파라미터!
  console.log("안녕, " + name);
}

여기에서 name은 함수가 받을 수 있는 값을 받기 위한 **"자리"**야.
이 자리는 함수를 호출할 때 인수를 받을 준비를 하는 거지.

 

인수(Argument)파라미터(Parameter)

 

🎯 역할	함수에 실제로 넘겨주는 값	함수 선언할 때 받을 값의 자리
🏗 선언 방법	함수 호출 시 넣는 값	함수 선언 시 함수 괄호 안에 정의되는 이름

 

인수와 파라미터의 차이를 좀 더 쉽게 예시를 들어볼게!

 

함수 선언할 때 파라미터:

function greet(name) {   // 'name'은 파라미터
  console.log("안녕, " + name);
}

 

함수 호출할 때 인수:

greet("Jane");  // 'Jane'은 인수
greet("Tom");   // 'Tom'은 인수

 

함수 선언할 때는 파라미터로 자리를 만들고, 함수를 호출할 때는 인수로 값을 넣어주는 거야! 😊

> 아~ 그러면 파라미터는 선언에 관련이 있고, 인수는 호출에 관련이 있는거네

 

---

파라미터는 원하는 만큼 쉼표로 추가 가능

함수 정의 시에 **매개 변수(파라미터)**는 원하는 만큼 쉼표로 구분해서 추가할 수 있어! 😄

function greet(firstName, lastName) {  // 첫 번째, 두 번째 매개 변수
  console.log("안녕, " + firstName + " " + lastName);
}

 

함수 호출 시:

greet("Jane", "Doe");  // "안녕, Jane Doe" 출력

---

5. 함수값 반환(return)이란 ?

* return 이후에 코드는 실행되지 않음: return이 나오면 함수가 끝나기 때문에 그 이후의 코드는 실행되지 않아!*

 

 

- 함수의 반환값(return)

함수의 반환값은 함수가 결과를 "돌려주는" 값이야.
즉, 함수가 끝나고 나서 그 결과를 밖으로 "보내는" 것이라고 생각하면 돼!
이것은 return 키워드를 사용해서 할 수 있어.

 

- return 사용하기

함수 안에서 **return**을 사용하면, 함수가 끝날 때 어떤 값을 반환할 수 있어.
그리고 이 값은 함수 밖에서 사용할 수 있게 돼!

function add(a, b) {  // 두 숫자를 더하는 함수
  return a + b;  // 더한 값을 반환
}

let result = add(3, 5);  // 함수 호출하고 그 값은 result에 저장
console.log(result);  // 8 출력

> 여기서 add(3, 5) 함수는 a + b 즉, 3 + 5를 더하고 그 값을 **return**으로 반환해.
그리고 그 반환된 값을 result 변수에 저장해서 사용할 수 있어!

 

Q : 아 약간 저장하는 개념 인건가 ?

 

A :

맞아! 저장하는 개념이라고 생각하면 돼! 😊

함수 안에서 **return**을 사용하면, 그 함수는 계산된 결과나 값을 "돌려주고" 그 결과값을 저장할 수 있게 되는 거야!

 

---

 

// 이거랑, 
function test(a,b) {
 return a + b;
}

// 이거 차이
function test (a,b) {
 console.log(a+b)
}

 

 

• return을 사용하는 함수는 값을 반환하여 다른 변수에 저장하거나, 다른 함수에서 그 값을 사용할 수 있습니다.
  • 예: let result = test(3, 4);
• console.log()를 사용하는 함수는 단순히 값을 콘솔에 출력하는 기능만 합니다. 반환값은 없습니다.
  • 예: test(3, 4); 호출 후 결과가 콘솔에 출력됩니다.

---

Return 뒤에 쓸 수 있는 것들

return 뒤에 쓸 수 있는 것들은 정말 다양합니다.

return은 함수의 종료와 결과값을 반환하는 역할을 하기 때문에, 그 뒤에 다양한 데이터 타입을 반환할 수 있습니다.

 

1. 숫자

function add(a, b) {
  return a + b;  // 숫자 반환
}

let result = add(3, 5);  // result는 8

 

 

2. 문자열

function greet(name) {
  return "Hello, " + name + "!";  // 문자열 반환
}

let message = greet("Jane");  // message는 "Hello, Jane!"