매개변수, 인수, 익명함수, 기명함수, 자기호출함수, 화살표함수

1. 매개변수(Parameters):

• 매개변수는 함수 또는 메서드를 정의할 때 함수가 받을 입력 값을 나타내는 변수입니다.
• 함수를 정의할 때 매개변수를 선언하며, 함수 내에서 이 매개변수를 사용하여 작업을 수행할 수 있습니다.
• 매개변수는 함수의 정의부분에서 변수 이름을 지정하며, 함수를 호출할 때 전달할 값을 받는 역할을 합니다.

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

 

위의 코드에서 name은 함수 greet의 매개변수입니다.

 

2. 인수(Arguments):

• 인수는 함수를 호출할 때 함수에 전달되는 실제 값 또는 데이터를 나타냅니다.
• 함수를 호출할 때, 함수의 매개변수에 해당 인수가 전달되어 함수 내부에서 사용됩니다.
• 함수를 호출할 때 전달하는 데이터의 수와 매개변수의 수는 일치해야 합니다.

greet
(
"Alice"
);

위의 코드에서 "Alice"는 함수 greet에 전달되는 인수입니다.

 

>>>>>>>> 

• 매개변수는 함수 정의에서 입력 값을 받는 변수입니다.
• 인수는 함수 호출 시 전달되는 실제 값 또는 데이터입니다.
• 함수 내에서 매개변수는 인수로 전달된 값에 접근하여 원하는 작업을 수행합니다

 

---

function addNumber(num1, num2, num3) {

  console.log("num1 = " + num1);

  console.log("num1 = " + num2);

  console.log("num1 = " + num3);

  return num1 + num2 + num3;

}

var result = addNumber(100, 5, 10);

console.log("함수결과 " + result);

num1, num2, num3는 addNumber의 매개변수이며

수를 인수하기도 한다.

addNumber(100, 5, 10)

>num1 = 100, num2 = 5, num3 = 10

으로 인수한다. 

function addNumber(num1 = 2, num2 = 5, num3 = 60) {

  console.log("num1 = " + num1);

  console.log("num1 = " + num2);

  console.log("num1 = " + num3);

  return num1 + num2 + num3;

}

var result = addNumber(100, 5, 10);

console.log("함수결과 " + result);

 

위의 addNumber의 매개변수에서 인수를 해도

밑에 있는 매개변수에서 인수를 한 값이 출력된다 (넘겨 받는다 변동된다)

---

👉 익명함수 : 함수선언식이라고 생각하면 됨.

👉 기명함수 : 함수표현식이라고 생각하면 됨.

👉 자기호출함수는 재귀함수처럼 자기 자신을 노출한다.

[출처] [JavaScript] 익명함수, 기명함수, 자기호출함수|작성자 언제나 내편

 

 

익명함수	함수에 이름이 없다(한번만 사용가능)
기명함수	일반적인 함수표현 > funtion ()
자기호출함수(즉시실행함수)	한번만 실행하고 동시에 실행하는 것

 

>>

var greet = function (name) {

  return "Hello, " + name + "!";

};

console.log(greet("Alice"));

var baby = function (go) {

  return "gg," + go + "!!";

};

console.log(baby("min"));

이게 익명함수 이다. 

더 많은 예제를 보자

1. 함수를 콜백 함수로 사용:

function doSomething(callback) {
  console.log("Doing something...");
  callback();
}

doSomething(function() {
  console.log("Callback function is executed.");
});

 

배열의 forEach 메서드와 익명 함수:

var numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number * 2);
});

 

이벤트 핸들러에 익명 함수:

<button id="myButton">Click me</button>

<script>
  var button = document.getElementById("myButton");

  button.addEventListener("click", function() {
    alert("Button clicked!");
  });
</script>

 

위의 코드에서 이벤트 핸들러 함수는 버튼이 클릭될 때 실행되며, 이 함수는 익명 함수로 정의되어 있습니다.

이러한 예제들에서 익명 함수는 특정 상황에 맞게 함수를 정의하고 사용하는데 유용합니다. 함수의 이름을 저장하거나 재사용하지 않아도 되는 경우에 주로 익명 함수를 활용합니다.

 

let 변수 = function() { }이런식으로 함 

---

 

자기 호출 함수

자기호출 함수(Self-Invoking Function)는 JavaScript에서 자동으로 실행되는 함수입니다. 이 함수는 정의되자마자 즉시 실행되며, 주로 코드 블록을 모듈화하거나 스코프를 생성하는 데 사용됩니다. 이러한 함수를 종종 IIFE(Immediately Invoked Function Expression)라고도 부릅니다.

자기호출 함수의 구문은 다음과 같습니다:

(function() {
  // 함수 내부의 코드
})();

 

이 함수는 다음과 같은 특징을 갖습니다:

1. 함수를 정의하자마자 즉시 실행됩니다.
2. 함수 내부의 변수는 함수의 스코프 안에 있으므로, 함수 외부에서 접근할 수 없습니다. 이것은 변수의 캡슐화(Encapsulation)를 지원하며, 전역 스코프에서 변수 충돌을 방지하는 데 도움이 됩니다.

아래는 자기호출 함수의 간단한 사용 예제입니다

(function() {
  var counter = 0;

  // 외부 스코프에서는 counter에 접근할 수 없음
  console.log("Inside the IIFE: counter = " + counter);

  // 다른 함수들이나 코드에서 counter 변수에 영향을 미치지 않음
})();

// IIFE 내부의 counter 변수에 접근할 수 없음
console.log("Outside the IIFE: counter is not defined");

---

화살표 함수

(매개변수) => {함수 내용}

// 일반 함수
function add(x, y) {
  return x + y;
}

// 화살표 함수
const add = (x, y) => x + y;

간결한 문법으로 사용할 수 있다.( 중괄호 없이 함수 본문을 바로 정의 가능)

 

this 바인딩:

• 화살표 함수는 자신의 this를 가지지 않고, 주변 스코프의 this를 그대로 사용합니다.
• 이로 인해 화살표 함수는 주로 콜백 함수로 사용할 때 유용하며, 중첩 함수에서 this의 혼란을 줄입니다.

function Counter() {
  this.count = 0;
  
  setInterval(() => {
    this.count++;
    console.log(this.count);
  }, 1000);
}

const counter = new Counter(); // 화살표 함수를 사용하므로 this가 Counter에 바인딩됨

//화살표 함수 활용하는 법

 

const add = (x, y) => x + y;

console.log(add(5, 6));

 

 

//익명 함수를 사용해서 활용한 화살표 함수

 

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((x) => x * 2);

console.log(doubled); // 출력: [2, 4, 6, 8, 10]

 

나누기로도 해봄

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((x) => x / 2);

console.log(doubled); // 출력:[0.5, 1, 1.5, 2, 2.