[JavaScript] 함수(Function)

 

반드시 리턴값을 넣으셔야 해요

함수란?

함수란 작은 기능의 단위로 코드의 묶음이다. 수학적 함수와 언뜻 보기엔 비슷할 수 있으나, 실제로는 그 결이 많이 다른 게 프로그래밍에서의 함수다. 특정 값을 입력 받아 원하는 값을 출력하는 것은 같지만 여러 개의 출력값을 가지는 것이나 함수를 통해 특정 기능을 구현하는 것은 프로그래밍 함수만의 특징이라고 할 수 있다.

위의 예시처럼 함수는 함수 선언을 위한 값(keyword), 함수의 이름(name), 그리고 함수의 매개변수(parameter)로 구성된다.

---

왜 쓰는걸까?

먼저 아래의 코드 예시를 보자.

어떤 이유에서인지 우리는 반복된 문장을 출력하기 위해서 console.log창을 10번 입력해야 했다. 코드 예시에서는 단순히 코드 10줄을 반복적으로 치는 작업이기 때문에 그나마 적을 수 있었지만, 만약 console.log창을 100번 입력해야한다면 우린 어떻게 해야될까? 심지어 console.log로 출력하는 내용이 길다면?

이걸 언제 다 치고 있지?

하루종일 코드를 치고 있을 수도 없고, 이 내용을 간략하게 쓸 수 있는 가장 효율적이고 간략한 방법 중 하나가 함수를 활용하는 법이다. 쉽게 생각해보자. 위의 문장을 출력할 수 있는 함수를 하나 생성한 뒤, 그 함수를 10번 사용하면 되지 않을까?

함수의 기능을 적고 제작하는 것이 선언 / 제작한 함수를 불러와 사용하는 것을 호출이라 한다.

앞선 예시보다 반복적인 노동을 줄일 수 있어 효율도 좋아졌고, 코드 자체가 더 깔끔해졌기 때문에 가독성도 좋아졌다.

좋은 코드의 필수 요소 중 하나인 "읽기 쉬운 코드"에 한 발 더 가까워진 것 같다는 느낌이다.

다른 개발자가 보기에도 이전 코드보다 훨씬 깔끔하고 어떤 방식으로 기능을 구현했는지 이해하기 더 쉬운 느낌이다.

---

매개변수parameter와 전달인자argument

코드 예시를 봤을 때 한 가지 아쉬운 점이 있었다. 만약 우리가 반복적인 코드를 출력하는데, 조금씩 그 내용이 다르다면 어떻게 해야될까? 

틀린 그림 찾기...?

비슷한 코드고 반복적인 내용이 여러가지 들어가 있는데, 공통적으로 바뀌는 단어가 있다. '지구에인사'함수는 어디에서부터 시작했는지와 지구의 색을 다르게 적는 것 외에는 전체적으로 같은 내용을 출력하고 있다.

그렇다면 반복적으로 바뀌는 두 단어를 임의로 입력하면 하나의 함수로 만들 수 있지 않을까? 

위와 같은 의문을 해소해줄 기능이 함수에는 마련되어 있다. 바로 매개변수parameter와 전달인자argument다.

매개변수parameter는 함수를 실행할 때 입력에 따라 바뀔 수 있는 변수로 함수를 선언하는 과정에서 사전에 특정 값은 유동적으로 변동할 수 있게 예외를 두는 것이다. 단, 이럴 때 전달인자argument를 통해 함수 호출 시 매개변수에 할당되는 값을 입력해야 함수가 정확히 작동된다. 단, 만약 한 개 이상의 매개변수가 있을 때 하나의 전달인자에만 값을 할당하면, 할당되지 않은 매개변수들은 undefined값으로 처리되니 주의하자.

console 창 결과

앞선 예시에서 사용된 함수는 반드시 같은 내용을 출력해 반복적으로 출력할 수 있는 한계가 있다면, 이제는 조금 더 자유롭게 원하고자 하는 입력값을 넣어 사용할 수 있다. 이처럼 함수는 다양한 작업에 활용할 수 있고, 코드를 간략화해 가독성 좋은 코드에 일조할 수 있다.