[모던 자바스크립트 Deep Dive] 12장 : 함수 - JS

함수

코드의 집합을 나타내는 자료형이다.

풀어쓰면 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

 

#함수를 사용하는 이유

1. 유지보수의 편의성
2. 코드의 신뢰성
3. 코드의 가독성

---

함수 정의

1. 함수 선언문
2. 함수 표현식
3. Function 생성자 함수
4. 화살표 함수 (ES6)

 

함수 선언문

// 함수 선언문
function add(x, y) {
  return x + y;
}

// 함수 호출
console.log(add(2, 5)); // 7

함수 선언문은 함수 이름을 생략할 수 없다.

// 함수 선언문은 함수 이름을 생략할 수 없다.
function (x, y) {
  return x + y;
}
// SyntaxError: Function statements require a function name

 

 

 

함수 표현식

// 함수 표현식
var add = function (x, y) {
  return x + y;
};

console.log(add(2, 5)); // 7

함수를 값처럼 자유롭게 사용 가능 -> 변수에 할당 가능

 

 

 

Function 생성자 함수

//Function 생성자 함수
var add = new Function('x', 'y', 'return x + y');

console.log(add(2, 5)); // 7

Function 생성자 함수에 매개변수 목록과 함수 몸체를 전달하여 함수 객체를 생성

 

 

 

화살표 함수 (ES6)

// 화살표 함수
const add = (x, y) => x + y;
console.log(add(2, 5)); // 7

Funcion 키워드 대신 화살표 =>를 사용해 좀 더 간략한 방법으로 함수 선언 가능

화살표 함수는 항상 익명 함수로 정의

 

 

 

함수 생성 시점과 함수 호이스팅

함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유한 특징을 함수 호이스팅이라 한다.

// 함수 참조
console.dir(add); // ƒ add(x, y)
console.dir(sub); // undefined

// 함수 호출
console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError: sub is not a function

// 함수 선언문
function add(x, y) {
  return x + y;
}

// 함수 표현식
var sub = function (x, y) {
  return x - y;
};

 함수 선언문 -> 호출 가능

 함수 표현식 -> 호출 불가능

 

둘 사이의 함수 생성 시점이 다르기 때문에 이러한 차이를 보인다.

 

이유

 함수 선언문 -> 함수 호이스팅

 함수 표현식 -> 변수 호이스팅

 

 

 

 

참조에 의한 전달과 외부 상태의 변경

// 매개변수 primitive는 원시값을 전달받고, 매개변수 obj는 객체를 전달받는다.
function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = 'Kim';
}

// 외부 상태
var num = 100;
var person = { name: 'Lee' };

console.log(num); // 100
console.log(person); // {name: "Lee"}

// 원시값은 값 자체가 복사되어 전달되고 객체는 참조값이 복사되어 전달된다.
changeVal(num, person);

// 원시 값은 원본이 훼손되지 않는다.
console.log(num); // 100

//객체는 원본이 훼손된다.
console.log(person); // {name: "Kim"}

원시 타입 -> 값 자체 복사

따라서 함수 몸체에서 값 변경해도 원본 훼손 X

 

객체 타입 -> 참조 값 복사

따라서 함수 몸체에서 값 변경하면 원본 훼손 O

 

#이러한 현상이 일어나는 이유

객체가 변경할 수 있는 값이고 참조에 의한 전달 방식이기 때문에 발생

 

 

 

 

다양한 함수의 형태

즉시 실행 함수

// 익명 즉시 실행 함수
(function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

즉시 실행 함수는 익명 함수를 사용하는 것이 일반적

 

이름이 있는 기명 즉시 실행 함수도 사용할 수 있지만 이름이 있어도 다시 호출할 수 없는 건 마찬가지이다.

// 기명 즉시 실행 함수
(function foo() {
  var a = 3;
  var b = 5;
  return a * b;
}());

foo(); // ReferenceError: foo is not defined

 

재귀 함수

function countdown(n) {
  if (n < 0) return;
  console.log(n);
  countdown(n - 1); // 재귀 호출
}

countdown(10);

재귀 함수는 자신을 무한 재귀 호출한다.

따라서 탈출 조건을 반드시 만들어야 한다.

 

 

중첩 함수

function outer() {
  var x = 1;

  // 중첩 함수
  function inner() {
    var y = 2;
    // 외부 함수의 변수를 참조할 수 있다.
    console.log(x + y); // 3
  }

  inner();
}

outer();

함수 내부에 정의된 함수를 중첩 함수라고 한다.

 

 

콜백 함수

function repeat(n) {
  for (var i = 0; i < n; i++) {
    console.log(i);
  }
}

repeat(5); // 0 1 2 3 4

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 말한다.

 

 

 

순수 함수와 비순수 함수

순수 함수

var count = 0;

function increase(n) {
  return ++n;
}

count = increase(count);
console.log(count); // 1

count = increase(count);
console.log(count); // 2

어떤 외부 상태에 의존하지도 않고 변경하지도 않는 함수

 

 

비순수 함수

var count = 0;

function increase() {
  return ++count;
}

increase();
console.log(count); // 1

increase();
console.log(count); // 2

외부 상태에 의존하거나 외부 상태를 변경하는 함수

 

 

 

하트 누르면 위 내용 전부 기억함