๐Ÿ“– ํ•จ์ˆ˜์™€ ์ผ๊ธ‰ ๊ฐ์ฒด

c_yjยท2022๋…„ 6์›” 26์ผ
0

DeepDive

๋ชฉ๋ก ๋ณด๊ธฐ
15/42
post-thumbnail

โœ”๏ธ ์ผ๊ธ‰ ๊ฐ์ฒด๋ž€

    1. ๋ฌด๋ช…์˜ ๋ฆฌํ„ฐ๋Ÿด๋กœ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ๋Ÿฐํƒ€์ž„์— ์ƒ์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค
    1. ๋ณ€์ˆ˜๋‚˜ ์ž๋ฃŒ๊ตฌ์กฐ(๊ฐ์ฒด, ๋ฐฐ์—ด ๋“ฑ)์— ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹ค.
    1. ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.
    1. ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
// 1. ํ•จ์ˆ˜๋Š” ๋ฌด๋ช…์˜ ๋ฆฌํ„ฐ๋Ÿด๋กœ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
// 2. ํ•จ์ˆ˜๋Š” ๋ณ€์ˆ˜์— ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹ค.
// ๋Ÿฐํƒ€์ž„(ํ• ๋‹น ๋‹จ๊ณ„)์— ํ•จ์ˆ˜ ๋ฆฌํ„ฐ๋Ÿด์ด ํ‰๊ฐ€๋˜์–ด ํ•จ์ˆ˜ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ๋ณ€์ˆ˜์— ํ• ๋‹น๋œ๋‹ค.
const increase = function (num) {
  return ++num;
}

const decrease = function (num) {
  return --num;
}

// 2. ํ•จ์ˆ˜๋Š” ๊ฐ์ฒด์— ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹ค.
const auxs = { increase, decrease };

// 3. ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.
// 4. ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
function makeCounter(aux) {
  let num = 0;
  
  return function() {
    num = aux(num);
    return num;
  };
}

// 3. ํ•จ์ˆ˜๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜์—๊ฒŒ ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.
const increaser = makeCounter(auxs.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

//3. ํ•จ์ˆ˜๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜์—๊ฒŒ ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.
const increaser = makeCounter(auxs.decrease);
console.log(decrease()); // -1
console.log(decrease()); // -2

ํ•จ์ˆ˜๋Š” ๊ฐ’์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ณณ์ด๋ผ๋ฉด ์–ด๋””์„œ๋“ ์ง€ ๋ฆฌํ„ฐ๋Ÿด๋กœ ์ •์˜ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ๋Ÿฐํƒ€์ž„์— ํ•จ์ˆ˜ ๊ฐ์ฒด๋กœ ํ‰๊ฐ€๋œ๋‹ค.

์ผ๊ธ‰ ๊ฐ์ฒด๋กœ์„œ ํ•จ์ˆ˜๊ฐ€ ๊ฐ€์ง€๋Š” ๊ฐ€์žฅ ํฐ ํŠน์ง•์€ ์ผ๋ฐ˜ ๊ฐ์ฒด์™€ ๊ฐ™์ด ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

ํ•จ์ˆ˜๋Š” ๊ฐ์ฒด์ด์ง€๋งŒ ์ผ๋ฐ˜ ๊ฐ์ฒด์™€๋Š” ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค. ์ผ๋ฐ˜ ๊ฐ์ฒด๋Š” ํ˜ธ์ถœํ•  ์ˆ˜ ์—†์ง€๋งŒ ํ•จ์ˆ˜ ๊ฐ์ฒด๋Š” ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ•จ์ˆ˜ ๊ฐ์ฒด๋Š” ์ผ๋ฐ˜ ๊ฐ์ฒด์—๋Š” ์—†๋Š” ๊ณ ์œ ์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์†Œ์œ ํ•œ๋‹ค.

โœ”๏ธ ํ•จ์ˆ˜ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ

ํ•จ์ˆ˜ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ arguments, caller, length, name, prototype ํ”„๋กœํผํ‹ฐ๋Š”
๋ชจ๋‘ ์ผ๋ฐ˜ ๊ฐ์ฒด์—๋Š” ์—†๋Š” ํ•จ์ˆ˜ ๊ฐ์ฒด ๊ณ ์œ ์˜ ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ์ด๋‹ค.

โœ๏ธ arguments ํ”„๋กœํผํ‹ฐ

ํ•จ์ˆ˜ ๊ฐ์ฒด์˜ arguments ํ”„๋กœํผํ‹ฐ ๊ฐ’์€ arguments ๊ฐ์ฒด๋‹ค.
arguments ๊ฐ์ฒด๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ ์ „๋‹ฌ๋œ ์ธ์ˆ˜๋“ค์˜ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ์ˆœํšŒ ๊ฐ€๋Šฅํ•œ ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด์ด๋ฉฐ, ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์ง€์—ญ ๋ณ€์ˆ˜์ฒ˜๋Ÿผ ์‚ฌ์šฉ๋œ๋‹ค. ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ๋Š” ์ฐธ์กฐX

function multiply(x, y) {
  console.log(arguments);
  return x * y;
}

// ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์™€ ์ธ์ˆ˜์˜ ๊ฐœ์ˆ˜๊ฐ€ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์ง€ ์•Š๋Š”๋‹ค.
// ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ ๋งค๊ฐœ๋ณ€์ˆ˜ ๊ฐœ์ˆ˜๋งŒํผ ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜์ง€ ์•Š์•„๋„ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค..
console.log(multiply());        // NaN
console.log(multiply(1));       // NaN
console.log(multiply(1, 2));    // 2
console.log(multiply(1, 2, 3)); // 2


arguments ๊ฐ์ฒด๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜ ๊ฐœ์ˆ˜๋ฅผ ํ™•์ •ํ•  ์ˆ˜ ์—†๋Š” ๊ฐ€๋ณ€ ์ธ์ž ํ•จ์ˆ˜ ๊ตฌํ˜„์— ์œ ์šฉํ•˜๋‹ค.

function sum() {
  let res = 0;

  // arguments ๊ฐ์ฒด๋Š” length ํ”„๋กœํผํ‹ฐ๊ฐ€ ์žˆ๋Š” ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด์ด๋ฏ€๋กœ for ๋ฌธ์œผ๋กœ ์ˆœํšŒํ•  ์ˆ˜ ์žˆ๋‹ค.
  for (let i = 0; i < arguments.length; i++) {
    res += arguments[i];
  }

  return res;
}

console.log(sum());        // 0
console.log(sum(1, 2));    // 3
console.log(sum(1, 2, 3)); // 6

ES6์—์„œ๋Š” Rest ํ”ผ๋ผ๋ฏธํ„ฐ๋ฅผ ๋„์ž…ํ•˜์˜€๋‹ค.

// ES6 Rest parameter
function sum(...args){
  return args.reduce((pre,cur) => pre + cur, 0);
}
console.log(sum(1,2)); // 3
console.log(sum(1,2,3,4,5)); // 15

ES6 Rest ํ”ผ๋ผ๋ฏธํ„ฐ์˜ ๋„์ž…์œผ๋กœ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” agrguments ๊ฐ์ฒด์˜ ์ค‘์š”์„ฑ์ด ์ด์ „ ๊ฐ™์ง€๋Š” ์•Š๋‹ค.

โœ๏ธ caller ํ”„๋กœํผํ‹ฐ

caller ํ”„๋กœํผํ‹ฐ๋Š” ECMAScript ์‚ฌ์–‘์— ํฌํ•จ๋˜์ง€ ์•Š์€ ๋น„ํ‘œ์ค€ ํ”„๋กœํผํ‹ฐ๋‹ค.
์ดํ›„ ํ‘œ์ค€ํ™”๋  ์˜ˆ์ •๋„ ์—†๋Š” ํ”„๋กœํผํ‹ฐ์ด๋ฏ€๋กœ ์‚ฌ์šฉํ•˜์ง€ ๋ง๊ณ  ์ฐธ๊ณ ๋กœ๋งŒ ์•Œ์•„๋‘์ž.
ํ•จ์ˆ˜ ๊ฐ์ฒด์˜ caller ํ”„๋กœํผํ‹ฐ๋Š” ํ•จ์ˆ˜ ์ž์‹ ์„ ํ˜ธ์ถœํ•œ ํ•จ์ˆ˜๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

function foo(func) {
  return func();
}

function bar() {
  return 'caller : ' + bar.caller;
}

// ๋ธŒ๋ผ์šฐ์ €์—์„œ์˜ ์‹คํ–‰ํ•œ ๊ฒฐ๊ณผ
console.log(foo(bar)); // caller : function foo(func) {...}
console.log(bar());    // caller : null

โœ๏ธ length ํ”„๋กœํผํ‹ฐ

ํ•จ์ˆ˜ ๊ฐ์ฒด์˜ length ํ”„๋กœํผํ‹ฐ๋Š” ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•  ๋–„ ์„ ์–ธํ•œ ๋งค๊ฐœ๋ณ€์ˆ˜์˜ ๊ฐœ์ˆ˜๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค
arguments ๊ฐ์ฒด์˜ length ํ”„๋กœํผํ‹ฐ์™€ ํ•จ์ˆ˜ ๊ฐ์ฒด์˜ length ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’์€ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ฃผ์˜ํ•ด์•ผ ํ•œ๋‹ค. arguments ๊ฐ์ฒด์˜ length ํ”„๋กœํผํ‹ฐ๋Š” ์ธ์ž์˜ ๊ฐœ์ˆ˜๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ , ํ•จ์ˆ˜ ๊ฐ์ฒด์˜ length ํ”„๋กœํผํ‹ฐ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜์˜ ๊ฐœ์ˆ˜๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

function foo() {}
console.log(foo.length); // 0

function bar(x) {
  return x;
}
console.log(bar.length); // 1

function baz(x, y) {
  return x * y;
}
console.log(baz.length); // 2

โœ๏ธ name ํ”„๋กœํผํ‹ฐ

ํ•จ์ˆ˜ ๊ฐ์ฒด์˜ name ํ”„๋กœํผํ‹ฐ๋Š” ํ•จ์ˆ˜ ์ด๋ฆ„์„ ๋‚˜ํƒ€๋‚ธ๋‹ค. ES6์—์„œ ์ •์‹ ํ‘œ์ค€์ด ๋˜์—ˆ๋‹ค.

// ๊ธฐ๋ช… ํ•จ์ˆ˜ ํ‘œํ˜„์‹
var namedFunc = function foo() {};
console.log(namedFunc.name); // foo

// ์ต๋ช… ํ•จ์ˆ˜ ํ‘œํ˜„์‹
var anonymousFunc = function() {};
// ES5: name ํ”„๋กœํผํ‹ฐ๋Š” ๋นˆ ๋ฌธ์ž์—ด์„ ๊ฐ’์œผ๋กœ ๊ฐ–๋Š”๋‹ค.
// ES6: name ํ”„๋กœํผํ‹ฐ๋Š” ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ๋ณ€์ˆ˜ ์ด๋ฆ„์„ ๊ฐ’์œผ๋กœ ๊ฐ–๋Š”๋‹ค.
console.log(anonymousFunc.name); // anonymousFunc

// ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ(Function declaration)
function bar() {}
console.log(bar.name); // bar

โœ๏ธ __proto__ ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ

๋ชจ๋“  ๊ฐ์ฒด๋Š” [[Prototype]]์ด๋ผ๋Š” ๋‚ด๋ถ€ ์Šฌ๋กฏ์„ ๊ฐ–๋Š”๋‹ค.
__proto__ ํ”„๋กœํผํ‹ฐ๋Š” [[Prototype]] ๋‚ด๋ถ€ ์Šฌ๋กฏ์ด ๊ฐ€๋ฆฌํ‚ค๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ๋‹ค. ๋‚ด๋ถ€ ์Šฌ๋กฏ์—๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†๊ณ  ๊ฐ„์ ‘์ ์ธ ์ ‘๊ทผ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜๋Š” ๊ฒฝ์šฐ์— ํ•œํ•˜์—ฌ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

โœ๏ธ prototype ํ”„๋กœํผํ‹ฐ

prototype ํ”„๋กœํผํ‹ฐ๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜ ๊ฐ์ฒด, ์ฆ‰ constructor๋งŒ์ด ์†Œ์œ ํ•˜๋Š” ํ”„๋กœํผํ‹ฐ๋‹ค.
์ผ๋ฐ˜ ๊ฐ์ฒด์™€ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœํ•  ์ˆ˜ ์—†๋Š” non-constructor์—๋Š” prototype ํ”„๋กœํผํ‹ฐ๊ฐ€ ์—†๋‹ค.
prototype ํ”„๋กœํผํ‹ฐ๋Š” ํ•จ์ˆ˜๊ฐ€ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœ๋  ๋–„ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๊ฐ€ ์ƒ์„ฑํ•  ์ธ์Šคํ„ด์Šค์˜ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

profile
FrontEnd Developer

0๊ฐœ์˜ ๋Œ“๊ธ€