Javscript - Function

 

 

함수를 사용하는 이유

• 코드의 재사용
• 유지보수 편의성, 코드의 신뢰성
• 코드의 가독성

함수도 객체다.

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

• 리터럴: 문자 or 약속된 기호를 사용해 값을 생성하는 표기 방식
• 위에 코드는 함수 리터럴을 변수에 할당
  • 함수 리터럴도 평가되어 값을 생성하며 이 값은 객체 -> 즉, 함수는 객체다
  • 단, 함수는 일반 함수와는 다르다(일급 객체이기 때문)
    • 일반 함수: 호출 X
    • 함수: 호출 O

 

 

함수 정의

JS에서 함수를 정의하는 방법에는 4가지가 있다.

• 정의된 함수는 JS 엔진에 의해 평가되어 함수 객체가 된다.

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


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


// 3. 화살표 함수(ES6)
var add = (x,y) => x+y;


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

 

코드의 문맥에 따른 JS 엔진의 함수 해석

JS 엔진은 코드의 문맥에 따라 동일한 함수 리터럴을 함수 표현식 or 함수 선언문으로 해석하는 경우가 있다.

• { } 는 코드 블록일 수도 있고, 함수 리터럴일 수도 있다. -> { } 는 중의적 표현
• { } 가 단독으로 존재 -> JS 엔진은 { } 를 블록문으로 해석
• { } 가 값으로 평가되어야 할 문맥에서 피연산자로 해석될 경우 -> JS 엔진은 { } 를 객체 리터럴로 해석

함수도 이와 동일하다.

• 함수 리터럴이 단독으로 사용 -> 함수 선언문으로 해석
• 함수 리터럴이 값으로 평가되어야 하는 문맥 -> 함수 리터럴 표현식으로 해석

 

 

함수 선언문과 함수 리터럴 표현식

이 둘은 함수가 생성되는 것은 동일, 다만 호출에서 차이가 있다.

// 함수 선언문으로 함수 호출
function foo() {
  console.log('foo'); // foo
}
foo();


// 함수 리터럴 표현식으로 함수 호출
(function bar() {
  console.log('bar'); // ReferenceError: bar is not defined
});
bar();

 

함수 리터럴

함수 이름은 함수 몸채 내에서만 참조할 수 있는 식별자다.

• 함수 몸체 외부에서는 함수 이름으로 함수를 참조할 수 없다. -> 함수 몸체 외부에서는 함수 이름으로 함수 호출 불가능
• 즉, 함수를 가리키는 식별자가 없다는 것과 같은 의미

1. 함수 리터럴 표현식으로 함수 호출 시 메모리 구조

 

2. 함수 선언문으로 함수 호출 시 메모리 구조

• JS 엔진은 함수 선언문을 해석해 함수 객체를 생성
• 생성된 함수 객체를 가리키는 유효한 식별자가 필요
• 따라서, JS 엔진은 생성된 이 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성, 거기에 함수 객체를 할당

 

결국 함수는 함수 이름으로 호출하는 것이 아니라, 함수 객체를 가리키는 식별자로 호출하는 것이다.

위 코드는 함수 표현식이다.

즉, JS 엔진은 "함수 선언문"을 "함수 표현식"으로 변환 -> "함수 객체"를 생성

 

 

함수 호출 & 반환문

• 함수 매개변수는 함수 몸체 내부에서만 참조할 수 있다. -> 즉, 매개변수의 스코프는 함수 내부다.
• 함수는 매개변수의 개수와 인수의 개수가 일치하지 않아도 된다.
  • 인수가 매개변수보다 부족하면, 나머지 매개변수에 대해서는 암묵적으로 undefined
  • 인수가 매개변수보다 많으면, 모든 임수는 암묵적으로 arguments 객체에 프로퍼티로 보관

function add(x,y) {
  console.log(x,y); // 1 2
  return x+y;
}

add(1,2);
console.log(x,y); // ReferenceError: x is not defined


// 매개변수의 개수 > 인수의 개수 => 나머지 매개변수는 undefined
function mul(x,y) {
  console.log(x,y); // 1 undefined
}
mul(1);


// 매개변수의 개수 < 인수의 개수 => arguments에 보관
function sub(x,y) {
  console.log(arguments); // [Arguments] { '0': 3, '1': 2, '2': 1 }
  return x-y;
}
sub(3,2,1); // 1

 

 

JS 문법상의 문제

1. JS 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.

2. JS는 동적 타입 언어다. 따라서 JS 함수는 매개변수의 타입을 사전에 지정할 수 없다.

 

-> 따라서 JS의 경우, 함수를 정의할 때 인수가 전달되었는지 확인할 필요가 있다.

• typeof 연산자를 사용하는 방법
• 인수가 전달되지 않은 경우 단축 평가를 사용하는 방법
• 매개변수에 기본값을 할당하는 방법
• 정적 타입 선언이 가능한 Typescript 사용하는 방법

// typeof 연산자로 arguments 문제 방지
function add(x, y) {
  if (typeof x !== "number" || typeof y !== "number") {
    throw new TypeError("인수는 모두 숫자(number)값 이어야 합니다.");
  }

  return x + y;
}
console.log(add(1, 2)); // 3
console.log(add(2)); // TypeError: 인수는 모두 숫자(number)값 이어야 합니다.
console.log(add("a", "b")); // TypeError: 인수는 모두 숫자(number)값 이어야 합니다.

// "단축 평가"로 arguments 문제 방지
function mul(a, b, c) {
  a = a || 1;
  b = b || 1;
  c = c || 1;

  return a * b * c;
}
console.log(mul(1, 2, 3)); // 6
console.log(mul(1, 2)); // 2
console.log(mul(1)); // 1
console.log(mul()); // 1

// parameter default value 설정으로 argument 문제 방지
function sub(a = 0, b = 0) {
  return a - b;
}
console.log(sub(10, 9)); // 1
console.log(sub(10)); // 10
console.log(sub()); // 0

 

 

값에 의한 호출 vs 참조에 의한 호출

• 값에 의한 호출: 함수 호출시 매개변수에 원시값 전달
  • 원시값은 변경 불가능한 값
  • 즉, 원시타입의 arguments는 값 자체가 복사되어 매개변수에 전달
  • 이 값을 변경(재할당을 통한 변경)해도 원본은 훼손되지 않는다. (side effect X)
• 참조에 의한 호출: 함수 호출시 매개변수에 객체를 전달
  • 객체는 변경 가능한 값
  • 즉, 객체 arguments는 참조 값이 복사되어 매개변수에 전달
  • 참조 값을 통해 전달한 객체를 변경할 경우 원본이 훼손된다. (side effect O)

참조에 의한 호출의 문제점: 객체가 변경될 수 있기 때문에 상태 변화 추적이 어렵다.

 

function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = "WIEEE";
}

// 외부 상태
var num = 100; // 원시 값
var person = { name: "WI" }; // 객체

console.log(num); // 100
console.log(person); // { name: 'WI' }

changeVal(num, person);

console.log(num); // 100
console.log(person); // { name: 'WIEEE' }

 

해결 방법

• 객체를 불변 객체로 만들어 사용하는 것
  • 객체의 복사본을 새롭게 생성하는 것은 비용이 원본 객체 규모에 따라 커질 수 있다.
  • 하지만, 객체를 마치 원시값처럼 변경 불가능한 값으로 동작하게 만들 수 있다.
  • 방법으로는 깊은 복사를 통해 새로운 객체를 생성하고 재할당한다. -> side effect X

 

순수 함수란?
- 외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수
- 순수 함수를 통해 부수 효과(side effect)를 최대한 억제하고 오류를 피해 프로그램의 안정성을 높인다 = 함수형 프로그래밍

 

 

여러가지 함수

1. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)

함수 정의와 동시에 즉시 호출되는 함수

• 즉시 실행 함수는 반드시 그룹 연산자(...)로 감싼다.
• 즉시 실행 함수는 함수 이름이 없는 익명 함수를 사용하는 것이 일반적

// 즉시 실행함수 - 일반적인 방식
(function () {
  /// ...
})();

 

2. 재귀함수(recursive function)

 

3. 중첩 함수(nested function) == 내부 함수(inner function)

함수 내부에 정의된 함수 (중첩 함수를 포함하는 함수 = 외부 함수)

• 중첩 함수는 외부 함수 내부에서만 호출할 수 있다.
• 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수 역할을 한다.

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

outer();

 

4. 콜백 함수(callback function)

함수의 매개변수(parameter)를 통해 다른 함수의 내부로 전달되는 함수

• 고차 함수: 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수
• 콜백 함수는 고차 함수에 의해 호출된다.
• 고차 함수는 필요에 따라 콜백 함수에 인수(argument)를 전달할 수 있다. -> 그렇기 때문에 고차함수에 콜백함수 전달 시 콜백함수를 호출하지 않고 함수 자체를 전달해야 함
• 함수는 일급 객체이므로 함수의 매개변수를 통해 함수를 전달 가능
• 그로 인해, 함수는 더 이상 내부 로직에 강력히 의존하지 않고 외부에서 로직의 일부분을 함수로 전달받아 수행하므로 유연한 구조를 갖는다.

// 외부에서 전달받은 func 를 n만큼 반복 호출 - 고차 함수 repeat
function repeat(n, f) {
  for (var i=0; i<n; i++) {
    f(i);
  }
}

// 콜백 함수 정의 - logAll
var logAll = function (i) {
  console.log(i);
};

// 반복 호출할 함수를 인수로 전달
repeat(5, logAll); // 0 1 2 3 4

// 콜백 함수 정의 - logOdd
var logOdd = function (i) {
  if (i%2) console.log(i);
}

// 반복 호출할 함수를 인수로 전달
repeat(5, logAdd); // 1 3