๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Language/Javascript

[Javascript]์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜ ์™„๋ฒฝ ๊ฐ€์ด๋“œ: ์ดˆ๋ณด์ž๋ฅผ ์œ„ํ•œ ํ•„์ˆ˜ ํŒ๊ณผ ์˜ˆ์ œ

by YJ Dev 2024. 6. 17.
728x90
๋ฐ˜์‘ํ˜•
SMALL

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•ต์‹ฌ ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜์ธ ํ•จ์ˆ˜์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜๋Š” ์›น ๊ฐœ๋ฐœ์—์„œ ๋งค์šฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์„ ํ†ตํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๋ถ€ํ„ฐ ๊ณ ๊ธ‰ ์‚ฌ์šฉ๋ฒ•๊นŒ์ง€ ๋‹จ๊ณ„๋ณ„๋กœ ๋ฐฐ์›Œ๋ณด์„ธ์š”.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜


01. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜๋ž€?๐Ÿค”

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜๋Š” ํŠน์ • ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ฝ”๋“œ ๋ธ”๋ก์ž…๋‹ˆ๋‹ค. ํ•จ์ˆ˜๋Š” ์—ฌ๋Ÿฌ ๋ฒˆ ํ˜ธ์ถœ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋งค๋ฒˆ ํ˜ธ์ถœ๋  ๋•Œ๋งˆ๋‹ค ๋™์ผํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ํ•จ์ˆ˜๋Š” ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด๊ณ , ์ฝ”๋“œ๋ฅผ ๋” ๊ตฌ์กฐํ™”ํ•˜๋ฉฐ, ์œ ์ง€๋ณด์ˆ˜๋ฅผ ์‰ฝ๊ฒŒ ํ•ด ์ค๋‹ˆ๋‹ค.


02. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๐Ÿ“œ

1. ํ•จ์ˆ˜ ์„ ์–ธ ๋ฐ ํ‘œํ˜„์‹

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜ ์„ ์–ธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ๋‘ ๊ฐ€์ง€ ์ฃผ์š”ํ•œ ํ•จ์ˆ˜ ์ •์˜ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ด ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์€ ๋ฌธ๋ฒ•์ ์œผ๋กœ๋‚˜ ๋™์ž‘ ๋ฐฉ์‹์—์„œ ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ฐจ์ด์ ์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์€ ํ•จ์ˆ˜๊ฐ€ ์ฝ”๋“œ์—์„œ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ ์„ ์–ธ

ํ•จ์ˆ˜ ์„ ์–ธ์€ function ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•จ์ˆ˜์˜ ์ด๋ฆ„๊ณผ ํ•จ๊ป˜ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ์„ ์–ธ์€ ํ˜ธ์ด์ŠคํŒ…(hoisting)์˜ ์˜ํ–ฅ์„ ๋ฐ›๊ธฐ ๋•Œ๋ฌธ์—, ํ•จ์ˆ˜ ์„ ์–ธ์€ ์ฝ”๋“œ์˜ ์–ด๋””์„œ๋“  ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ํ•จ์ˆ˜ ์„ ์–ธ์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์— ์˜ํ•ด ์ฝ”๋“œ ์‹คํ–‰ ์ „์— ๋ฉ”๋ชจ๋ฆฌ์— ์˜ฌ๋ผ๊ฐ€๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

  • ์˜ˆ์ œ
function greet() {
  console.log("Hello, World!");
}

greet(); // "Hello, World!" ์ถœ๋ ฅ

์ด ์˜ˆ์‹œ์—์„œ๋Š” greet ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋˜์–ด ์žˆ๊ณ , ํ•จ์ˆ˜ ์„ ์–ธ ๋ฐฉ์‹์œผ๋กœ ์ •์˜๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ํ•จ์ˆ˜๋Š” ์ฝ”๋“œ์˜ ์–ด๋Š ๋ถ€๋ถ„์—์„œ๋“  ํ˜ธ์ถœ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


ํ•จ์ˆ˜ ํ‘œํ˜„์‹

ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ํ˜ธ์ด์ŠคํŒ…์˜ ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, ํ•จ์ˆ˜๊ฐ€ ์ •์˜๋œ ์ดํ›„์—๋งŒ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ์ต๋ช… ํ•จ์ˆ˜ ๋˜๋Š” ๊ธฐ๋ช… ํ•จ์ˆ˜๋กœ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ํ•จ์ˆ˜๊ฐ€ ๋ณ€์ˆ˜์— ํ• ๋‹น๋œ ํ›„์—๋งŒ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ํ•จ์ˆ˜ ํ‘œํ˜„์‹์ด ์ •์˜๋  ๋•Œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์— ์˜ฌ๋ผ๊ฐ€๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

  • ์˜ˆ์ œ
const greet = function() {
  console.log("Hello, World!");
};

greet(); // "Hello, World!" ์ถœ๋ ฅ

ํ•จ์ˆ˜ ํ‘œํ˜„์‹๊ณผ ์„ ์–ธ์˜ ์ฐจ์ด์ โญ

1. ํ˜ธ์ด์ŠคํŒ… (Hoisting)

  • ํ•จ์ˆ˜ ์„ ์–ธ: ํ•จ์ˆ˜ ์„ ์–ธ์€ ํ˜ธ์ด์ŠคํŒ… ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํ•จ์ˆ˜๊ฐ€ ์ฝ”๋“œ์˜ ์–ด๋Š ์œ„์น˜์—์„œ๋“  ํ˜ธ์ถœ๋  ์ˆ˜ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
greet(); // "Hello, World!" ์ถœ๋ ฅ

function greet() {
  console.log("Hello, World!");
}
  • ํ•จ์ˆ˜ ํ‘œํ˜„์‹: ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ํ˜ธ์ด์ŠคํŒ… ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ•จ์ˆ˜๊ฐ€ ์ •์˜๋œ ์ดํ›„์—๋งŒ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
greet(); // ReferenceError: greet is not defined

const greet = function() {
  console.log("Hello, World!");
};

greet(); // "Hello, World!" ์ถœ๋ ฅ


2. ๊ตฌ๋ฌธ

  • ํ•จ์ˆ˜ ์„ ์–ธ: function ํ‚ค์›Œ๋“œ์™€ ํ•จ๊ป˜ ํ•จ์ˆ˜ ์ด๋ฆ„์„ ๋ช…์‹œํ•˜์—ฌ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค
function greet() {
  console.log("Hello, World!");
}
  • ํ•จ์ˆ˜ ํ‘œํ˜„์‹: function ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•จ์ˆ˜๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.
const greet = function() {
  console.log("Hello, World!");
};


3. ๋””๋ฒ„๊น…

  • ํ•จ์ˆ˜ ์„ ์–ธ: ํ•จ์ˆ˜ ์ด๋ฆ„์„ ํฌํ•จํ•˜๋ฏ€๋กœ ๋””๋ฒ„๊น… ์‹œ ํ˜ธ์ถœ ์Šคํƒ์—์„œ ํ•จ์ˆ˜ ์ด๋ฆ„์„ ์‰ฝ๊ฒŒ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ต๋ช… ํ•จ์ˆ˜ ํ‘œํ˜„์‹: ํ•จ์ˆ˜ ์ด๋ฆ„์ด ์—†์œผ๋ฏ€๋กœ ๋””๋ฒ„๊น… ์‹œ ํ˜ธ์ถœ ์Šคํƒ์—์„œ ํ•จ์ˆ˜ ์ด๋ฆ„์„ ํ™•์ธํ•˜๊ธฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ฆ„์ด ์žˆ๋Š” ํ•จ์ˆ˜ ํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•˜๋ฉด ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
const greet = function greeting() {
  console.log("Hello, World!");
};

ํ•จ์ˆ˜ ์„ ์–ธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ๊ฐ๊ธฐ ๋‹ค๋ฅธ ์ƒํ™ฉ์—์„œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ์„ ์–ธ์€ ์ฃผ๋กœ ์ „์—ญ ๋ฒ”์œ„๋‚˜ ์ฝ”๋“œ์˜ ์–ด๋Š ๋ถ€๋ถ„์—์„œ๋‚˜ ํ˜ธ์ถœ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ์— ์‚ฌ์šฉ๋˜๊ณ , ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ํŠน์ • ์ฝ”๋“œ ๋ธ”๋ก ๋‚ด์—์„œ ์‚ฌ์šฉ๋˜๋ฉฐ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๋Š” ๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

4. ์‚ฌ์šฉ ์šฉ๋„

  • ํ•จ์ˆ˜ ์„ ์–ธ: ์ฃผ๋กœ ๋…๋ฆฝ์ ์ธ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ํ•จ์ˆ˜ ํ‘œํ˜„์‹: ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋‚˜ ์ผํšŒ์„ฑ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

2. ํ•จ์ˆ˜ ํ˜ธ์ถœ ๋ฐฉ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ•์€ ํ•จ์ˆ˜ ์ด๋ฆ„ ๋’ค์— ๊ด„ํ˜ธ๋ฅผ ๋ถ™์ด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ด„ํ˜ธ ์•ˆ์—๋Š” ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ํ•„์š”๋กœ ํ•˜๋Š” ์ธ์ž๋ฅผ ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function sayHello() {
  console.log("Hello, world!");
}

// ํ•จ์ˆ˜ ํ˜ธ์ถœ
sayHello(); // ์ฝ˜์†”์— "Hello, world!" ์ถœ๋ ฅ

์œ„ ์˜ˆ์ œ์—์„œ sayHello๋ผ๋Š” ์ด๋ฆ„์˜ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ณ , sayHello()๋กœ ํ˜ธ์ถœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.


3. ๋งค๊ฐœ๋ณ€์ˆ˜์™€ ์ธ์ž

๋งค๊ฐœ๋ณ€์ˆ˜ (Parameters)

๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ณ€์ˆ˜๋“ค๋กœ, ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ ์ „๋‹ฌ๋œ ๊ฐ’์„ ๋ฐ›์•„๋“ค์ด๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ์„ ์–ธ๋ถ€์— ๊ด„ํ˜ธ ์•ˆ์— ์ž‘์„ฑ๋ฉ๋‹ˆ๋‹ค.

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

// name์ด ๋งค๊ฐœ๋ณ€์ˆ˜

์ธ์ž (Arguments)

์ธ์ž๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ์ „๋‹ฌํ•˜๋Š” ์‹ค์ œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ์ธ์ž๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ ๊ด„ํ˜ธ ์•ˆ์— ์ž‘์„ฑ๋ฉ๋‹ˆ๋‹ค.

greet("Alice"); // ์ฝ˜์†”์— "Hello, Alice!" ์ถœ๋ ฅ

์œ„ ์˜ˆ์ œ์—์„œ Alice๋Š” greet ํ•จ์ˆ˜์˜ name ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ๋˜๋Š” ์ธ์ž์ž…๋‹ˆ๋‹ค.

์˜ˆ์ œ: ๋งค๊ฐœ๋ณ€์ˆ˜์™€ ์ธ์ž

function add(a, b) {
  return a + b;
}

let result = add(3, 4); // 3๊ณผ 4๊ฐ€ ์ธ์ž๋กœ ์ „๋‹ฌ๋จ
console.log(result); // ์ฝ˜์†”์— 7 ์ถœ๋ ฅ

์—ฌ๊ธฐ์„œ a์™€ b๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜์ด๊ณ , 3๊ณผ 4๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ ์ „๋‹ฌ๋œ ์ธ์ž์ž…๋‹ˆ๋‹ค.


๊ธฐ๋ณธ๊ฐ’ ๋งค๊ฐœ๋ณ€์ˆ˜

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜์— ๊ธฐ๋ณธ๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ๊ฐ’์€ ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ ์ธ์ž๊ฐ€ ์ „๋‹ฌ๋˜์ง€ ์•Š์œผ๋ฉด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

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

greet(); // ์ฝ˜์†”์— "Hello, Guest!" ์ถœ๋ ฅ
greet("Bob"); // ์ฝ˜์†”์— "Hello, Bob!" ์ถœ๋ ฅ

๋‚˜๋จธ์ง€ ๋งค๊ฐœ๋ณ€์ˆ˜ (Rest Parameters)

๋‚˜๋จธ์ง€ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ•จ์ˆ˜์— ์ „๋‹ฌ๋œ ์ธ์ž์˜ ์ˆ˜๊ฐ€ ์ •ํ•ด์ ธ ์žˆ์ง€ ์•Š์„ ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ธ์ž๋ฅผ ๋ฐฐ์—ด๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋จธ์ง€ ๋งค๊ฐœ๋ณ€์ˆ˜๋Š”... ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // ์ฝ˜์†”์— 6 ์ถœ๋ ฅ
console.log(sum(4, 5, 6, 7)); // ์ฝ˜์†”์— 22 ์ถœ๋ ฅ

์ฝœ๋ฐฑ ํ•จ์ˆ˜์™€ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ํ•จ์ˆ˜๋ฅผ ๋‹ค๋ฅธ ํ•จ์ˆ˜์˜ ์ธ์ž๋กœ ์ „๋‹ฌํ•˜๊ฑฐ๋‚˜ ๋ฐ˜ํ™˜๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function processUserInput(callback) {
  const name = prompt('Please enter your name.');
  callback(name);
}

processUserInput((name) => {
  console.log('Hello, ' + name + '!');
});

์ด ์˜ˆ์‹œ๋Š” processUserInput ํ•จ์ˆ˜๊ฐ€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋ฐ›๋Š” ๊ฒƒ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.


03. ๋‹ค์–‘ํ•œ ํ•จ์ˆ˜ ์œ ํ˜•๐Ÿ› ๏ธ

์ต๋ช… ํ•จ์ˆ˜

์ต๋ช… ํ•จ์ˆ˜๋Š” ์ด๋ฆ„์ด ์—†๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ์ฃผ๋กœ ํ•จ์ˆ˜ ํ‘œํ˜„์‹ ๋˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

(function() {
  console.log("This is an anonymous function");
})();

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ES6์—์„œ ๋„์ž…๋œ ๊ฐ„๊ฒฐํ•œ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์ž…๋‹ˆ๋‹ค. function ํ‚ค์›Œ๋“œ ๋Œ€์‹  =>๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ํŠนํžˆ this ๋ฐ”์ธ๋”ฉ์˜ ๋™์ž‘์ด ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

const add = (a, b) => a + b;

console.log(add(2, 3));  // 5 ์ถœ๋ ฅ

const greet = name => {
  console.log(`Hello, ${name}!`);
};

greet('Alice');  // 'Hello, Alice!' ์ถœ๋ ฅ

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ์ฝ”๋“œ๊ฐ€ ๊ฐ„๊ฒฐํ•ด์ง€๊ณ  this๊ฐ€ ์ƒ์œ„ ์Šค์ฝ”ํ”„๋ฅผ ์ฐธ์กฐํ•˜๋Š” ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค.


์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜

์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋Š” ์ •์˜๋˜์ž๋งˆ์ž ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ์ฃผ๋กœ ๋ณ€์ˆ˜๋ฅผ ๋‹ค๋ฅธ ์Šค์ฝ”ํ”„์— ๊ฐ€๋‘์–ด ๊ธ€๋กœ๋ฒŒ ๋„ค์ž„์ŠคํŽ˜์ด์Šค ์˜ค์—ผ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

(function() {
  console.log('This function runs immediately!');
})();

(function(name) {
  console.log(`Hello, ${name}!`);
})('Bob');

์žฌ๊ท€ ํ•จ์ˆ˜

์žฌ๊ท€ ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜๊ฐ€ ์ž๊ธฐ ์ž์‹ ์„ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ์ฃผ๋กœ ๋ฐ˜๋ณต์ ์ธ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ฑฐ๋‚˜ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ์ˆœํšŒํ•  ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5));  // 120 ์ถœ๋ ฅ

์ฝœ๋ฐฑ ํ•จ์ˆ˜

์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ๋‹ค๋ฅธ ํ•จ์ˆ˜์— ์ธ์ž๋กœ ์ „๋‹ฌ๋˜์–ด ํŠน์ • ์ž‘์—…์ด ์™„๋ฃŒ๋œ ํ›„ ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง, ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ ๋“ฑ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched");
  }, 1000);
}
fetchData((message) => {
  console.log(message);
});

์ด ์˜ˆ์‹œ์—์„œ๋Š” fetchData ํ•จ์ˆ˜๊ฐ€ ๋น„๋™๊ธฐ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•œ ํ›„ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉฐ, ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์—์„œ๋„ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๊ฐ€ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.


04. ๊ณ ๊ธ‰ ํ•จ์ˆ˜ ์‚ฌ์šฉ๋ฒ•๐Ÿš€

ํด๋กœ์ €

ํด๋กœ์ €๋Š” ํ•จ์ˆ˜์™€ ๊ทธ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋  ๋‹น์‹œ์˜ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์„ ๊ธฐ์–ตํ•˜๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ํด๋กœ์ €๋Š” ๋‚ด๋ถ€ ํ•จ์ˆ˜๊ฐ€ ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('Outer Variable: ' + outerVariable);
    console.log('Inner Variable: ' + innerVariable);
  };
}

const newFunction = outerFunction('outside');
newFunction('inside');
// Outer Variable: outside
// Inner Variable: inside

์ด ์˜ˆ์‹œ์—์„œ innerFunction์€ outerVariable์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” outerFunction์ด ์‹คํ–‰๋œ ์ดํ›„์—๋„ outerVariable์ด ๊ณ„์†ํ•ด์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.


๊ณ ์ฐจ ํ•จ์ˆ˜

๊ณ ์ฐจ ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋ฐ›๊ฑฐ๋‚˜, ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ (map, filter, reduce ๋“ฑ)์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

function higherOrderFunction(callback) {
  const data = 'Hello, World!';
  return callback(data);
}

function callbackFunction(text) {
  return text.toUpperCase();
}

const result = higherOrderFunction(callbackFunction);
console.log(result);  // 'HELLO, WORLD!'

ํ•จ์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„(Scope)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„์™€ ๋ธ”๋ก ์Šค์ฝ”ํ”„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„๋Š” ๋ณ€์ˆ˜๊ฐ€ ํ•จ์ˆ˜ ๋‚ด์—์„œ ์ •์˜๋  ๋•Œ, ๊ทธ ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ์ „์ฒด์—์„œ ์œ ํšจํ•ฉ๋‹ˆ๋‹ค. ๋ธ”๋ก ์Šค์ฝ”ํ”„๋Š” let๊ณผ const ํ‚ค์›Œ๋“œ๋กœ ์ •์˜๋œ ๋ณ€์ˆ˜๊ฐ€ ํ•ด๋‹น ๋ธ”๋ก ๋‚ด์—์„œ๋งŒ ์œ ํšจํ•ฉ๋‹ˆ๋‹ค.

function functionScope() {
  var functionScoped = 'I am a function scoped variable';
  if (true) {
    let blockScoped = 'I am a block scoped variable';
    console.log(blockScoped);  // 'I am a block scoped variable'
  }
  console.log(functionScoped);  // 'I am a function scoped variable'
  // console.log(blockScoped);  // ReferenceError: blockScoped is not defined
}

functionScope();

this ํ‚ค์›Œ๋“œ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ this ํ‚ค์›Œ๋“œ๋Š” ์‹คํ–‰ ๋ฌธ๋งฅ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๊ฐ’์„ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค. ํ•จ์ˆ˜๊ฐ€ ์–ด๋–ป๊ฒŒ ํ˜ธ์ถœ๋˜์—ˆ๋Š๋ƒ์— ๋”ฐ๋ผ ๊ฒฐ์ •๋ฉ๋‹ˆ๋‹ค.

  • ์ „์—ญ ์ปจํ…์ŠคํŠธ: ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ๋Š” window ๊ฐ์ฒด, Node.js์—์„œ๋Š” global ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.
  • ๋ฉ”์„œ๋“œ ํ˜ธ์ถœ: ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.
  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜: ์ƒˆ๋กœ ์ƒ์„ฑ๋œ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.
  • ํ™”์‚ดํ‘œ ํ•จ์ˆ˜: ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” this ๊ฐ’์„ ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this๋กœ ๊ณ ์ •ํ•ฉ๋‹ˆ๋‹ค.
// ์ „์—ญ ์ปจํ…์ŠคํŠธ
console.log(this);  // ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” window, Node.js์—์„œ๋Š” global

// ๋ฉ”์„œ๋“œ ํ˜ธ์ถœ
const person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

person.greet();  // 'Alice'

// ์ƒ์„ฑ์ž ํ•จ์ˆ˜
function Person(name) {
  this.name = name;
}

const bob = new Person('Bob');
console.log(bob.name);  // 'Bob'

// ํ™”์‚ดํ‘œ ํ•จ์ˆ˜
const arrowFunction = () => {
  console.log(this);
};

arrowFunction();  // ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this ๊ฐ’ (์ „์—ญ ๊ฐ์ฒด)

const obj = {
  method: function() {
    const arrowFunc = () => {
      console.log(this);
    };
    arrowFunc();
  }
};

obj.method();  // obj ๊ฐ์ฒด

05. ์ตœ์ ํ™” ๋ฐ ์„ฑ๋Šฅ ๊ฐœ์„ ๐Ÿ’ก

1. ํ•จ์ˆ˜์˜ ์„ฑ๋Šฅ ํ–ฅ์ƒ ๋ฐฉ๋ฒ•

  • ๋ถˆํ•„์š”ํ•œ ํ•จ์ˆ˜ ํ˜ธ์ถœ ์ตœ์†Œํ™”
  • ๋ฃจํ”„ ๋‚ด ํ•จ์ˆ˜ ํ˜ธ์ถœ ํ”ผํ•˜๊ธฐ

2. ๋ฉ”๋ชจ์ด์ œ์ด์…˜ ๊ธฐ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฉ”๋ชจ์ด์ œ์ด์…˜(Memoization)์€ ๋™์ผํ•œ ๊ณ„์‚ฐ ์ž‘์—…์„ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š๋„๋ก, ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ ๊ฒฐ๊ณผ๋ฅผ ์ €์žฅํ•˜์—ฌ ์žฌ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ด ๊ธฐ๋ฒ•์€ ํŠนํžˆ ์žฌ๊ท€ ํ•จ์ˆ˜๋‚˜ ๋ฐ˜๋ณต์ ์ธ ๊ณ„์‚ฐ ์ž‘์—…์—์„œ ์„ฑ๋Šฅ์„ ํฌ๊ฒŒ ํ–ฅ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฉ”๋ชจ์ด์ œ์ด์…˜์˜ ๊ธฐ๋ณธ ๊ฐœ๋…

๋ฉ”๋ชจ์ด์ œ์ด์…˜์€ ๊ฒฐ๊ณผ๋ฅผ ์ €์žฅํ•  ์บ์‹œ(๋ณดํ†ต ๊ฐ์ฒด ํ˜•ํƒœ)๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ๋งˆ๋‹ค ๋จผ์ € ์บ์‹œ๋ฅผ ํ™•์ธํ•˜๊ณ , ๋™์ผํ•œ ์ž…๋ ฅ ๊ฐ’์ด ์ด๋ฏธ ๊ณ„์‚ฐ๋˜์—ˆ๋‹ค๋ฉด ์ €์žฅ๋œ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๊ณ„์‚ฐ์„ ์ˆ˜ํ–‰ํ•˜๊ณ , ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์บ์‹œ์— ์ €์žฅํ•œ ํ›„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

  • ์˜ˆ์‹œ: ํ”ผ๋ณด๋‚˜์น˜์ˆ˜์—ด

ํ”ผ๋ณด๋‚˜์น˜์ˆ˜์—ด์€ ๊ฐ ์ˆซ์ž๊ฐ€ ์•ž ๋‘ ์ˆซ์ž์˜ ํ•ฉ์ธ ์ˆ˜์—ด์ž…๋‹ˆ๋‹ค. ์žฌ๊ท€ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ณ„์‚ฐ์ด ๊ฐ„๋‹จํ•˜์ง€๋งŒ, ๋™์ผํ•œ ๊ฐ’์„ ๋ฐ˜๋ณตํ•ด์„œ ๊ณ„์‚ฐํ•˜๋Š” ๋น„ํšจ์œจ์ ์ธ ๋ฐฉ์‹์ด ๋ฉ๋‹ˆ๋‹ค. ๋ฉ”๋ชจ์ด์ œ์ด์…˜์„ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋ฅผ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์žฌ๊ท€ ํ•จ์ˆ˜ (๋น„ํšจ์œจ์ ์ธ ๋ฐฉ์‹)
function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));  // 55

์ด ํ•จ์ˆ˜๋Š” fibonacci(10)์„ ๊ณ„์‚ฐํ•˜๊ธฐ ์œ„ํ•ด ๋งŽ์€ ์ค‘๋ณต ํ˜ธ์ถœ์„ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด fibonacci(9)์™€ fibonacci(8)์„ ์—ฌ๋Ÿฌ ๋ฒˆ ๊ณ„์‚ฐํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

  • ๋ฉ”๋ชจ์ด์ œ์ด์…˜์„ ์‚ฌ์šฉํ•œ ํ•จ์ˆ˜ (ํšจ์œจ์ ์ธ ๋ฐฉ์‹)
function memoizedFibonacci() {
  const cache = {};

  return function fib(n) {
    if (n in cache) {
      return cache[n];
    }
    if (n <= 1) {
      return n;
    }
    cache[n] = fib(n - 1) + fib(n - 2);
    return cache[n];
  };
}

const fibonacci = memoizedFibonacci();
console.log(fibonacci(10));  // 55
console.log(fibonacci(50));  // ๋งค์šฐ ๋น ๋ฅด๊ฒŒ ๊ณ„์‚ฐ๋จ

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

๋ฉ”๋ชจ์ด์ œ์ด์…˜์˜ ์žฅ์ 

  • ์„ฑ๋Šฅ ํ–ฅ์ƒ: ์ค‘๋ณต๋œ ๊ณ„์‚ฐ์„ ํ”ผํ•˜๊ณ  ์ด๋ฏธ ๊ณ„์‚ฐ๋œ ๊ฐ’์„ ์žฌ์‚ฌ์šฉํ•˜์—ฌ ์„ฑ๋Šฅ์„ ํฌ๊ฒŒ ํ–ฅ์ƒํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฐ„๋‹จํ•œ ๊ตฌํ˜„: ์บ์‹œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฉ”๋ชจ์ด์ œ์ด์…˜์˜ ๋‹จ์ 

  • ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰ ์ฆ๊ฐ€: ์บ์‹œ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์ด ์ฆ๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, ์ž…๋ ฅ ๊ฐ’์˜ ๋ฒ”์œ„๊ฐ€ ๋„“์„ ๊ฒฝ์šฐ ์บ์‹œ๊ฐ€ ๋งค์šฐ ์ปค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ ์šฉ ๊ฐ€๋Šฅ์„ฑ ์ œํ•œ: ๋ชจ๋“  ํ•จ์ˆ˜์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ํŠนํžˆ, ์ž…๋ ฅ ๊ฐ’์ด ๋งค์šฐ ๋‹ค์–‘ํ•˜๊ฑฐ๋‚˜ ์บ์‹œ์˜ ํšจ์œจ์ด ๋‚ฎ์€ ๊ฒฝ์šฐ์—๋Š” ์˜คํžˆ๋ ค ์„ฑ๋Šฅ์ด ์ €ํ•˜๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3. ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง์„ ํ†ตํ•œ ํšจ์œจ์„ฑ ์ฆ๊ฐ€

  • ์ค‘๋ณต ์ฝ”๋“œ ์ œ๊ฑฐ
  • ํ•จ์ˆ˜ ๋ถ„๋ฆฌ ๋ฐ ๋ชจ๋“ˆํ™”

06. ํ•ต์‹ฌ ๋‚ด์šฉ๐Ÿ‘€

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜

728x90
๋ฐ˜์‘ํ˜•