JavaScript 관련 포스팅

• JavaScript(1) - async vs. defer
• JavaScript(2) - variable
• JavaScript(3) - operator
• JavaScript(4) - function
• JavaScript(5) - class vs. object
• JavaScript(6) - object
• JavaScript(7) - array
• JavaScript(8) - JSON
• JavaScript(9) - callback
• JavaScript(10) - promise
• JavaScript(11) - Regular expressions
• JavaScript(12) - Prototype과 Class 피하기
• JavaScript(13) - localStorage

Function

• 구조
  1. function key word를 사용함
  2. 전달받을 값은 ()안에 기입함
  3. 함수 안에서 동작할 코드는 {}(code block) 안에 작성

      function name (param1, param2) {
          logic...
          return;
      }
     

• 규칙
  1. 하나의 함수는 하나의 일을 하도록 만들어야 함
  2. doSomething, command, verb 형태로 명명
  3. JS에서 함수는 object

  cf.) First-class function
  → variable에 할당 가능
  → 다른 함수의 parameter로 전달이 가능
  → return 값으로 지정 가능

• 함수의 종류

  1. 특정 기능을 수행하는 함수

      function doSomething() {
          console.log('hello!');
      }
     

  2. 계산을 수행한 뒤 특정 값을 전달하는 함수

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

• 특징
  1. program을 구성하는 기본적인 building block
  2. subprogram이라 불리며 여러 번 재사용이 가능함
  3. 한 가지의 일(=기능 수행)을 하거나, 값을 계산/전달하기 위해 사용

Function declaration [함수 선언식]

• hoist 가능: 함수가 선언되기 전에 호출이 가능함
  (※ hoisting: 선언 지점과 상관없이, JS engine이 선언을 맨 위로 끌어올림)

※ 다른 언어와 다르게, JS에서는 parameter type과 return type을 명시하지 않음
⇒ TypeScript로 보완

// javascript 코드
function log(message) {
    console.log(message);
    return 0;
}

// typescript 코드
function log(message: string): number {
    console.log(message);
    return 0;
}

※참고: TS Playground - An online editor for exploring TypeScript and JavaScript

Function expression [함수 표현식]

• hoist 불가: 변수에 할당된 다음부터 호출이 가능함

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

Call a function [함수 호출]

• 함수를 선언만하고 호출하지 않으면 코드블럭 안의 코드가 실행되지 않음
• 방법
  1. 함수이름();으로 함수를 호출

       print(); // 함수 호출
     

  2. 변수();로 할당된 함수를 호출
     • 함수를 변수에 할당 가능함
     • ‘함수 이름’만 변수에 할당함 ()없이

        const printAgain = print; // print함수를 printAgain 변수에 할당
        printAgain(); // 호출
       

Parameters

• 함수 이름을 이용해 함수 자체를 인자로 전달할 수 있음
• 주의: 함수()형태로 쓰면 안 됨!

    function doAnything(add) { // add 함수를 인자로 전달
        console.log(add);
        const result_add = add(3, 4);
        console.log(result_add);
    }
  
    doAnything(add);
  

Default parameters

• added in ES6
• parameter= 옆에 원하는 default값을 지정할 수 있음

    function showMessage(message, from = 'unknown') {
        console.log(`${message} by ${from}`);
    }
    showMessage('Hi!'); 
  

  Console

  Hi! by unknown

Rest parameters

• added in ES6

• parameter 자리에 ... 을 입력하면 배열 형태로 전달

    function printAll(...args) {
        for (let i = 0; i < args.length; i++) {
            console.log(args[i]);
        }
    }
    printAll('one', 'two', 'three');
  

  Console

  one

  two

  three

※ 위의 for문을 보다 간단하게 나타내면,

// 1.
for (const arg of args) {
    console.log(arg); 
}

// 2.
args.forEach((arg) => console.log(arg));

Local scope

• global variable vs. local variable
  • global variable: 함수의 바깥에 선언한 변수. 문서 전체에서 사용 가능함
  • local variable: 함수의 안에 선언한 변수. 함수 안에서만 사용 가능함 (block scope)
    ※ 참고: Variable scope - JavaScript | MDN
• 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다!
  • block 안에서는 global/local variable에 접근 가능,
    block 밖에서는 local variable에 접근 불가

  • parent/child function에서도 동일하게 적용됨

      let globalMessage = 'global'; // global variable
      function printMessage() {
          let message = 'hello'; // local variable
          console.log(message); 
          console.log(globalMessage);
      }
      printMessage();
      console.log(message); //error
    

    Console

    hello

    global

Return a value

• 함수 내에 return;을 기술하지 않은 경우, return undefined; 가 생략된 것으로 간주함

Tip: Early return, early exit

• 조건이 맞지 않을 때는 빨리 return 해서 함수를 종료 시킬 것!

• 필요한 logic들은 그 이후에 작성하는 것이 좋음

    // bad
    function upgradeUser(user) {
        if(user.point > 10) {
            // long upgrade logic...
        }
    }
  
    // good
    function upgradeUser(user) {
        if(user.point <= 10) {
            return;
        }
        // long upgrade logic...
    }
  

Callback function

• callback function이 parameter로 전달됨

    function randomQuiz(answer, printYes, printNo) {
        if (answer === 'love you') {
            printYes();
        } else {
            printNo();
        }
    }
    // annonymous function
    const printYes = function() { 
        console.log('yes!');
    };
    // named function
    const printNo = function print() {
        console.log('no!');
    };
  
    randomQuiz('wrong', printYes, printNo);
    randomQuiz('love you', printYes, printNo);
  

  Console

  no!

  yes!

• annonymous function: 이름 없는 함수

• named function: 이름 있는 함수

  ⇒ debugging할 때, stack trace에 함수 이름이 나오게 하기 위함 ⇒ 또는 recursion할 때 사용 ( ※ call stack )

Arrow function

• 항상 annonymous!

• function 키워드, return 키워드, {}curly braces를 지운 뒤, 이 둘을 => 로 연결

    // Annonymous function
    const simplePrint = function() {
        console.log(`simplePrint!`);    
    };
  
    // Arrow function
    const simplePrint = () => console.log('simplePrint!');
  

• 함수의 내용이 길어진다면, block을 설정하면 됨!
  이때, block을 설정했으므로 반드시 return 값을 기입해주어야 함!

    const simpleMultiply = (a, b) => {
        // do something more
        return a * b;
    };
  

IIFE

• Immediately Invoked Function Expression
• 함수의 생성과 호출을 동시에 할 때 사용

• (function)();형태로 사용

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

  Console

  IIFE

< 출처 >

“자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6),” 유튜브 비디오, 25:01, 게시자 “드림코딩 by 엘리,” 2020년 4월 22일, https://youtu.be/tJieVCgGzhs

“프로그래밍 포기 하지 마세요 (자바스크립트 함수 기본편),” 유튜브 비디오, 17:17, 게시자 “드림코딩 by 엘리,” 2020년 7월 10일, https://youtu.be/PuG2VW18O1E