ํ•จ์ˆ˜

RHUK2ยท2021๋…„ 12์›” 24์ผ
0

Javascript

๋ชฉ๋ก ๋ณด๊ธฐ
8/56
post-custom-banner

๐Ÿ“ข 22/07/27 ๋ณต์Šต


๐Ÿ“š Reference


javascript.info, https://ko.javascript.info/function-basics

์ฐธ๊ณ  ์‚ฌ์ดํŠธ์— ๋‚ด์šฉ์„ ๊ฐœ์ธ์ ์œผ๋กœ ๋ณต์Šตํ•˜๊ธฐ ํŽธํ•˜๋„๋ก ์žฌ๊ตฌ์„ฑํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.
์ž์„ธํ•œ ์„ค๋ช…์€ ์ฐธ๊ณ  ์‚ฌ์ดํŠธ๋ฅผ ์‚ดํŽด๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.


์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋‹ค ๋ณด๋ฉด ์œ ์‚ฌํ•œ ๋™์ž‘์„ ํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ์—ฌ๋Ÿฌ ๊ณณ์—์„œ ํ•„์š”ํ•  ๋•Œ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธ์ด๋‚˜ ๋กœ๊ทธ์•„์›ƒ์„ ํ–ˆ์„ ๋•Œ ์•ˆ๋‚ด ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๋™์ž‘ ๊ฐ™์€ ๊ฒฝ์šฐ ๋ง์ด์ฃ .

ํ•จ์ˆ˜๋Š” ํ”„๋กœ๊ทธ๋žจ์„ ๊ตฌ์„ฑํ•˜๋Š” ์ฃผ์š” "๊ตฌ์„ฑ ์š”์†Œ(building block)"์ž…๋‹ˆ๋‹ค. ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๋ฉด ์ค‘๋ณต ์—†์ด ์œ ์‚ฌํ•œ ๋™์ž‘์„ ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


ํ•จ์ˆ˜ ์„ ์–ธ


ํ•จ์ˆ˜ ์„ ์–ธ(function declaration) ๋ฐฉ์‹์„ ์ด์šฉํ•˜๋ฉด ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ ์„ ์–ธ ๋ฐฉ์‹์€ ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function showMessage() {
  alert( "์•ˆ๋…•ํ•˜์„ธ์š”!" );
}

function ํ‚ค์›Œ๋“œ, ํ•จ์ˆ˜ ์ด๋ฆ„, ๊ด„ํ˜ธ๋กœ ๋‘˜๋Ÿฌ์‹ผ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ฐจ๋ก€๋กœ ์จ์ฃผ๋ฉด ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์œ„ ํ•จ์ˆ˜์—๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์—†๋Š”๋ฐ, ๋งŒ์•ฝ ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ ์žˆ๋‹ค๋ฉด ๊ฐ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ฝค๋งˆ๋กœ ๊ตฌ๋ถ„ํ•ด์ค๋‹ˆ๋‹ค. ์ด์–ด์„œ ํ•จ์ˆ˜๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์ฝ”๋“œ์˜ ๋ชจ์ž„์ธ "ํ•จ์ˆ˜ ๋ณธ๋ฌธ(body)"์„ ์ค‘๊ด„ํ˜ธ๋กœ ๊ฐ์‹ธ ๋ถ™์—ฌ์ค์‹œ๋‹ค.

function name(parameters) {
  ...ํ•จ์ˆ˜ ๋ณธ๋ฌธ...
}

์ƒˆ๋กญ๊ฒŒ ์ •์˜ํ•œ ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜ ์ด๋ฆ„ ์˜†์— ๊ด„ํ˜ธ๋ฅผ ๋ถ™์—ฌ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. showMessage()๊ฐ™์ด ๋ง์ด์ฃ .

function showMessage() {
  alert( "์•ˆ๋…•ํ•˜์„ธ์š”!" );
}

showMessage();
showMessage();

showMessage()๋กœ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ํ•จ์ˆ˜ ๋ณธ๋ฌธ์ด ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. ์œ„ ์˜ˆ์‹œ์—์„  showMessage๋ฅผ ๋‘ ๋ฒˆ ํ˜ธ์ถœํ–ˆ์œผ๋ฏ€๋กœ ์–ผ๋Ÿฟ ์ฐฝ์ด ๋‘ ๋ฒˆ ๋œน๋‹ˆ๋‹ค.

ํ•จ์ˆ˜์˜ ์ฃผ์š” ์šฉ๋„ ์ค‘ ํ•˜๋‚˜๋Š” ์ค‘๋ณต ์ฝ”๋“œ ํ”ผํ•˜๊ธฐ์ž…๋‹ˆ๋‹ค. ์œ„ ์˜ˆ์‹œ๋ฅผ ํ†ตํ•ด ์ด๋ฅผ ํ™•์ธํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค.

์–ผ๋Ÿฟ ์ฐฝ์— ๋ณด์—ฌ์ค„ ๋ฉ”์‹œ์ง€๋ฅผ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ์‹ ์ž์ฒด๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, ํ•จ์ˆ˜ ๋ณธ๋ฌธ ์ค‘ ์ถœ๋ ฅ์— ๊ด€์—ฌํ•˜๋Š” ์ฝ”๋“œ ๋”ฑ ํ•˜๋‚˜๋งŒ ์ˆ˜์ •ํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.


์ง€์—ญ ๋ณ€์ˆ˜


ํ•จ์ˆ˜ ๋‚ด์—์„œ ์„ ์–ธํ•œ ๋ณ€์ˆ˜์ธ ์ง€์—ญ ๋ณ€์ˆ˜(local variable)๋Š” ํ•จ์ˆ˜ ์•ˆ์—์„œ๋งŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function showMessage() {
  let message = "์•ˆ๋…•ํ•˜์„ธ์š”!"; // ์ง€์—ญ ๋ณ€์ˆ˜

  alert( message );
}

showMessage(); // ์•ˆ๋…•ํ•˜์„ธ์š”!

alert( message ); // ReferenceError: message is not defined (message๋Š” ํ•จ์ˆ˜ ๋‚ด ์ง€์—ญ ๋ณ€์ˆ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.)

์™ธ๋ถ€ ๋ณ€์ˆ˜


ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ํ•จ์ˆ˜ ์™ธ๋ถ€์˜ ๋ณ€์ˆ˜์ธ ์™ธ๋ถ€ ๋ณ€์ˆ˜(outer variable)์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

let userName = "John";

function showMessage() {
  let message = "Hello, " + userName;
  alert(message);
}

showMessage(); // Hello, John

ํ•จ์ˆ˜์—์„  ์™ธ๋ถ€ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ์ˆ˜์ •๋„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

let userName = "John";

function showMessage() {
  userName = "Bob"; // (1) ์™ธ๋ถ€ ๋ณ€์ˆ˜๋ฅผ ์ˆ˜์ •ํ•จ

  let message = "Hello, " + userName;
  alert(message);
}

alert( userName ); // ํ•จ์ˆ˜ ํ˜ธ์ถœ ์ „์ด๋ฏ€๋กœ John ์ด ์ถœ๋ ฅ๋จ

showMessage();

alert( userName ); // ํ•จ์ˆ˜์— ์˜ํ•ด Bob ์œผ๋กœ ๊ฐ’์ด ๋ฐ”๋€œ

์™ธ๋ถ€ ๋ณ€์ˆ˜๋Š” ์ง€์—ญ ๋ณ€์ˆ˜๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์™ธ๋ถ€ ๋ณ€์ˆ˜์™€ ๋™์ผํ•œ ์ด๋ฆ„์„ ๊ฐ€์ง„ ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋˜์—ˆ๋‹ค๋ฉด, ๋‚ด๋ถ€ ๋ณ€์ˆ˜๋Š” ์™ธ๋ถ€ ๋ณ€์ˆ˜๋ฅผ ๊ฐ€๋ฆฝ๋‹ˆ๋‹ค.

let userName = "John";

function showMessage() {
  let userName = "Bob"; // ๊ฐ™์€ ์ด๋ฆ„์„ ๊ฐ€์ง„ ์ง€์—ญ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค.

  let message = "Hello, " + userName; // Bob
  alert(message);
}

// ํ•จ์ˆ˜๋Š” ๋‚ด๋ถ€ ๋ณ€์ˆ˜์ธ userName๋งŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค,
showMessage();

alert( userName ); // ํ•จ์ˆ˜๋Š” ์™ธ๋ถ€ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๊ณ , John์ด ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.

๐Ÿ”ฅ ์ „์—ญ ๋ณ€์ˆ˜

์œ„ ์˜ˆ์‹œ์˜ userName์ฒ˜๋Ÿผ, ํ•จ์ˆ˜ ์™ธ๋ถ€์— ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ์ „์—ญ ๋ณ€์ˆ˜(global variable) ๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค.

์ „์—ญ ๋ณ€์ˆ˜๋Š” ๊ฐ™์€ ์ด๋ฆ„์„ ๊ฐ€์ง„ ์ง€์—ญ ๋ณ€์ˆ˜์— ์˜ํ•ด ๊ฐ€๋ ค์ง€์ง€๋งŒ ์•Š๋Š”๋‹ค๋ฉด ๋ชจ๋“  ํ•จ์ˆ˜์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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


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


๋งค๊ฐœ๋ณ€์ˆ˜(parameter)๋ฅผ ์ด์šฉํ•˜๋ฉด ์ž„์˜์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ•จ์ˆ˜ ์•ˆ์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜ ์˜ˆ์‹œ์—์„œ ํ•จ์ˆ˜ showMessage๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜ from ๊ณผ text๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

function showMessage(from, text) { // ๋งค๊ฐœ๋ณ€์ˆ˜: from, text
  alert(from + ": " + text);
}

showMessage("Ann", "Hello!"); // Ann: Hello! (*)
showMessage("Ann", "What's up?"); // Ann: What's up? (**)

(*), (**)๋กœ ํ‘œ์‹œํ•œ ์ค„์—์„œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด, ํ•จ์ˆ˜์— ์ „๋‹ฌ๋œ ์ธ์ž(argument)๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜ from๊ณผ text์— ๋ณต์‚ฌ๋ฉ๋‹ˆ๋‹ค. ๐Ÿ’ฅ ๊ทธ ํ›„ ํ•จ์ˆ˜๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜์— ๋ณต์‚ฌ๋œ ๊ฐ’์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์‹œ ํ•˜๋‚˜๋ฅผ ๋” ์‚ดํŽด๋ด…์‹œ๋‹ค. ์ „์—ญ ๋ณ€์ˆ˜ from์ด ์žˆ๊ณ , ์ด ๋ณ€์ˆ˜๋ฅผ ํ•จ์ˆ˜์— ์ „๋‹ฌํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜๊ฐ€ from์„ ๋ณ€๊ฒฝํ•˜์ง€๋งŒ, ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ์™ธ๋ถ€ ๋ณ€์ˆ˜ from์— ๋ฐ˜์˜๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜๋Š” ์–ธ์ œ๋‚˜ ๋ณต์‚ฌ๋œ ๊ฐ’์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

function showMessage(from, text) {

  from = "*" + from + "*"; // "from"์„ ์ข€ ๋” ๋ฉ‹์ง€๊ฒŒ ๊พธ๋ฉฐ์ค๋‹ˆ๋‹ค.

  alert( from + ": " + text );
}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// ํ•จ์ˆ˜๋Š” ๋ณต์‚ฌ๋œ ๊ฐ’์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ”๊นฅ์˜ "from"์€ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
alert( from ); // Ann

๊ธฐ๋ณธ๊ฐ’


๋งค๊ฐœ๋ณ€์ˆ˜์— ๊ฐ’์„ ์ „๋‹ฌํ•˜์ง€ ์•Š์œผ๋ฉด ๊ทธ ๊ฐ’์€ undefined๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

์˜ˆ์‹œ๋ฅผ ํ†ตํ•ด ์ด์— ๋Œ€ํ•ด ์•Œ์•„๋ด…์‹œ๋‹ค. ์œ„์—์„œ ์ •์˜ํ•œ ํ•จ์ˆ˜ showMessage(from, text)๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ 2๊ฐœ์ง€๋งŒ, ์•„๋ž˜์™€ ๊ฐ™์ด ์ธ์ž๋ฅผ ํ•˜๋‚˜๋งŒ ๋„ฃ์–ด์„œ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

showMessage("Ann");

์ด๋ ‡๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋„ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‘ ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜์— ๊ฐ’์„ ์ „๋‹ฌํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— text์—” undefiend๊ฐ€ ํ• ๋‹น๋  ๋ฟ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์—๋Ÿฌ ์—†์ด "Ann: undefined"๊ฐ€ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.

๋งค๊ฐœ๋ณ€์ˆ˜์— ๊ฐ’์„ ์ „๋‹ฌํ•˜์ง€ ์•Š์•„๋„ ๊ทธ ๊ฐ’์ด undefined๊ฐ€ ๋˜์ง€ ์•Š๊ฒŒ ํ•˜๋ ค๋ฉด "๊ธฐ๋ณธ๊ฐ’(default value)"์„ ์„ค์ •ํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋งค๊ฐœ๋ณ€์ˆ˜ ์˜ค๋ฅธ์ชฝ์— =์„ ๋ถ™์ด๊ณ  undefined ๋Œ€์‹  ์„ค์ •ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ธฐ๋ณธ๊ฐ’์„ ์จ์ฃผ๋ฉด ๋˜์ฃ .

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

์ด์   text๊ฐ€ ๊ฐ’์„ ์ „๋‹ฌ๋ฐ›์ง€ ๋ชปํ•ด๋„ undefined๋Œ€์‹  ๊ธฐ๋ณธ๊ฐ’ "no text given"์ด ํ• ๋‹น๋ฉ๋‹ˆ๋‹ค.

์œ„ ์˜ˆ์‹œ์—์„  ๋ฌธ์ž์—ด "no text given"์„ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์•„๋ž˜์™€ ๊ฐ™์ด ๋ณต์žกํ•œ ํ‘œํ˜„์‹๋„ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์„ค์ •ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

function showMessage(from, text = anotherFunction()) {
  // anotherFunction()์€ text๊ฐ’์ด ์—†์„ ๋•Œ๋งŒ ํ˜ธ์ถœ๋จ
  // anotherFunction()์˜ ๋ฐ˜ํ™˜ ๊ฐ’์ด text์˜ ๊ฐ’์ด ๋จ
}

๐Ÿ”ฅ ๋งค๊ฐœ๋ณ€์ˆ˜ ๊ธฐ๋ณธ๊ฐ’ ํ‰๊ฐ€ ์‹œ์ 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„  ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ๋งˆ๋‹ค ๋งค๊ฐœ๋ณ€์ˆ˜ ๊ธฐ๋ณธ๊ฐ’์„ ํ‰๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๋ฌผ๋ก  ํ•ด๋‹นํ•˜๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์—†์„ ๋•Œ๋งŒ ๊ธฐ๋ณธ๊ฐ’์„ ํ‰๊ฐ€ํ•˜์ฃ .

์œ„ ์˜ˆ์‹œ์—์„  ๋งค๊ฐœ๋ณ€์ˆ˜ text์— ๊ฐ’์ด ์—†๋Š” ๊ฒฝ์šฐ showMessage()๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ๋งˆ๋‹ค anotherFunction()์ด ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.


๐Ÿ”ฅ ๋งค๊ฐœ๋ณ€์ˆ˜ ๊ธฐ๋ณธ๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•

๊ฐ€๋”์€ ํ•จ์ˆ˜ ์„ ์–ธ๋ถ€์—์„œ ๋งค๊ฐœ๋ณ€์ˆ˜ ๊ธฐ๋ณธ๊ฐ’์„ ์„ค์ •ํ•˜๋Š” ๊ฒƒ ๋Œ€์‹  ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ๋„์ค‘์— ๊ธฐ๋ณธ๊ฐ’์„ ์„ค์ •ํ•˜๋Š” ๊ฒŒ ๋…ผ๋ฆฌ์— ๋งž๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ธฐ๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

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

function showMessage(text) {
  if (text === undefined) {
    text = "๋นˆ ๋ฌธ์ž์—ด";
  }

  alert(text);
}

showMessage(); // ๋นˆ ๋ฌธ์ž์—ด

์ด๋ ‡๊ฒŒ if๋ฌธ์„ ์“ฐ๋Š” ๊ฒƒ ๋Œ€์‹  ๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž ||๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

// ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์ƒ๋žต๋˜์—ˆ๊ฑฐ๋‚˜ ๋นˆ ๋ฌธ์ž์—ด("")์ด ๋„˜์–ด์˜ค๋ฉด ๋ณ€์ˆ˜์— "๋นˆ ๋ฌธ์ž์—ด"์ด ํ• ๋‹น๋ฉ๋‹ˆ๋‹ค.
function showMessage(text) {
  text = text || "๋นˆ ๋ฌธ์ž์—ด";
  ...
}

์ด ์™ธ์—๋„ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ์ง€์›ํ•˜๋Š” nullish ๋ณ‘ํ•ฉ ์—ฐ์‚ฐ์ž(nullish coalescing operator) ??๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด 0์ฒ˜๋Ÿผ falsy๋กœ ํ‰๊ฐ€๋˜๋Š” ๊ฐ’๋“ค์„ ์ผ๋ฐ˜ ๊ฐ’์ฒ˜๋Ÿผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์Šต๋‹ˆ๋‹ค.

// ๋งค๊ฐœ๋ณ€์ˆ˜ "count"๊ฐ€ ๋„˜์–ด์˜ค์ง€ ์•Š์œผ๋ฉด "unknown"์„ ์ถœ๋ ฅํ•ด์ฃผ๋Š” ํ•จ์ˆ˜
function showCount(count) {
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown

๋ฐ˜ํ™˜ ๊ฐ’


ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ–ˆ์„ ๋•Œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ ๊ทธ๊ณณ์— ํŠน์ • ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋•Œ ์ด ํŠน์ • ๊ฐ’์„ ๋ฐ˜ํ™˜ ๊ฐ’(return value)์ด๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค.

๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฐ›์€ ๋‘ ๊ฐ’์„ ๋”ํ•ด์ฃผ๋Š” ๊ฐ„๋‹จํ•œ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ๋ฐ˜ํ™˜ ๊ฐ’์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

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

let result = sum(1, 2);
alert( result ); // 3

์ง€์‹œ์ž return์€ ํ•จ์ˆ˜ ๋‚ด ์–ด๋””์„œ๋“  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‹คํ–‰ ํ๋ฆ„์ด ์ง€์‹œ์ž return์„ ๋งŒ๋‚˜๋ฉด ํ•จ์ˆ˜ ์‹คํ–‰์€ ์ฆ‰์‹œ ์ค‘๋‹จ๋˜๊ณ  ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ ๊ณณ์— ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์œ„ ์˜ˆ์‹œ์—์„  ๋ฐ˜ํ™˜ ๊ฐ’์„ result์— ํ• ๋‹นํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์ด ํ•จ์ˆ˜ ํ•˜๋‚˜์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ return๋ฌธ์ด ์˜ฌ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm("๋ณดํ˜ธ์ž์˜ ๋™์˜๋ฅผ ๋ฐ›์œผ์…จ๋‚˜์š”?");
  }
}

let age = prompt("๋‚˜์ด๋ฅผ ์•Œ๋ ค์ฃผ์„ธ์š”", 18);

if ( checkAge(age) ) {
  alert( "์ ‘์† ํ—ˆ์šฉ" );
} else {
  alert( "์ ‘์† ์ฐจ๋‹จ" );
}

์•„๋ž˜์™€ ๊ฐ™์ด ์ง€์‹œ์ž return๋งŒ ๋ช…์‹œํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๊ฒฝ์šฐ๋Š” ํ•จ์ˆ˜๊ฐ€ ์ฆ‰์‹œ ์ข…๋ฃŒ๋ฉ๋‹ˆ๋‹ค.

function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  }

  alert( "์˜ํ™” ์ƒ์˜" ); // (*)
  // ...
}

์œ„ ์˜ˆ์‹œ์—์„œ, checkAge(age)๊ฐ€ false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด, (*)๋กœ ํ‘œ์‹œํ•œ ์ค„์€ ์‹คํ–‰์ด ์•ˆ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•จ์ˆ˜ showMovie๋Š” ์–ผ๋Ÿฟ ์ฐฝ์„ ๋ณด์—ฌ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

return๋ฌธ์ด ์—†๊ฑฐ๋‚˜ return ์ง€์‹œ์ž๋งŒ ์žˆ๋Š” ํ•จ์ˆ˜๋Š” undefined๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
return๋ฌธ์ด ์—†๋Š” ํ•จ์ˆ˜๋„ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. undefined๋ฅผ ๋ฐ˜ํ™˜ํ•˜์ฃ .

function doNothing() { /* empty */ }

alert( doNothing() === undefined ); // true

return ์ง€์‹œ์ž๋งŒ ์žˆ๋Š” ๊ฒฝ์šฐ๋„ undefined๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. return์€ return undefined์™€ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ•˜์ฃ .

function doNothing() {
  return;
}

alert( doNothing() === undefined ); // true

๐Ÿ”ฅ return๊ณผ ๊ฐ’ ์‚ฌ์ด์— ์ ˆ๋Œ€ ์ค„์„ ์‚ฝ์ž…ํ•˜์ง€ ๋งˆ์„ธ์š”.

๋ฐ˜ํ™˜ํ•˜๋ ค๋Š” ๊ฐ’์ด ๊ธด ํ‘œํ˜„์‹์ธ ๊ฒฝ์šฐ, ์•„๋ž˜์™€ ๊ฐ™์ด ์ง€์‹œ์ž return๊ณผ ๋ฐ˜ํ™˜ํ•˜๋ ค๋Š” ๊ฐ’ ์‚ฌ์ด์— ์ƒˆ ์ค„์„ ๋„ฃ์–ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

return
 (some + long + expression + or + whatever * f(a) + f(b))

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” return๋ฌธ ๋์— ์„ธ๋ฏธ์ฝœ๋ก ์„ ์ž๋™์œผ๋กœ ๋„ฃ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ ‡๊ฒŒ return๋ฌธ์„ ์ž‘์„ฑํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ์œ„ ์ฝ”๋“œ๋Š” ์•„๋ž˜ ์ฝ”๋“œ์ฒ˜๋Ÿผ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

return;
 (some + long + expression + or + whatever * f(a) + f(b))

๋”ฐ๋ผ์„œ ๋ฐ˜ํ™˜ํ•˜๊ณ ์ž ํ–ˆ๋˜ ํ‘œํ˜„์‹์„ ๋ฐ˜ํ™˜ํ•˜์ง€ ๋ชปํ•˜๊ณ  ์•„๋ฌด๊ฒƒ๋„ ๋ฐ˜ํ™˜ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋˜์–ด๋ฒ„๋ฆฝ๋‹ˆ๋‹ค.

ํ‘œํ˜„์‹์„ ์—ฌ๋Ÿฌ ์ค„์— ๊ฑธ์ณ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ํ‘œํ˜„์‹์ด return ์ง€์‹œ์ž๊ฐ€ ์žˆ๋Š” ์ค„์—์„œ ์‹œ์ž‘ํ•˜๋„๋ก ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์—ฌ๋Š” ๊ด„ํ˜ธ๋ฅผ return ์ง€์‹œ์ž์™€ ๊ฐ™์€ ์ค„์— ์จ์ค˜๋„ ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค.

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์˜๋„ํ•œ ๋Œ€๋กœ ํ‘œํ˜„์‹์„ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


ํ•จ์ˆ˜ ์ด๋ฆ„์ง“๊ธฐ


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

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

showMessage(..)     // ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด์—ฌ์คŒ
getAge(..)          // ๋‚˜์ด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฐ’์„ ์–ป๊ณ  ๊ทธ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•จ
calcSum(..)         // ํ•ฉ๊ณ„๋ฅผ ๊ณ„์‚ฐํ•˜๊ณ  ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•จ
createForm(..)      // form์„ ์ƒ์„ฑํ•˜๊ณ  ๋งŒ๋“ค์–ด์ง„ form์„ ๋ฐ˜ํ™˜ํ•จ
checkPermission(..) // ์Šน์ธ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๊ณ  true๋‚˜ false๋ฅผ ๋ฐ˜ํ™˜ํ•จ

์ ‘๋‘์–ด๋ฅผ ์ ์ ˆํžˆ ํ™œ์šฉํ•˜๋ฉด ํ•จ์ˆ˜ ์ด๋ฆ„๋งŒ ๋ณด๊ณ ๋„ ํ•จ์ˆ˜๊ฐ€ ์–ด๋–ค ๋™์ž‘์„ ํ•˜๊ณ  ์–ด๋–ค ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๋Š”์ง€ ์‰ฝ๊ฒŒ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ”ฅ ํ•จ์ˆ˜๋Š” ๋™์ž‘ ํ•˜๋‚˜๋งŒ ๋‹ด๋‹นํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜ ์ด๋ฆ„์— ์–ธ๊ธ‰๋˜์–ด์žˆ๋Š” ๋™์ž‘์„ ์ •ํ™•ํžˆ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์ด์™ธ์˜ ๋™์ž‘์€ ์ˆ˜ํ–‰ํ•ด์„  ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

๋…๋ฆฝ์ ์ธ ๋‘ ๊ฐœ์˜ ๋™์ž‘์€ ๋…๋ฆฝ๋œ ํ•จ์ˆ˜ ๋‘ ๊ฐœ์—์„œ ๋‚˜๋ˆ ์„œ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ•œ ์žฅ์†Œ์—์„œ ๋‘ ๋™์ž‘์„ ๋™์‹œ์— ํ•„์š”๋กœ ํ•˜๋Š” ๊ฒฝ์šฐ๋ผ๋„ ๋ง์ด์ฃ (์ด ๊ฒฝ์šฐ๋Š” ์ œ3์˜ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ๊ทธ๊ณณ์—์„œ ๋‘ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค).

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

ํ•จ์ˆ˜๋ฅผ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๋งŒ๋“ค๋ฉด ํ…Œ์ŠคํŠธ์™€ ๋””๋ฒ„๊น…์ด ์‰ฌ์›Œ์ง‘๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ•จ์ˆ˜ ๊ทธ ์ž์ฒด๋กœ ์ฃผ์„์˜ ์—ญํ• ๊นŒ์ง€ ํ•ฉ๋‹ˆ๋‹ค!

profile
์ƒ๊ฐ ๋งŽ์ด ํ•˜์ง€ ์•Š๊ธฐ ๐Ÿ˜Ž
post-custom-banner

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