• 글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!

오늘은 자바스크립트의 함수의 심화과정(?)이다. 헷갈릴 만한 내용을 한 번 짚어보고, 함수를 호출하는 방법에 대해 알아보자

🔜 Parameter vs Argument

한글로 표기하거나 말할 때, 매개변수와 인수, 인자를 혼동하여 사용하는 경우가 있다.

물론 대충 함수에 어떤 값을 매개변수로 넣어놔라 혹은 함수에 어떤 값을 대입해라와 같이 의미상 이해는 가지만, 확실하게 짚고 넘어가자

function test(a, b) {
  // 파라미터 a, b
}

test(1, 2); // 인수 1, 2

Parameter

파라미터는 한글로 번역하면 매개변수 혹은 인자와 같은 말이다.

함수 내에서 사용될 값을 정의하는 것을 의미한다.

매개변수로 선언된 변수는 해당 함수 내에서만 동작하고, 자바스크립트의 경우는 매개변수에 객체나 스칼라 변수 외에도 함수를 넣을 수 있다.

Argument

아큐먼트는 한글로 번역하면 인수 혹은 전달인자와 같은 말이다.

함수를 호출할 때 대입하는 값이라고 보면 된다!

🧐 숨겨진 기능

숨겨진 기능이라해서 뭔가 엄청난 비밀이 숨겨져 있을 것 같지만, 실은 별거 없다. 그냥 일반적으로 직접 사용하지 않을 뿐, 알게 모르게 사용되고 있는 기능이라 보면 된다.

기억날지 모르지만 자바스크립트에서 모든 함수와 객체는 프로토타입(Prototype)을 기반으로 만들어진다고 했다.

자바스크립트의 모든 함수는 Function 프로토타입을 상속 받는다.

이 Function 프로토타입에는 다양한 속성과 메서드들이 있는데 그 중에 몇 가지 살펴보자

arguemnts 객체

function hidden1() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  console.log(sum);
}

hidden1(1, 2, 3); // 6

위 예제에서 hidden1 함수는 매개변수를 직접적으로 선언하지 않았다. 그런데 어떻게 함수를 호출 할 때 합계가 출력될까?

그건 arguments라는 숨겨진 객체를 사용하기 때문이다! (arguments는 위에서 얘기한 인수와 다른 것이라 보면 된다.)

함수에서 arguemnts는 객체로써 함수에 전달된 인수에 해당하는 배열이다.

함수에 파라미터를 따로 지정하지 않아도, Function 프로토타입에서 arguments 객체를 생성해서 인수 값을 넣기 때문에 인수가 몇 개든 합계를 출력할 수 있다.

ES6 호환 모듈을 작성할 때는 가능한 나머지 문법(Spread Syntax)를 사용하는 것이 좋다.

apply 메소드

const numbers = [1, 2, 3, 4, 5];

// 최대, 최소 구하기
const maxNumber = Math.max.apply(null, numbers);
const minNumber = Math.min.apply(null, numbers);  

console.log(maxNumber);  // 5
console.log(minNumber);  // 1

apply 함수는 첫 번째 인자로 this를, 두 번째 인자로 arguments 배열을 입력받는다.

단독으로 쓰이는 경우보다 예제와 같이 특정 내장함수와 같이 쓰이면서 반복문을 돌지 않고도 원하는 값을 구할 수 있다.

bind 메소드

bind 메소드는 함수를 새로 생성할 때, this를 인수로 전달한다.

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

const unboundGetX = module.getX;
console.log(unboundGetX());  // undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());  // 42

말보단 예제를 보자. 위 예제에서 처음 unboundGetX 함수는 module 함수의 getX 메소드를 복사했는데, this의 범위가 전역객체(window)로 설정됨으로써 undefined를 반환한다.

이 때 bind 메소드를 사용하면 module의 x 속성을 가진 함수를 새로 생성한다.

🔚 length

어느 프로그래밍 언어든 length라는 메소드를 많이 사용한다. 배열이나 객체의 프로퍼티 수를 파악하는데 사용되고, 보통 반복문에서 많이 사용된다.

이 length 메소드 또한 Function 프로토타입의 메소드이다.

중간에 예시로 든 함수들은 평소에는 자주 사용 안 할지 몰라도, 알아두면 좀 더 고급지게(?) 개발을 할 수 있지 않을까 싶다. 실은 기능이 많아서 필요해도 기능이 있는지 모르겠다

& 자바스크립트 참고 강의 링크

생활코딩 JavaScript
Function - MDN
arguments 객체 - MDN
Function.prototype.apply() - MDN
Function.prototype.bind() - MDN