쉬운 코딩 용어2 - 함수(Function)라는게 도대체 뭘까요?

안녕하세요 Vector JUN입니다.

저번 시간에는 변수(Variable)라는 친구에 대해 배웠었죠? 다들 기억하시나요? 변수를 이해하셨다면 다음으로 꼭 만나게 되는 친구가 있습니다. 바로 함수(Function)인데요. 처음 보면 또 이런 생각이 들 수도 있습니다. "아니 변수 겨우 이해했는데 또 뭐야..." 저도 그랬습니다. 그런데 함수도 알고 보면 생각보다 정말 단순해요. 함수는 쉽게 말하면 컴퓨터한테 어떤 일을 시키기 위해 미리 만들어놓은 작은 기계 같은 친구입니다. 이번에도 어려운 말은 최대한 빼고, 쉬운 비유와 실제 코드를 이용해서 "함수가 대체 뭐야?"라는 질문 하나만큼은 무조건 해결하고 넘어가는 것을 목표로 해볼게요.

1. 함수(Function)

함수는 특정한 일을 하도록 만들어놓은 작은 기계라고 생각하면 편합니다.

예를 들어 집에 주스 기계가 있다고 상상해 봅시다.

주스 기계에 오렌지를 넣고 버튼을 누르면 어떻게 되죠?

오렌지를 넣는다
→ 기계가 작동한다
→ 오렌지주스가 나온다

정말 단순하죠? 함수도 거의 비슷합니다.

필요한 정보를 넣는다 → 정해진 일을 한다 → 결과를 보여준다

라고 생각하시면 됩니다.

예를 들어 사람 이름을 알려주면 자동으로 인사해 주는 기계를 하나 만든다고 해볼까요?

기계 이름은 greetUser라고 해봅시다.

Mina라는 이름을 넣으면

Hello, Mina

라는 결과가 나오는 겁니다.

(함수라는 말 때문에 어려워 보이지 그냥 "버튼 누르면 정해진 일을 하는 기계"라고 생각하면 갑자기 편해집니다.)

2. 함수 실제 코드 사용법 (여기서 집중하세요.)

JavaScript에서는 다음과 같이 함수를 만들 수 있습니다.

function greetUser(name) {
  return "Hello, " + name;
}

greetUser("Mina");

자, 갑자기 영어랑 괄호가 나오니까 살짝 무섭죠?

하나씩 아주 천천히 보겠습니다.

 

1. 먼저 function greetUser(name)은 컴퓨터한테 "greetUser라는 이름의 기계를 하나 만들어줘."라고 부탁하는 것과 비슷합니다.

그 안에 있는 name은 기계에 넣어주는 재료라고 생각하면 됩니다.

2. 주스 기계에 오렌지를 넣듯이 함수에는 필요한 정보를 넣을 수 있는 거죠.

return "Hello, " + name;은 "이름을 받으면 앞에 Hello를 붙여서 결과로 보내줘."라는 뜻입니다.

3. 마지막으로 greetUser("Mina");라고 적으면 우리가 만든 기계에 Mina라는 이름을 넣고 실제로 버튼을 누르는 것과 같습니다.

그러면 결과는 Hello, Mina 가 됩니다.

(정리하면 기계를 만들고 → 재료를 넣고 → 버튼을 눌러 → 결과를 받는 것입니다.)

솔직히 function, return, 괄호 이런 것들을 한꺼번에 보면 처음에는 머리가 잠깐 멈출 수 있습니다.

저도 그랬어요. 그런데 일단 오늘은 함수 = 일을 하는 기계

이것 하나만 기억해도 충분합니다.

3. 함수는 실제로 어디에 사용할까?

"근데 이런 걸 대체 어디에 쓰는데?"라는 생각이 들 수 있죠.

사실 함수는 우리가 사용하는 거의 모든 프로그램에서 엄청 많이 사용됩니다. 예를 들어 온라인 쇼핑몰에서 물건 가격을 모두 더해야 한다고 해볼게요. 매번 직접 계산하는 대신 총 가격을 계산하는 함수를 하나 만들어두면 필요할 때마다 사용할 수 있어요.

게임이라면 플레이어가 살아 있는지 확인하는 함수, 로그인 화면이라면 입력한 비밀번호가 맞는지 확인하는 함수,

계산기라면 숫자를 더하는 함수, 앱이라면 버튼을 눌렀을 때 화면을 바꾸는 함수처럼 사용할 수 있답니다.

쉽게 말하면, 컴퓨터한테 똑같은 일을 여러 번 시켜야 한다면 그 일을 함수로 만들어두는 것이라고 볼 수 있겠네요.

 

엄마가 매일

"양말 가져와."

"양말 가져와."

"양말 가져와."

라고 계속 설명하는 것보다

"양말 가져오기"

라는 명령 하나를 만들어두는 느낌이라고 생각하면 편합니다.

4. 변수와 함수의 차이

이쯤 되면 앞에서 배웠던 변수(Variable)와 헷갈릴 수도 있을 텐데,

그래서 아주 쉽게 분리해서 설명드릴게요.

 

변수 = 정보를 기억하는 상자

함수 = 일을 처리하는 기계

 

예를 들어 쇼핑몰에 10,000원짜리 상품이 있다고 해봅시다. 상품 가격인 10000을 기억해두는 것은 변수의 역할인데요.

반대로 상품 가격에 배송비를 더해서 최종 결제 금액을 계산하는 것은 함수가 충분히 할 수 있는 일이에요.

즉, 변수는 기억하고 함수는 일을 합니다.

변수 = 리멤버
함수 = 워크

(저는 또 이런 식으로 짧게 연결해서 외웠던 기억이 있네요.)

5. 초보자가 자주 하는 실수

초보자가 함수를 만들 때 자주 하는 실수 중 하나는 함수 이름을 너무 대충 짓는거에요.

예를 들어 test, doThing, abc처럼 이름을 만들어버리면 나중에 봤을 때 "얘가 대체 무슨 일을 하는 함수였지?"라는 또 기억하지 못하는 상황이 발생해버려요. 그래서 함수가 하는 일을 이름만 봐도 알 수 있도록 만드는 것이 좋습니다. 총 가격을 계산한다면 calculateTotal, 비밀번호를 확인한다면 checkPassword, 메시지를 보여준다면 showMessage처럼 이름을 만드는 거죠.

또 하나 자주 하는 실수 중에 하나가 함수는 열심히 만들어놓고 실제로 실행하지 않는다는거에요. 함수를 실행하는 것을 코딩에서는 호출(Call)이라고 부릅니다. 주스 기계를 아무리 잘 만들어놔도 버튼을 안 누르면 주스가 나오지 않겠죠? 함수도 똑같기 때문에 

"함수를 만든다 → 함수를 호출한다 → 함수가 일한다" 이 순서를 기억하면 됩니다.

한 줄 정리

"함수(Function)"는 컴퓨터에게 특정한 일을 시키기 위해 미리 만들어놓고 필요할 때마다 다시 사용할 수 있는 "작은 기계 친구"라고 생각하면 편하답니다.

결론

함수 또한 코딩을 하시면서 정말 자주 만나게 되는 중요한 친구예요.

처음에는 괄호도 나오고 return도 나오고 뭔가 갑자기 코드가 복잡해진 것처럼 보일 수는 있지만,

오늘은 딱 이것만 기억해도 충분합니다. 변수는 정보를 기억하는 상자, 함수는 일을 처리하는 기계

이 두 가지만 우선 기억한다면 이미 프로그래밍의 아주 중요한 기초 두 가지를 배우신 겁니다.
(벌써 2가지를 학습하신 여러분에게 응원의 박수를 보내봐요.)

다음에는 여러 개의 값을 한꺼번에 정리해서 보관할 수 있는 배열(Array)이라는 친구를 한번 알아보도록 할 텐데요.

오늘도 긴 글 읽어주시느라 너무너무 고생 많으셨고 지금까지 Vector JUN이었습니다.

 

 

공식 출처

MDN Web Docs의 Functions 가이드, TC39-ECMAScript 공식 명세 참고