예비 개발자

const thirdStudyLog = "함수(function)";

1. 함수는 왜 필요할까?

코드를 작성하면서 피해야할 것 중 하나가 ‘중복’이다.

예를 들어, 간단한 계산기를 만든다고 생각해보자. 아직 함수를 배우지 않은 사람은 아래와 같이 코드를 작성할 것이다.

let x = 1;
let y = 2;
let result = x + y;

let x = 1;
let y = 3;
let result = x + y;

let x = 2;
let y = 5;
let result = x + y;

이런 식으로 코드를 작성하는 것은 비효율적이다. 같은 기능을 하는 코드를 계속 반복하여 작성하는 것보다는 하나의 부품으로 만드는 것이 나을 것이다. 이럴 때 사용하는 것이 함수이다.

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

let result1 = add(1, 2);
let result2 = add(1, 3);
let result3 = add(2, 5);

중복을 피한다는 것 외에도 함수는 장점이 있다. 바로 유지보수가 쉽다는 것이다. 예를 들어서 위의 식처럼 x 와 y를 더하는 것이 필요가 없어졌고, 이번에는 빼기를 하는 식으로 모두 바꿔야한다. 그렇다면 모든 더하기 연산자를 삭제하고 빼기 연산자로 바꿔야한다.

let x = 1;
let y = 2;
let result = x - y;

let x = 1;
let y = 3;
let result = x - y;

let x = 2;
let y = 5;
let result = x - y;

예시로는 3개밖에 없어서 간단할지 몰라도… 만일 이런 코드가 몇 억개라면 얼마나 귀찮고 힘든 작업이겠는가?…. 그러나 함수에서는 단순히 함수 안의 식들만 고쳐주면 아래의 result들이 모두 바뀐다. 사람이 하나하나 찾아서 바꾸는 것보다는, 단 하나의 식을 바꾸는 것이 코드의 신뢰성도 높혀줄 것이다.

이에 더해서 함수 이름을 통해, 자세한 코드를 보지 않아도 함수가 무슨 역할을 하는지에 이해할 수 있게 하여 코드의 가독성이 향상된다.

그러니 같은 기능을 계속 사용하게 될 경우, 혹은 한 단위로 역활 묶기가 가능한 경우에는 함수를 적극적으로 사용하는 것이 효율적이다.

2. 함수의 구조

함수는 크게 정의와 호출로 분리된다. 둘의 차이를 알기 전에, 함수의 구조와 이름들에 대해서 살펴보는 것이 좋다.

11.png

add(2 5) ///// 7

호출된 함수는 ‘값’을 갖게 된다. 함수 안에서 return 줄에 도착하면 실행이 멈춘다. 이 부분을 항상 상기하면서 코딩을 하는 것이 좋다. return의 개념이 조금 어려울 수도 있다. 하지만 간단히 이야기하면 값을 함수에 돌려주어 add(2, 5) = 7 가 된다.

함수는 정의만 되어서는 어떤 작동도 하지 않는다. 예를 들어서

function sayHello() {
  console.log("hello");
}

만 해서는 아무런 동작도 하지 않는다. 항상 호출을 해야 함수는 작동하게 된다.

화살표 함수(ES6)

ES6에서 도입된 화살표 함수는 함수를 조금 더 간략하게 선언할 수 있다.

let result = numbers.filter((value) => value > 10);

console.log(result);

참고