함수 너 뭐니?

한국 중고등 교육 과정을 지내봤다면 한번 쯤은 아니 수백 번쯤은 들어봤을 함수. 수학에서 쓰던 함수가 너가 왜 여기서 나와?

간단한 함수식 하나를 생각해보겠읍니다. f(x) = x + 1이라는 함수식이라면 x에 1이라는 값을 넣은 함수식은 f(1) = 1 + 1이 되고 결과로 2라는 값을 리턴합니다. 지금 저 함수식을 이해하신다면 우린 자바스크립트 함수, 함수의 매개변수에 대해 이해하신겁니다. 또한 리턴이라는 개념도 이해하신겁니다. 아주 쉽죠? 😆 자 이제 제대로 털어보러 갈까요?

함수 너 어떻게 생겼니?

함수는 이렇게 생겼다.

function 함수이름 (매개변수) {
	함수를 정의하는 자바스크립트 표현
}

1. 첫 번째 function 이라는 키워드를 사용해 우린 컴퓨터에게 함수라고 알려줍니다. "자 이게 함수라는 거야."

2. 이제 이름을 줘야겠죠? 그렇다면 함수이름을 지어줍니다. function 키워드와 소괄호 사이에 이름을 적어주면 됩니다. 이름을 정의하지 않은 함수도 있는데, 우리는 이를 익명 함수라고 부릅니다. 궁금하시면 구글링을 이용해 주세요 😅

3. 함수 이름 옆 매개변수 차례입니다. 함수 이름 옆 소괄호로 둘러싸여진 부분에 넣어주면 됩니다. 저는 처음 자바스크립트를 배울 때 저 매개변수에 큰 역할이 있을 거 같다고 생각했습니다. 근데 지금 보니 큰 역할을 맡은 놈이 아니더라구요. 자신의 자리에 들어온 놈을 중괄호 {} 안에 있는 애들 중 자기랑 똑같이 생긴 놈에게 자신의 자리에 들어온 놈의 손을 잡고 그냥 데려다 주는 역할을 하는 거였습니다. 이해가 안되신다면 예시를 봐주세오.

	function chickenMukGoShipDda(aChicken, bChicken, cChicken){
    		return aChicken + '과/와 ' + bChicken + '과/와 ' + cChicken + '을/를 먹고 싶습니다. 도네이션 부탁드립니다.'
    	}
	chickenMukGoShipDda('BBQ', 'BHC', '노랑통닭') 
	// BBQ과/와 BHC과/와 노랑통닭을/를 먹고 싶습니다. 도네이션 부탁드립니다.

저는 chickenMukGoShipDda라는 함수의 매개변수 자리에 3개의 매개변수를 받고 있죠?
aChicken, bChicken, cChicken이라는 우리는 함수를 실행시키기 위해 저기 매개 변수에 무언가를 넣죠? 그러면 매개변수 (aChicken, bChicken, cChicken) 들이 자신의 자리에 들어온 것들의 멱살을 잡고 실행문 안에 있는 곳에 대려다 줍니다. 어디다가? 자기랑 똑같은 스펠링으로 이루어진 곳에. 이게 매개변수의 역할입니다. 저는 BBQ와 BHC 노랑통닭을 자리에 넣어줬어요. 여러분은 무엇을 넣고 싶으신가요? 😁

4. 함수를 실행하기 위해선 모든 준비를 마쳤습니다. 이제 요리법만 적어주면 에브리띵 윌 비 오케이 입니다. 중요한건 이 중괄호 {} 안에다가 적어주셔야 합니다.

함수를 만들어봤습니다. 근데 두 가지의 방법을 곁들인

1. 함수 표현식

	const func = function(name) {
    		return name;
    	}
    	console.log(func('ben')) // 궁금하다면 콘솔창으로 직행 go

- 함수를 정의하면서 동시에 변수 func에 바로 할당해버림
* 어 ? 여기엔 함수의 이름이 없는데요 ? 거짓말치다가 걸리면 손모가지 날라가는 게 이 바닥 룰인데? 
- 함수 표현식으로 함수를 만들었다면 변수의 이름이.. 함수의 이름이야..
* 아 ㅇㅋ ><

2. 함수 선언문

	function func (name) {
    		return name;
    	}

뭐.. 설명.. 없어요..

여기선 두 가지 방법만 설명했지만 추가적으로 찾아보면 화살표 함수(Arrow Function)가 ES6에 추가 되었답니다. 궁금하시다면 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
이 문서를 읽어보세요~!!

함수를 불러보세요. 무야~ 호~

	function muYaHo () {
    		return '무야~ 호~'
    	}

종종 다른 페어분들이 실수 하는 것 중 하나가 함수를 실행하는 것과 함수를 불러보는 것을 헷갈리신다. 처음에 낯 익지 않기 때문에 하는 실수 이기 때문에 당연히 거쳐가는 과정이라고 항상 말씀드린다.
이제 이 글을 읽었다면 이제 절대 잊지 않을 거에요.

	muYaHo() !== muYaHo
	// 함수 실행 !== 함수 불러보기
	// 실행을 위해선 소괄호()를 붙여한다는 것을 잊지말자.

한번 더!
함수 실행 !== 함수 불러보기
실행을 위해선 소괄호()를 붙여한다는 것을 잊지말자.

왜 내 함수는 값을 출력하지 않죠? return에 대해 알고 계신가요?

return이 중요하냐?

return의 중요성을 깨닫는 순간, 코딩실력은 한 단계 성장할 것이여~

return 이라는 이야기를 하기 전 우리는 왜 함수를 사용하는 가에 대해 진지하게 생각할 필요가 있다.

우린 왜 함수를 사용하는가 ?

간단한 예시로 우리의 신체가 있다. 인간의 신체는 수 많은 걸로 이루어져있다. 뼈, 근육, 피부 등등
또 그 아래로 수 많은 것들이 구성되어 있다.
몸 속의 기관들은 자신만의 기능이 있다. 그 기능을 사용해 우린 몸을 움직이고 사용할 수 있다.
폐는 산소를 항상 리턴할 것이며, 심장은 피를 리턴할 것이고, 이 글을 읽는 독자들의 뇌는 지금 도파민을 리턴할 것이다. 만약 폐, 심장, 뇌 같은 기관들이 존재만 하고 리턴을 하지 않는 다면, 우린 이승을 하직해야만 할 것이다.
자, 이제 본론으로 들어가자.

return의 중요성은 이제 알았고 어떻게 사용하니?

우리는 코드를 짜서 컴퓨터에게 알려준다. 그러면 컴퓨터는 그 코드를 쭉 읽고 기억 할 것이다. 코드 중 선언된 함수를 보면서 컴퓨터가 return을 보면 그 즉시 함수를 중단 시키고 return 옆에 있는 걸 리턴한다. 뒤에 무슨 코드가 남아있던 안남아있던. 뒤도 돌아보지 않고 중단하고 리턴한다.

function calculator(a,b){
	return a + b;
  	let 곱하기 = a * b;
  	return 곱하기;
}

위에 있는 함수는 무조건 매개변수 두 개의 값을 더해 그 더 해진 값을 리턴할 것이다. 코드를 수정하기 전까진 죽었다 깨어나도 곱하기 값은 뱉어내지 않을 것이다.
그럼 만약 return 이라는 키워드를 사용하지 않는 다면 뭘 반환할까?

function calculator(a,b){
	a + b;
}

컴퓨터가 만약 이 함수를 보면 굉장히 얼탱이가 없을 것 이다.
아니 더해서 뭐 어떻게 하라고? (이런 반응?) 시켜서 더하긴 했는데, 내가 값을 임시로 갖고 있는 건 안돼. 다음꺼 일하러 가야되서 바쁘니까. 그니까 그냥 버린다? 결과값 갖고 싶음 코드 수정해라.
아마 위처럼 대답할 것이다. 유두리 없는 컴퓨터는 진짜 버린다. 그 값이 중요하던 아니던.
그리고 만약 값이 궁금하다면 콘솔창에 calculator(1, 4)를 쳐보면 나온다. 시도해보시오👊

---

여기까지 함수의 신상을 털어보았다. 펼쳐보니 별거 없지 않은가요? 그러니 무서워하시지 마시고 이 놈들 데리고 즐거운 코딩을 하시길 기원합니다. 유두리가 좀 없지만 애는 착해요.

이 글을 읽고 자바스크립트에 조금이나마 흥미가 생기시길 바라며 글을 마칩니다. 마지막으로 외칩니다.

무야~호~~ ~~~ ~~🔥