Javascript - 3. Function(1)

Jin Young Son·2021년 4월 12일

Javascript

목록 보기

3/5

이전 포스트인 Javascript - 2. 식과 문과 같이 자바스크립트에서 기본이면서도 핵심이라고 볼 수 있는 것이 함수(Function) 입니다.

함수

함수(Function) 말 그대로 기능이라고 볼 수 있고 일반적인 프로그래밍처럼 함수명과 인자, 블록으로 구성되어 있습니다.
자바스크립트의 함수는 1급함수로 변수에 할당이 가능하고, 함수의 인자로 함수를 전달할 수 있고, 함수를 함수의 반환값으로 반환할 수 있습니다.

특징

모든 함수는 값을 반환한다.

일반적으로 return 문이 있을 때 값을 반환합니다. 하지만 자바스크립트는 return 문이 없어도 undefined라는 값을 반환합니다.

// return 문이 있을 때
function f() {
  var a = 10;
  return a;
}

f(); // 10

// return 문이 없을 때
function u() {
  var a = 10;
}

u(); // undefined

함수 인자가 동적이다.

함수를 정의할 때 인자도 같이 정의하지만, 함수를 호출할 때 인자를 전달하는 것에 있어 느슨하게 처리가 됩니다.

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

sum(10, 20); // 30
sum(); // NaN
sum(1, 2, 3, 4, 5) // 3

인자를 어떻게 전달하던지 자바스크립트는 런타임 오류가 발생하지 않습니다. 인자를 전달하지 않은 경우 해당 인자의 값은 undefined 입니다. 인자를 검증하는 부분을 추가하여 런타임 오류를 줄일 수 있습니다.

function sum(x, y) {
  if (x === undefined || y === undefined) {
  	throw new Error('sum(x, y) 인자가 부족합니다.');
  }
  return x + y;
}

sum(10, 20); // 30
sum(); // console Error log
sum(1, 2, 3, 4, 5) // 3

유사 배열 형태의 인자가 전달된다.

위 함수 인자가 동적이다. 특징을 보완(?)하기 위해 유사 배열 형태의 arguments라는 값이 전달됩니다.

function sum(x, y) {
  console.log(arguments); // [1, 2, 3, 4, 5, ...]
  console.log(x === arguments[0]); // true
  console.log(y === arguments[1]); // true
  return x + y;
}

sum(1,2,3,4,5);

arguments 값을 활용하여 전달되는 인자를 매우 유연하게 처리할 수 있습니다.

함수도 객체이다.

자바스크립트에서는 원시 타입(Primitive type)을 제외한 거의 대부분은 객체로 봅니다.

function empty() {}

아무 인자도, 동작도 없는 빈 함수를 작성해보면 알 수 있습니다. 분명 아무것도 하지 않는데 empty는 속성을 갖게 됩니다. arguments, length, name, toString, hasOwnProperty 등 속성과 메서드를 갖고 있는 객체로 볼 수 있습니다.

그리고 함수가 객체이니 속성을 추가할 수 있습니다.

function empty() {}

console.log(empty.status); // undefined

// 속성 추가
empty.status = 'NONE';
console.log(empty.status); // NONE

함수 내부에 함수가 들어갈 수 있다.

함수 내부에 함수가 선언되고 사용될 수 있습니다. 함수 내부에서 선언되면 해당 함수 내부에서만 사용할 수 있고 외부에서는 접근이 불가능합니다.

function foo() {
  function get() {
    return 10;
  }
  
  return get();
}

foo(); // 10
get(); // ReferenceError: get is not defined
foo.get(); // TypeError: a.get is not a function