TIL 23 | JS-7(함수)

YB.J·2021년 6월 16일
0
post-thumbnail

모던자바스크립트 Deep Dive에서 발췌한 함수에 관한 내용을 적어보자

함수

함수란

  • 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것
  • 함수는 입력을 받아서 출력을 내보낸다. 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라고 함
  • 함수는 값. 식별자인 함수 이름을 사용할 수 있음
  • 함수정의 : 함수는 함수 정의를 통해 생성한다
  • 함수호출 : 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시하는 것. 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되고 실행결과(반환값)을 반환한다

// 함수 정의
function add(x, y) {
  return x + y;
}

// 함수 호출
add(2, 5); 

------
add : 함수이름
x, y : 매개변수
x + Y : 반환 값
2, 5 : 인수

함수를 사용하는 이유

  • 함수는 몇 번이든 호출할 수 있으므로 코드의 재사용이라는 측면에서 유용
  • 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높임

함수 리터럴

  • 함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성됨
  • 함수 리터럴도 평가되어 값을 생성한다. 즉 함수는 객체이다
  • 함수는 호출을 할 수 있다.
  • 함수는 고유의 프로퍼티를 갖는다.

// 변수에 함수 리터럴을 할당
var f = function add(x, y) {
  return x + y;
};

함수 정의

  • 함수를 정의하는 방법 4가지
    1. 함수 선언문
    2. 함수 표현식
    3. Function 생성자 함수
    4. 화살표 함수(ES6)

변수 선언문과 함수 정의
변수는 '선언'한다고 했지만 함수는 '정의'한다고 표현. 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다. 따라서 ECMAScript 사양에서도 변수는 선언, 함수에는 정의라고 표현한다.

  • 함수 선언문
    1. 함수 이름을 생략할 수 없다
    2. 함수 선언문은 표현식이 아닌 문(statement)이다

// 함수 선언문

function add(x, y) {
  return x + y;
}

// 함수 호출
add(2, 5);
console.log(add(2, 5));
  • 함수 표현식
    1. 함수는 일급 객체(값의 성질을 갖는 객체)이므로 변수에 할당 가능하다
    2. 즉, 함수 리터럴로 생성한 함수 객체를 변수에 할당한 함수 정의 방식을 함수 표현식이라고 한다
    3. 함수 이름을 생략할 수 있다

// 기명함수 표현식

var add = function foo(x, y) {
  return x + y;
};

// 함수 객체를 가리키는 식별자로 호출
console.log(add(2, 5)); // 7

// 함수 이름으로 호출하면 참조에러
console.log(foo(2, 5)); // ReferenceError

-----
// 익명함수 표현식도 가능
var add = function(x, y) {
  return x + y;
};

console.log(add(2, 5)); // 7
  • Function 생성자 함수 : JS가 기본 제공하는 빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환

    생성자 함수
    생성자 함수는 객체를 생성하는 함수를 말한다. 객체를 생성하는 방식은 객체 리터럴 이외에 다양한 방법이 있다.


var add = new Function('x', 'y', 'return x + y');

console.log(add(2, 5));
  • 화살표 함수 : ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 =>를 사용해 좀 더 간략한 방법으로 함수를 선안할 수 있다

const add = (x, y) => x + y;

console.log(add(2, 5));
profile
♪(^∇^*) 워-후!!(^∀^*)ノシ

0개의 댓글