#10. 자바스크립트(javascript) - 함수(function)

# 이번 시간에는 Javascript의 함수에 대해 배워보도록 하겠습니다. 
# 비전공자가 이해한 Javascript

 

---

함수(function)

프로그래밍에서 함수(function)란 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합이라고 정의할 수 있습니다. 

---

 

1) 함수 선언(Function declaration)

자바스크립트의 함수를 선언할 때 가장 기본적인 구조는 위의 예시와 같습니다.

• 먼저 function을 이용해 함수임을 선언하고 함수의 이름(name 부분)을 정의합니다.
• "( )" 부분에는 함수에서 사용될 파라미터들을 정합니다. 이 부분은 함수를 실행할 때 외부로부터 받을 인자들을 입력합니다.
  예를 들어 "a + b = c" 라는 식을 계산하기 위한 함수를 만들 때, param1 = a 가 되고, param2 = b 가 됩니다.
• "{ }" 부분은 실제로 함수 안에서 코드가 어떻게 동작하는지를 정의하는 부분입니다.
  파라미터들을 이용해 body 부분에서 계산합니다.
• 출력할 내용을 반환합니다.
• 받을 파라미터가 없는 경우 생략이 가능하고, 반환할 내용이 없는 경우는 return을 사용하지 않아도 됩니다.

구체적인 예시는 다음과 같습니다.

// parameter 가 없는 함수
function printHello() {
  console.log('Hello');
}

printHello();


// parameter 가 있는 함수
function log(message) {
  console.log(message);
}

log('Hello@');
log(1234);

함수 자체를 할당하는 방법도 소개하도록 하겠습니다.

function doSomething(param1) {
  console.log(param1);
}

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

doSomething은 param1을 전달받아 console.log로 출력하는 함수입니다. add 함수는 a와 b를 더한 값인 sum을 반환하는 함수입니다. doSomething의 인자(param1)에는 add 함수를 할당합니다.

아래의 코드는 doSomething이라는 함수에 add라는 함수 자체를 할당하는 코드입니다. 어떤식으로 출력되는지 보도록 하겠습니다.

doSomething(add);

위와 같이 function 자체를 출력하게 됩니다. 이제 이 함수를 어떻게 이용하면 될까요 ?
전달받은 인자(add 함수)를 doSomething 함수 안에서 실행할 수 있습니다. 아래와 같은 형태로 출력이 가능해집니다.

function doSomething(para1) {
  const result = para1(1, 2);
  console.log(result);
}

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

doSomething(add);

이번에는 add 함수를 먼저 선언하고 그 값을 할당하는 식으로 출력해보도록 하겠습니다.

function doSomething(param1) {
  console.log(param1);
}

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

doSomething(add(4, 5));

위의 코드는 add 함수 실행(4 + 5) -> 결과값(9) doSomething으로 전달 -> 출력(console.log) 의 순서로 진행됩니다.
인자로 전달받은 add 함수가 먼저 실행돼서 "4 + 5" 가 계산되어 "9" 값을 반환(return)하고 그 값을 가지고 doSomething 함수에서 param1 으로 사용해 console.log(param1) 로 출력합니다.

 

---

 

2) Return a Value

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

const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`);

sum이라는 함수를 만들어줍니다, 이 함수는 a와 b 값을 외부로부터 전달받아 a + b를 수행한 후 그 결과값을 반환합니다. 계산기를 예로들면 첫번째 입력하는 숫자가 a, 두번째 입력하는 숫자가 b, 연산자는 함수라고 볼 수 있습니다. 함수가 정의된대로 a와 b를 차례로 받고 그 값을 계산해 반환해냅니다.

---

 

3) Local scope

// global varialbe
let globalMessage = 'global';

function printMessage() {

  // loval variable을 선언합니다. 
  let message = 'hello';
  console.log(message);
  
  // global variable을 불러올 수 있습니다.
  console.log(globalMessage);
  
  // printMessage 함수 내에 자식 함수를 선언합니다.
  function printAnother() {
  
    // 자식 함수는 부모 함수 내에 있는 message라는 변수를 불러올 수 있습니다.
    console.log(message);
    let childMessage = 'hello';
  }
  
  // 자식 함수 내에서 정의된 childMessage를 불러올 수 없기 때문에
  // 부모 블록에서는 error가 발생합니다.
  // console.log(childMessage);
}
printMessage()

 

---

 

4) early return, early exit

// bad
function upgradeUser(user) {
  if (user.point > 10) {
    // long upgrade logic ...
  }
}

// good
function upgradeUser(user) {
  if (user.point <= 10) {
    // 조건이 아닌 경우 빨리 return 해서 빠져나오고 조건이 맞는 경우에만 나머지를 실행합니다.
    return; 
  }
  // long upgrade logic ...
}

 

---

 

5) anonymous function & named function

함수를 선엄함과 동시에 변수 print에 할당해주는데, 이 때 이름이 없이 함수 자체로 할당되는 경우 anonymous fuction 이라고부릅니다.

const print = function () {
  console.log('print');      
};
print();

 

---

 

6) Callback function

상황에 맞는 함수를 부르는 것을 callback function 이라고 합니다.
아래와 같은 randomQuiz 함수를 만들었습니다. answer가 "love you"면 printYes를 불러오고, 아니면 printNo를 불러오도록 했습니다.

function randomQuiz(answer, printYes, printNo) {
  if (answer === 'love you') {
    printYes();
  } else {
    printNo();
  }
}

다음으로 printYes와 printNo를 정의해줍니다. 이런 방식은 디버깅 할 때 유용하게 사용될 수 있습니다.

const printYes = function () {
  console.log('Yes!');
};

// better debugging in debugger's stack traces
const printNo = function () {
  console.log('No!');
};

이제, randomQuiz 함수를 호출해보도록 하겠습니다.

randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

answer 부분을 'wrong'으로 받은 부분은 randomQuiz 내부의 if에 의해 printNo(); 함수를 실행시켰습니다.
반면 answer 부분이 'love you'로 받은 부분은 printYes();를 실행시켜 "Yes!"라는 출력을 얻을 수 있었습니다.

 

---

 

7) IIFE: Imediately Invoked Function Expression

선언함과 동시에 호출하는 방법으로 괄호를 이용해 함수를 감싸고, 호출 기호를 작성해서 활용합니다.

(function hello() {
  console.log('IIFE');
})();

---

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# Javascript Web browser에서 보는 방법: console.log 사용
# MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

JavaScript | MDN