[JS 기초] 5. 함수

드림코딩 by 엘리 님의 자바스크립트 기초 강의를 보고 정리한 글입니다.

javascript의 경우 procedural language 다.

Object가 추가되긴 했지만 진짜 Java 같은 Object Oriented language 가 아닌

prototype 을 베이스로 한 가짜의 object oriented 다.

javascript에서 function은 object 다.

그래서 function을 인자로 받거나 function을 반환 받는 것이 가능하다.

또한 function안에서 function을 정의하는 것도 가능 함. (여기서 closure 개념이 나옴.)

참고

js에서는 function의 인자 type이나 return type을 선언하지 않는다.

그래서 typescript를 쓰는 것이 명확하고 개발 일을 더 쉽게 만들어준다.

(function의 선언부만 보고 그 function이 어떤 일을 하는지 명확히 알 수 있게 되기 때문.)

typescript 홈페이지에 들어가면

typescript 언어로 코드를 쓰면 js로 컴파일된 내용을 확인해 볼 수 있다.

js 를 다 배우고 나면 typescript를 꼭 배우길 바란다.

Parameter

• function의 parameter의 변수 타입에 따라 pass방식이 두 가지로 나뉜다.

  • primitive는 passed by value
  • obj는 passed by reference

• Default parameters (ES6에서 추가 됨)

  • function 선언부에 = 으로 parameter의 default값을 지정할 수 있다.

• Rest parameters (ES6에서 추가 됨)

  • 여러 인자를 받아서 배열 형태로 전달받기
  • example

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

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

    printAll('AAA', 'BBB', 'CCC');

Return

• 함수에 return이 없으면 return undefined 가 있는 것과 같은 효과다.
• early return, early exit 을 하는 것이 좋다. (현업 꿀팁)

First-class function

js는 first-class function 을 지원하는 언어다.

first-class function은 function이 다른 변수들과 마찬가지로 취급된다는 뜻이다.

• 변수에 할당 가능.
• function의 argument로 전달 가능.
• function을 return하는 것이 가능.

anonymous function VS named function

• anonymous function (익명 함수) 로 만들 수도 있고 named function 으로 만들 수도 있다.

//익명 함수
const print = function () {
  console.log('print');
}

//named 함수
const print = function print() {
  console.log('print');
}

• named 함수의 경우
  • debugging을 할 때 debugger의 stack trace에 함수 이름이 나오게 하기위해서 사용하거나
  • recursive function을 만들기 위해서 사용한다.

Hoisting

• 브라우저 엔진에서는 var 만 hoisting하는 것이 아니라 function 도 hoisting 한다.
• 그래서 function을 밑에서 선언해도 위에서 쓸 수 있다.

Callback

• 파라미터로 function(callback function) 을 받아서 어떠한 상황이 됐을 때 그 callback function을 부르는 방식.

arrow function

• 익명함수를 간단하게 쓰기 위해서 사용한다.

IIFE (Immediately Invoked Function Expression)

• 함수를 선언과 동시에 호출 하고 싶을 때 사용한다.

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

이렇게 function 전체를 괄호로 묶어서 인자를 부분을 넣어 주면 된다!

근데 최근에 잘 쓰이진 않음.