π₯ ν¨μ
π₯ ν¨μ
> ν¨μλ μ΄λ€ μμ μ μννκΈ° μν΄ νμν λ¬Έ(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)