πŸ”₯ ν•¨μˆ˜

κΈ°μˆ λ…ΈνŠΈ

πŸ”₯ ν•¨μˆ˜

> ν•¨μˆ˜λž€ μ–΄λ–€ μž‘μ—…μ„ μˆ˜ν–‰ν•˜κΈ° μœ„ν•΄ ν•„μš”ν•œ λ¬Έ(statement)λ“€μ˜ 집합을 μ •μ˜ν•œ μ½”λ“œ 블둝

  • μœ μ§€λ³΄μˆ˜μ„±, μž¬μ‚¬μš©μ„±, 높은 가독성
  • ν•¨μˆ˜λŠ” 데이터가 μ•„λ‹Œ ν•˜λ‚˜μ˜ νŠΉλ³„ν•œ 값이고 그것을 ν• λ‹Ήν•  수 μžˆλ‹€.

πŸ’‘ ν•¨μˆ˜μ˜ μ •μ˜μ™€ 호좜

  • ν•¨μˆ˜μ˜ μ •μ˜ 방식 3κ°€μ§€
 1. ν•¨μˆ˜ μ„ μ–Έλ¬Έ
 2. ν•¨μˆ˜ ν‘œν˜„μ‹
 3. Function μƒμ„±μž ν•¨μˆ˜

πŸ’‘ 1. ν•¨μˆ˜ μ„ μ–Έλ¬Έ

jsx
//ν•¨μˆ˜ μ„ μ–Έ
funtion ν•¨μˆ˜λͺ…(λ§€κ°œλ³€μˆ˜=인자, 콀마둜, ꡬ뢄) {
	//ν•¨μˆ˜ λ³Έλ¬Έ
	return λ°˜ν™˜ κ°’;
};

//ν•¨μˆ˜ 호좜
ν•¨μˆ˜λͺ…(λ§€κ°œλ³€μˆ˜);
  • ν•¨μˆ˜λͺ… μƒλž΅ X
  • `return`문으둜 결과값을 λ°˜ν™˜ κ°€λŠ₯ β†’ λ°˜ν™˜κ°’(return value)

πŸ’‘ 2. ν•¨μˆ˜ ν‘œν˜„μ‹

  • ν•¨μˆ˜μ˜ 일급 객체 νŠΉμ„±μ„ μ΄μš©ν•˜μ—¬ ν•¨μˆ˜ λ¦¬ν„°λŸ΄ λ°©μ‹μœΌλ‘œ ν•¨μˆ˜λ₯Ό μ •μ˜ν•˜κ³  λ³€μˆ˜μ— ν• λ‹Ήν•˜λŠ” 방식
jsx
var square = function (number) {
  return number * number;
};
  • ν•¨μˆ˜λͺ… μƒλž΅ κ°€λŠ₯β†’ 읡λͺ… ν•¨μˆ˜
  • ν•¨μˆ˜ ν‘œν˜„μ‹μ—μ„ μ„œλŠ” ν•¨μˆ˜λͺ… μƒλž΅μ΄ μΌλ°˜μ μ΄λ‹€.
jsx
// κΈ°λͺ… ν•¨μˆ˜ ν‘œν˜„μ‹(named function expression)
var foo = function multiply(a, b) {
  return a * b;
};

// 읡λͺ… ν•¨μˆ˜ ν‘œν˜„μ‹(anonymous function expression)
var bar = function (a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
//κΈ°λͺ…ν•¨μˆ˜μ˜ ν•¨μˆ˜λͺ…μœΌλ‘œ 호좜 μ‹œ μ—λŸ¬λœΈ
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

> ‼️ μ£Όμ˜ν• μ  ‼️ > > - ν• λ‹Ήλœ λ³€μˆ˜λŠ” ν•¨μˆ˜λͺ…이 μ•„λ‹ˆλΌ ν• λ‹Ήλœ ν•¨μˆ˜λ₯Ό κ°€λ₯΄ν‚€λŠ” 참쑰값을 μ €μž₯ν•œλ‹€. > - ν•¨μˆ˜κ°€ ν• λ‹Ήλœ λ³€μˆ˜λ₯Ό μ‚¬μš©ν•΄ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ§€ μ•Šκ³  κΈ°λͺ… ν•¨μˆ˜μ˜ ν•¨μˆ˜λͺ…을 μ‚¬μš©ν•΄ ν˜ΈμΆœν•˜κ²Œ 되면 μ—λŸ¬κ°€ λ°œμƒ! > β†’ ν•¨μˆ˜ ν‘œν˜„μ‹μ—μ„œ μ‚¬μš©ν•œ ν•¨μˆ˜λͺ…은 μ™ΈλΆ€ μ½”λ“œμ—μ„œ μ ‘κ·Ό λΆˆκ°€λŠ₯ν•˜κΈ° λ•Œλ¬Έ > - κ·Έλ ‡λ‹€λ©΄ ν•¨μˆ˜ μ„ μ–Έλ¬Έμ—μ„œλŠ”?? > β†’ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진에 μ˜ν•΄ ν•¨μˆ˜ν‘œν˜„μ‹μœΌλ‘œ ν˜•νƒœκ°€ λ³€κ²½λ˜μ—ˆκΈ° λ•Œλ¬Έ! > - κ²°κ΅­ ν•¨μˆ˜ 선언문도 ν•¨μˆ˜ ν‘œν˜„μ‹κ³Ό λ™μΌν•˜κ²Œ ν•¨μˆ˜ λ¦¬ν„°λŸ΄ λ°©μ‹μœΌλ‘œ μ •μ˜λ˜λŠ” 것이닀.

πŸ’‘ 3. \\Function μƒμ„±μž ν•¨μˆ˜\\

  • Function.prototype.constructor ν”„λ‘œνΌν‹°λ‘œ μ ‘κ·Ό
 `new Function(arg1, arg2, ... argN, functionBody)`
  • ν•¨μˆ˜ μ„ μ–Έλ¬Έκ³Ό ν•¨μˆ˜ ν‘œν˜„μ‹μ˜ ν•¨μˆ˜ λ¦¬ν„°λŸ΄ 방식
 β†’ μ΄λŠ” \\\\κ²°κ΅­ λ‚΄μž₯ ν•¨μˆ˜ Function μƒμ„±μž ν•¨μˆ˜λ‘œ ν•¨μˆ˜λ₯Ό μƒμ„±ν•˜λŠ” 것을 λ‹¨μˆœν™”μ‹œν‚¨ short-hand(좕약법)
  • Function μƒμ„±μž ν•¨μˆ˜λ‘œ ν•¨μˆ˜λ₯Ό μƒμ„±ν•˜λŠ” 방식은 일반적으둜 μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€.

---

πŸ”₯ ν•¨μˆ˜λ„ 객체, 근데 이제 일급 객체λ₯Ό 곁듀인….

  • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ ν•¨μˆ˜λŠ” κ°’μœΌλ‘œ μ·¨κΈ‰λœλ‹€.
  • ν•¨μˆ˜κ°€ κ°μ²΄μ΄λ―€λ‘œ, ν•¨μˆ˜λ„ 일반 객체처럼 취급될 수 μžˆλ‹€.

πŸ”† λ©”λͺ¨λ¦¬ μ£Όμ†Œλ₯Ό 'μ°Έμ‘°'ν•œλ‹€.

  • ν•¨μˆ˜μ˜ object도 heap λ©”λͺ¨λ¦¬μ— μ €μž₯
  • ν•¨μˆ˜μ˜ 이름은 ν•¨μˆ˜ μ˜€λΈŒμ νŠΈκ°€ λ‹΄κ²¨μžˆλŠ” λ©”λͺ¨λ¦¬ μ£Όμ†Œλ₯Ό κ°€λ₯΄ν‚€κ³  μžˆλ‹€.(=ν•¨μˆ˜μ˜ 객체 μ£Όμ†Œλ₯Ό κ°€μ§€κ³  μžˆλ‹€.)
  • ν•¨μˆ˜λ₯Ό λ‹€λ₯Έ λ³€μˆ˜μ— ν• λ‹Ήν•˜λ©΄? β†’ 같은 λ©”λͺ¨λ¦¬μ£Όμ†Œ(=객체)λ₯Ό μ°Έμ‘°ν•œλ‹€.
jsx
function add(a, b) {
  return a + b;
}
const sum = add;

console.log(add(1, 1)); //2
console.log(add(1, 1)); //2

πŸ”† μΌκΈ‰ 객체

  • ν•¨μˆ˜ λ˜ν•œ 일반 객체처럼 λͺ¨λ“  연산이 κ°€λŠ₯ν•œ 것을 λ§ν•œλ‹€.
  • ν•¨μˆ˜μ™€ λ‹€λ₯Έ 객체λ₯Ό κ΅¬λΆ„μ§“λŠ” νŠΉμ§•μ€ ν˜ΈμΆœν•  수 μžˆλ‹€λŠ” 것이닀.

> 일급 객체 쑰건 > > 1. 무λͺ…μ˜ λ¦¬ν„°λŸ΄λ‘œ ν‘œν˜„μ΄ κ°€λŠ₯ν•˜λ‹€. > 2. λ³€μˆ˜λ‚˜ 자료 ꡬ쑰(객체, λ°°μ—΄ λ“±)에 μ €μž₯ν•  수 μžˆλ‹€. > 3. ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ— 전달할 수 μžˆλ‹€. > 4. λ°˜ν™˜κ°’μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλ‹€.

πŸ”† λ§€κ°œλ³€μˆ˜(Parameter, 인자)

  • ν•¨μˆ˜μ˜ μž‘μ—… 싀행을 μœ„ν•΄ 좔가적인 정보 λ§€κ°œλ³€μˆ˜λ₯Ό μ§€μ •
  • λ§€κ°œλ³€μˆ˜(parameter)λ₯Ό μ΄μš©ν•˜λ©΄ μž„μ˜μ˜ 데이터λ₯Ό ν•¨μˆ˜ μ•ˆμ— 전달할 수 μžˆλ‹€.
  • λ§€κ°œλ³€μˆ˜λŠ” ν•¨μˆ˜ λ‚΄μ—μ„œ λ³€μˆ˜μ™€ λ™μΌν•˜κ²Œ λ™μž‘

🌼 parameter = λ§€κ°œλ³€μˆ˜ = λ³€μˆ˜ = 인자

jsx
function add(a, b) {
  return a + b;
}
// λ§€κ°œλ³€μˆ˜ a, b
  • ν•¨μˆ˜ 내뢀에 μžˆλŠ” 인자둜써, νŠΉμ •ν•œ κ°’μœΌλ‘œ μ •ν•΄μ Έ μžˆλŠ” 것이 μ•„λ‹ˆλΌ, ν•¨μˆ˜κ°€ ν˜ΈμΆœν•˜λ©΄μ„œ 건넀쀀 argument의 값이 λ³€μˆ˜(variable)에 λ‹΄κΈ°κ²Œ λœλ‹€.
  • λ“€μ–΄μ˜€λŠ” μΈμžκ°€ 맀개체 역할을 ν•˜κΈ° λ•Œλ¬Έμ— λ§€κ°œλ³€μˆ˜λΌκ³ λ„ ν•˜λ©° μ˜λ¬ΈμœΌλ‘œλŠ” parameter

🌼 argument = μ „λ‹¬μΈμž = κ°’ = 인수

jsx
add(1, 2);

// μ „λ‹¬μΈμž=인수 1, 2
  • ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ κ°’을 μ „λ‹¬ν•œλ‹€κ³  ν•΄μ„œ μ „λ‹¬μΈμžλΌκ³ λ„ λΆ€λ₯Έλ‹€.
  • λ§€κ°œλ³€μˆ˜μ™€ 달리 μ „λ‹¬μΈμžλŠ” κ³ μ •λ˜μ–΄ μžˆμ§€ μ•Šκ³ , ν˜ΈμΆœν•  λ•Œλ§ˆλ‹€ μˆ˜μ‹œλ‘œ λ³€ν•˜λŠ” κ°’(Value)이기 λ•Œλ¬Έμ— λ³€μˆ˜κ°€ μ•„λ‹Œ κ°’(Value)으둜 μ •μ˜ν•œλ‹€.

πŸ’¦ \\λ§€κ°œλ³€μˆ˜(parameter, 인자) vs 인수(argument)\\

  • λ§€κ°œλ³€μˆ˜λŠ” ν•¨μˆ˜ μ„ μ–Έ 방식 κ΄„ν˜Έ 사이에 μžˆλŠ” λ³€μˆ˜(μ„ μ–Έ μ‹œ μ“°μ΄λŠ” μš©μ–΄).
  • μΈμˆ˜λŠ” ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œ λ§€κ°œλ³€μˆ˜μ— μ „λ‹¬λ˜λŠ” κ°’(호좜 μ‹œ μ“°μ΄λŠ” μš©μ–΄).
 β†’ 즉, ν•¨μˆ˜ μ„ μ–Έ μ‹œ λ§€κ°œλ³€μˆ˜λ₯Ό λ‚˜μ—΄ν•˜κ²Œ 되고, ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  땐 인수λ₯Ό 전달해 ν˜ΈμΆœν•œλ‹€!
  • ν•¨μˆ˜ 호좜 μ‹œ λ§€κ°œλ³€μˆ˜μ— 인수λ₯Ό μ „λ‹¬ν•˜μ§€ μ•ŠμœΌλ©΄ κ·Έ 값은 `undefined`
  • ν•¨μˆ˜ μ„ μ–Έ μ‹œ λ§€κ°œλ³€μˆ˜μ— 'κΈ°λ³Έκ°’(default value)’ μ§€μ • κ°€λŠ₯
jsx
// λ§€κ°œλ³€μˆ˜μ˜ 기본값은 무쑰건 undefined
// λ§€κ°œλ³€μˆ˜μ˜ μ •λ³΄λŠ” ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ 접근이 κ°€λŠ₯ν•œ arguments 객체에 μ €μž₯됨
// λ§€κ°œλ³€μˆ˜ κΈ°λ³Έκ°’ Default Parameters a = 1, b = 1
function add(a = 1, b = 2) {
  console.log(a);
  console.log(b);
  console.log(arguments);
  console.log(arguments[1]);
  return a + b;
}
add();

/* 좜λ ₯
1
1
[Arguments] {}
undefined
*/

πŸ”† μ½œλ°± ν•¨μˆ˜

  • ν•¨μˆ˜λ₯Ό ν•¨μˆ˜μ˜ 인수둜 μ „λ‹¬ν•˜κ³ , ν•„μš”ν•˜λ‹€λ©΄ 인수둜 μ „λ‹¬ν•œ κ·Έ ν•¨μˆ˜λ₯Ό "λ‚˜μ€‘μ— 호좜(called back)"ν•˜λŠ” 것이 콜백 ν•¨μˆ˜
  • κ³ μ°¨ν•¨μˆ˜
 - 인자둜 ν•¨μˆ˜λ₯Ό λ°›κ±°λ‚˜(μ½œλ°±ν•¨μˆ˜)
 - ν•¨μˆ˜λ₯Ό λ°˜ν™˜ν•˜λŠ” ν•¨μˆ˜

```jsx // μ½œλ°±ν•¨μˆ˜ const boy = name => console.log(`πŸ™‡β€β™‚οΈ Hi ${name}!`); const girl = name => console.log(`πŸ™‡β€β™€οΈ Hi ${name}!`);

// μ „λ‹¬λœ action -> μ½œλ°±ν•¨μˆ˜ // 전달될 λ‹Ήμ‹œμ— ν•¨μˆ˜λ₯Ό λ°”λ‘œ ν˜ΈμΆœν•΄μ„œ λ°˜ν™˜λœ 값을 μ „λ‹¬ν•˜λŠ” 것이 μ•„λ‹ˆλΌ // ν•¨μˆ˜λ₯Ό 가리킀고 μžˆλŠ” ν•¨μˆ˜μ˜ 레퍼런슀(μ°Έμ‘°κ°’) 전달! // λ”°λΌμ„œ ν•¨μˆ˜λŠ” κ³ μ°¨ν•¨μˆ˜μ•ˆμ—μ„œ ν•„μš”ν•œ μˆœκ°„μ— 호좜이 λ‚˜μ€‘μ— λœλ‹€. function welcome(name, action) {

 if (typeof name !== 'string') {
   console.log('wrong name type!');
   return;
 }
 let result = action(name);
 return result;

}

welcome('John', boy); //πŸ™‡β€β™‚οΈ Hi John! welcome('Reira', girl); //πŸ™‡β€β™€οΈ Hi Reira! ```

  • μ½œλ°±ν•¨μˆ˜λŠ” μ™ΈλΆ€λ‘œλΆ€ν„° μ „λ‹¬λ°›μ•„μ„œ λ‚˜μ€‘μ— ν•¨μˆ˜μ•ˆμ—μ„œ ν˜ΈμΆœν•˜λŠ” 것
  • ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ§€ μ•Šκ³ (not `boy()`) ν•¨μˆ˜κ°€ κ°€λ¦¬ν‚€λŠ” μ£Όμ†Œλ₯Ό 전달

πŸ”† λ°˜ν™˜κ°’ return

  • ν•¨μˆ˜λŠ” μžμ‹ μ„ ν˜ΈμΆœν•œ μ½”λ“œμ—κ²Œ μˆ˜ν–‰ν•œ κ²°κ³Όλ₯Ό λ°˜ν™˜(return)ν•  수 μžˆλ‹€. β†’ λ°˜ν™˜κ°’(return value)
  • λ°°μ—΄ 등을 μ΄μš©ν•˜μ—¬ ν•œ λ²ˆμ— μ—¬λŸ¬ 개의 값을 리턴 κ°€λŠ₯
  • `return` μƒλž΅ μ‹œ `undefined` λ°˜ν™˜
  • κ·Έλƒ₯ `return`만 μžˆμ„ 경우, ν•¨μˆ˜κ°€ μ¦‰μ‹œ μ’…λ£Œ
  • 만일 `return` μ΄ν›„에 λ‹€λ₯Έ ꡬ문이 μ‘΄μž¬ν•  경우, κ·Έ ꡬ문은 μ‹€ν–‰λ˜μ§€ μ•ŠλŠ”λ‹€.

---

✨ Post by Bomin Kim [더 μΆ”κ°€λœ λ‚΄μš©μ˜ λΈ”λ‘œκ·Έ κΈ€λ‘œ κ°€κΈ°](https://velog.io/@newjin46/JS-%ED%95%A8%EC%88%98-%EC%9D%BC%EA%B8%89-%EA%B0%9D%EC%B2%B4-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EC%99%80-%EC%9D%B8%EC%88%98-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98)