함수 호출 방법

자바스크립트에서는 여러 방법으로 함수 호출이 가능합니다.

 

// 이런 함수가 있다고 할 때
const A = (data) => {
  console.log(data)
}

// 대부분 이렇게 호출할 겁니다
A(1); 

// 이 외의 방법도 있으니 알아봅시다.

 

1] `(백틱)을 사용하는 방법 (Tagged Template Literal)

Template Literal은 단순히 문자열에서만 변수를 나타내기 위해 사용하는 것이 아니라 함수에서도 적용이 가능합니다.

const C = (value) => {
  console.log(value)
}

// C(1) >>> 1
// => C`1` >>> "1"

// 완전히 같게 하려면 매개변수를 다르게 해야 합니다.

const C = (str, value) => {
  console.log(value)
}

C('', 1) >>> 1
C`${1}` >>> 1

 

단, Tagged Template Literal을 함수에서 사용할 때에는 첫번째 매개변수는 반드시 문자열 또는 배열이 됩니다.

이 방법은 JavaScript ES6의 template literal 문법과 유사합니다.

 

여기서 주의할 점은 ${1} 양 옆으로 문자열이 계속 생길 때마다 C 함수의 str은 문자열로 이루어진 배열이 된다는 겁니다.

마찬가지로 ${}이 늘어갈 때마다 계속 배열의 원소가 늘어납니다. 이럴 때에는 배열로 접근을 해야겠죠?

 

// 이러한 방법은 특히나 styled-components에서 많이 쓰이는 방법입니다.
const Component = styled.div`
    display: none;
`;

 

2] 즉시 실행 함수 (IIFE: Immediately Invoked Function Expression)

 

즉시 실행 함수란 함수를 선언하자마자 바로 호출하는 함수라고 생각하시면 편할 것 같습니다.

var i = (function A(data) {
    let k = 0;
    console.log(data);
    return [k, i]
})(1)

console.log(i)
// console.log(data)로 인해 1이 출력되고
// console.log(i)로 인해 [0, 1]이 출력됩니다.

 

IIFE를 사용할 때 알아둬야 할 것들이 있는데요,

 

1) 함수 내부에서 사용되는 변수는 외부에서 접근할 수 없다.

IIFE를 전역에서 선언하는 경우에는 함수 외부에서 k에 1을 더하는 코드를 작성했다고 해도 k는 도대체 어디에 있어? 라며 참조 에러 메시지를 보여줍니다.

var i = (function A(data) {
  let k = 0;
  console.log(data);
  // return [k, data]
})(1)

console.log(i.k) // TypeError: Cannot read property 'k' of undefined

 

2) 사용된 함수 이름은 외부에서 재사용이 가능하다.

const i = (function A(data) {
  let k = 0;
  console.log(data);
  return [k, data]
})(1)

const k = (function A(data) {
  console.log(2)
  return 2
})()

// A 라는 이름이 중복되었지만 정상적으로 1, 2가 순서대로 출력

 

3) 에러가 나면 ; (세미콜론)이 있는지 확인

간혹 에러가 나는 경우가 있는데 이것은 이전 문법과 충돌하는 경우가 있습니다.

이전 명령에서 끝에 ; 이 있는지 확인하고 없으면 붙여주면 됩니다.

console.clear()
// 이 곳에서 간혹 에러가 나면 윗 줄을 console.clear(); 로 바꿔주세요
const i = (function A(data) {
  let k = 0;
  console.log(data);
  return [k, data]
})(1)

4) 즉시 실행 함수 내부에서 함수를 반환하거나 변수를 쓰는 경우엔 클로저로 취급되므로 너무 남용해서 사용하게 되면 메모리를 많이 차지하게 되므로 주의하셔야 합니다.

 

3] 결론

함수를 호출하는 여러 방법에 대해서 알아보았는데요. 어떤가요?

상황에 따라 적절하게 함수를 호출해보세요.