[Javascript] 매개변수와 함수, 화살표 함수 return 없이도 쓰는 법

함수가 매개변수로 넘어오는 경우

Javascript 코드들을 보다보면 함수를 매개변수로 넘겨주는 경우들이 종종 등장한다.

arr.filter(function);
arr.forEach(function);

대개는 아래 처럼 화살표 함수를 직접 넣어서 사용한다.

arr.filter(val => {return val > 10});
arr.forEach(val => {console.log(val)});

그런데 함수를 통째로 넘기는 경우도 볼 수 있다.
자바스크립트의 특징덕분에 함수만 넘기면 알아서 배열속의 값들이 전달된다.

const testFunc = (x) => {
  console.log(x);
}

arr.forEach(testFunc);

그런데 만약 함수가 여러개의 인자를 갖고 있어야 되는 경우에는 어떻게 해야할까?
단순히 아래처럼 넘기면 a는 값, b는 인덱스 값이 넘어간다.
결국 화살표 함수를 사용할 때 값을 넘기는 것 처럼 넘어간다.

const testFunc = (a,b) => {
  console.log(`a : ${a}`); // a : value
  console.log(`b : ${b}`); // b : index
  console.log(`a-b : ${a-b}`);
}

arr.forEach(testFunc);

그럼 함수 자체적으로 이미 매개변수가 있고, 그와 별개로 배열의 값을 받아서 처리하고 싶다면 어떻게 해야할까?
이럴 때는 클로저 개념을 가져와서 사용하면 원활하게 풀 수 있다.

const testFunc = (a,b) => {
  // X는 클로저로 인해 배열 내부 값을 가져온다.
	return function(x) {
      return (x - a + b)
    }
}

arr.forEach(testFunc(10, 20));

화살표 함수를 return 없이 쓰는법

보통 화살표 함수를 쓰게 될 때 아래처럼 사용한다.

const testFunc = () => {
  return 'testFunc!!'
}

testFunc();

그런데 중괄호('{}') 대신 괄호 ('()')를 쓰게 되면 return을 생략할 수 있다.
괄호를 아예 안쓰는 경우도 자동 return이 되기에, 생략가능하다.

// 바로 testFunc!! 문자를 리턴한다.
const testFunc = () => ('testFunc!!');
const testFunc2 = () => 'testFunc!!';

testFunc();
testFunc2();

중괄호 없이 괄호만 있는 함수를 만나더라도 당황하지말고 중괄호와 괄호의 차이를 기억하자!