🌈 시작하며

함수가 드디어 나오네요.
사실 함수란 자바스크립트 뿐만 아니라 거의 모든 프로그래밍 언어에서 중요시 다뤄지는 개념이죠.

사실 방대한 양이지만, 함수라는 말을 너무 어렵게 받아들이지 말고, 우리가 예전부터 알고 있었다는 듯이, 가벼운 호흡으로 보시는 것을 추천드려요.

"그렇게 편히 가다 보면, 생각과 달리 함수와 비슷한 사고를 예전부터 하고 있던 자신을 조우할 수도 있어요. 그럼 시작해볼까요!" 😉

🚦 본론

우리 인풋, 아웃풋이라는 말, 많이 쓰죠?
프로그래밍은 참 좋아요. 인풋을 투입했을 때, 아웃풋에 대한 기댓값을 다른 인문학과 달리 어느 정도 비슷하게 산출할 수 있거든요. 제가 개발에 반한 이유이기도 합니다.

아, 잡소리가 길었군요.
이런 말을 왜 했냐면, 함수가 바로 그런 역할을 해줍니다.
음. 예시로 잠깐, 학교에 가는 어떤 꼬마의 이야기를 들어볼까요?

🙇🏻‍♂️: 제가 오늘 너무 피곤해서 공부 대신 일찍 자야할 것 같은데, 혹시 제가 내일 7시까지 학교에 가려면 몇 시에 자도 될까요?

어찌 보면 그냥 일상 속 이야기지만, 사실 이것 역시 인풋과 아웃풋으로 이루어진 함수로 풀이할 수 있어요.
한 번, 이 친구가 언제 자야 하는지를 함수로 만들어볼까요?

function getSleepAt(arriveAt) {  
    const fallingSleepTime = 6;
    const readyTime = 0.5;
    const goSchoolTakenTime = 0.25;

  	const result = arriveAt - sleepTime - readyTime - goSchoolTakenTime;
  	
    return result > 0 ? result : 24 + result;
}

console.log(getSleepAt(7) // 0.25 - 00시 15분이군!

약간 이해가 되시나요?
결국 우리는 꼬마의 문제를 해결하기 위해 일련의 인풋과 아웃풋을 산정한 거에요.

• 인풋: 내일까지 가야 할 시간
• 아웃풋: 언제 자야 할까!
• 내부 로직: 내가 평소에 몇 시간 잠자는지, 학교 준비에 얼마나 걸리는지, 학교까지 가는데 얼마나 걸리는지를 계산하여 이를 목표 시간에 반영한다.

따라서 우리, 너무 어렵게 생각하지 말자구요.
우리가 문제를 해결하는 과정들을 컴퓨팅 사고로 일목요연하게 하나의 방법으로 반영한 것! 그것이 함수라 할 수 있겠어요. 꽤나 재밌지 않나요? 😉

이렇게 함수로 구현하면 유용한 것은 무엇일까요?

1. 재사용을 할 수 있어요! - 앞으로 저 꼬마는 매개변수만 넣으면 쉽게 갈 시간을 계산할 수 있어요!
2. 코드가 안정적이에요! - 다른 잡스런 행동들이 들어가지 않게, 아예 외부 로직이 조작하지 못하게 블록으로 감쌌어요. 이제 꼬마는 정확한 계산을 할 수 있어요!
3. 가독성이 좋아요! - 함수 이름만 봐도, 내부에 들어간 로직들이 무엇을 위함인지를 알 수 있으니까요!

그래도 우리는 좀 더 제대로 정리하고 이해할 필요가 있겠죠? 저는 함수를 다음과 같이 정리할 것 같아요.

정리:
1. 함수는 문제를 해결하는 과정을 블록({})으로 구분하여 원하는 로직이나 결과를 얻어내는 문(statement)이다!
2. 적재적소에 사용한 함수는 가독성, 재사용성, 안정성을 높일 수 있다!

함수 정의와 호출

쉽게 말하자면 함수를 생성할 때의 그 모양! 그거에요.

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

add(1 + 2) // 호출

이게 함수 정의입니다. 그리고 이 정의를 호출하는 것을 함수 호출이라고 해요.
뭔가 모호하죠? 그냥 정말 쉽게 설명하자면, 다음 4가지가 함수 정의라고 생각하시면 돼요.

• 함수 선언문
• 함수 표현식
• Function 생성자 함수
• 화살표 함수

또 책에서 보니, '변수에서의 선언'이 곧 '함수에서는 정의'로 표현된다고 하네요! 🙇🏻‍♂️

함수 선언문

당연한 말이지만, 선언으로 되었을 때에는 이름을 생략할 수 없어요.

function () {
} // Uncaught SyntaxError: Function statements require a function name

🔥 어라? 그런데, 저렇게 함수 이름 안 쓰는 거, 몇 번 보았는데요?

맞아요. 다음과 같이, 값으로 할당해준다면 가능해요! 이를 함수 표현식이라고 합니다.
함수는 특이하게 문도 되지만, 표현식으로도 가능한 친구에요! 😮

var b = function() {};
b(); // undefined

이런 이름이 없는 친구를 익명함수라고 해요.
사실 표현식으로 가면, 이름이 없어도 됩니다.
이유는, 책에 따르면 함수 이름은 애당초 함수 몸체에서만 사용 가능하기 때문이에요.

이를 믿지 못하겠다면, 다음을 해보시죠!

(function c() {});
c(); // Uncaught ReferenceError: c is not defined

이는 다음과 같은 로직으로 흘러갔기 때문입니다.

1. 함수 표현식으로 해석해야지!
2. 그런데 얘는 식 아냐? 음... 식에는 따로 변수를 할당하지는 않는데...
3. 그냥 식별자가 없는 식으로 치지 뭐. (휙)

여기서 나오는 게 또 기본기죠!
우리는 선언 및 초기화(평가 단계) - 이후 실행을 한다는 것을 이전에 확인했죠? 😉
이미 리터럴처럼 값으로 묶어서 넘어간 단계에서는 이후 실행에서 객체를 생성해줘야 해요.

반면 나머지 실행 구문들은 (위의 로직에서의 c()) 아직 컴파일 단계에서 식별자를 찾느라 허우적대고 있어요. 😭 따라서 컴파일 단계에서 참조 오류가 발생한 겁니다!

따라서 함수 이름은 식별자라기 보다는, 몸체에서만 사용 가능한 식별자라고 할 수 있겠네요.
대신, 자바스크립트 엔진은 함수 선언문 때는 사용해야 하므로, 함수 이름과 같은 이름의 식별자를 생성하여 객체를 할당한다고 하네요! 😮

일급 객체

이름이 어려워서 그런데, 막상 내용을 까보면 쉽습니다.
함수는 객체로 이루어져 있으며, 리터럴로도 표현할 수 있죠. 그리고 리터럴은 변수에 할당 가능한 '값'입니다.

따라서 함수는 '값'처럼 사용할 수 있는 객체에요. 이러한 것을 '일급 객체'라고 하며, 자바스크립트 함수의 특성이라고 보면 되겠네요.

이 일급 객체의 특성인 '값'! 꼭 기억해주세요. 앞으로 클로저 등을 이해하는 데 나옵니다!

함수 생성 시점과 함수 호이스팅

이거... 길게 설명되어져 있는데, 그냥 잘 생각하면 쉬워요. 계속 같은 말입니다.

함수 표현식 = 변수에 함수 리터럴이 할당된 문이죠?

그렇다면, 함수는 이미 값으로 표현되었고, 변수는 먼저 선언이 된 상태에요.
그리고 값을 실행할 시점에서 식에 맞춰 객체를 생성하죠. 그저 함수 객체라는 '값'이라는 상태로 존재하는 겁니다.

따라서 함수 표현식에서는 변수 호이스팅만 일어납니다! 쉽죠? 🥰

Function, 화살표 함수

Function은 실제로 조작할 일이 없을 것 같아요. 일반적으로 생성한 함수와 다르게 동작하기 때문이죠. (외부 렉시컬 환경에서의 식별자 참조 불가)

우리가 좀 더 살펴야 할 것은 화살표 함수에요.

var a = () => {};

이 친구는 좀 특이한데요.
this로 인한 동적 스코프의 대환장 파티를 어느 정도 완화시킨 친구에요. 아마 this를 이야기할 때 볼 것 같으니, 나중에 살펴보죠!

함수 호출

매개변수와 인수

음, 매개변수가 중요하겠네요.
매개변수는 실행 단계에서 함수가 호출되었을 때 암묵적으로 생성되는 친구들이에요. 따라서 먼저 선언 - 초기화의 평가단계를 거친 후, 인수가 할당되는 방식으로 전개됩니다.

따라서 만약 값이 할당되지 않았다면, 값은 undefined입니다.

function a(b) {
	console.log('b: ', b);
}

a(); // b: undefined

그렇다면, 만약 더 많이 인수를 넣었다면 어떻게 될까요?
사실 일반적인 로직 상에서는 매개변수에 할당할 수 있는 만큼만 다뤄지는데요.
다만 arguments 객체에 보관이 되기는 해요.

참고로 이 객체는 유사 배열 객체입니다!

function a(b) {
	console.log(arguments.map(a => a));
}

a(1,2,3,4,23) // arguments.map is not a function

인수 확인

음, 예전에 글로 남겼던 타입 가드가 여기서 쓰여지는군요!
안정적인 코드를 만들기 위해 중요한 습관입니다. 😉

매개변수의 최대 개수

책에 나온대로, 최대 개수는 존재하지 않아요. 다만 적으면 적을 수록 유지보수에 좋아요.
다만 이 문구는 정말 좋네요.

함수는 한 가지 일만 해야 하며, 가급적 작게 만들어라.

잘게 쪼갤 수록, 쪼갠 함수들을 다시 또 사용할 수 있어 재사용성이 늘어난답니다!
(다만, 이른 얘기지만 너무 지나친 함수 분할은 또 코드의 분산으로 인해 고통받을 수도 있어요. 예컨대 단순히 더하면 되는 로직을 또 add라는 함수로 구현할 필요는 없다는 거죠. 상황에 따라 적절히! 😉)

반환문

return! 함수와 쓸 수 있는 친구에요.
가끔은 모든 로직을 돌 필요 없이 원하는 값만 찾고 로직을 끝내고 싶을 수도 있겠죠? 그 값을 들고 빠져나오기 위한 친구에요.

반환문이 있기에, 함수는 비로소 값을 가질 수 있게 된 거죠 🥰

function 현재시각구하기(now) {
	if (now < 12) {
    	return '오전'
    }
  	
  	return '오후';
}

그렇다면 반환문이 없다면 어떻게 될까요?
함수는 일급객체로써 성질을 유지해야 해요. 일급객체가 뭐죠? 값을 가져야 하죠!
따라서 일반적으로 반환문을 선언하지 않아도, 암묵적으로 undefined를 반환합니다!

참조에 의한 전달과 외부 상태의 변경

이마저도 길게 나왔는데요, 결국 인수로 전달한 값의 타입(원시 타입, 객체 타입)의 특성을 잘 반영한다는 겁니다.

특히 객체 타입은 불변성에 대한 이슈가 있다는 것을 바로 직전 파트에서 확인 가능했죠? 😉 객체 타입에서의 참조값은 다같은 객체 값을 공유하고 있다는 것에 유념해주세요!

IIFE(즉시 실행 함수)

은근 많이 사용하는 친구에요.
특히 전역 네임스페이스를 오염시키지 않도록 할 수 있다는 장점이 있습니다.
보통 초기화할 때만 동작해야 할 로직이 있을 때 써요! 😉

(() => {
	// ...
})();

// 값으로도 할당할 수 있어요!
const total = (((a, b) => a + b)(1, 2));
console.log(total); // 3

쉽게 생각한다면, ()으로 감싼 순간, 함수 리터럴 표현식이 되죠?
그 식을 바로 호출했다!라고 생각하시면 편합니다 :)

저같은 경우에는 저렇게 화살표 함수로도 할 때도 많지만, 이름을 써주는 경우도 있어요.
이유는, 저 로직에 대한 부연 설명을 식별자로 할 수 있기 때문이죠. 그래도 전역 네임스페이스를 건드리지 않으니까요! 😆

재귀함수

음... 이 친구는 자기 자신을 호출하는 친구죠!
따라서 잘못된 사용은 무한 호출로 인한 콜스택 폭발로 이어질 수 있답니다 🥲

항상 리턴을 어떻게 할지를 고민하면서 하기!
결국에는 리턴 값을 바탕으로 다시 계산하는 거니까요. 🙆🏻

function factorial(num, result = 1) {
  	if (typeof num !== 'number' || num < 0) return null;
  
	return num < 1 ? result : factorial(num - 1, result * num); 
}

console.log(factorial(5)) // 120;

중첩 함수

함수는 함수 내부에 또 함수를 만들어줄 수 있어요.
이렇게 하는 이유는, 이 역시 네임스페이스를 깔끔하게 관리하기 위함이에요.
굳이 다른 곳에서 쓸 일이 없는데, 전역으로 관리할 이유는 없기 때문이죠! 🙇🏻‍♂️

function outer() {
	function inner() {
    	...
    }
     
    inner();
}

콜백 함수

콜백함수 정말 중요하죠. 그런데 사실 매우 간단한 친구입니다.

우리 다시 또 떠올려 보자구요. 함수는 값이죠?
매개변수는 인수로 전달된 값을 할당하죠?

따라서 콜백 함수는 인수로 외부에서 전달하는 함수를 의미해요. 바로 다음과 같이 말이죠!
우리가 평소에 보는 addEventListener 메서드를 생각하면 쉬워요 😉

const onClick = () => {
  console.log('hi');
}

$element.addEventListener('click', onClick)

onClick이 여기서 콜백 함수입니다. 이렇게 해야 할 로직들을 헬퍼함수로 추상화해서 전달하니까, 함수가 기능할 수 있는 확장성이 더욱 거대해진 거에요. 엄청난 마법이죠! ✨

이렇게 함수의 외부에서 콜백 함수를 전달 받은 함수를 고차 함수라고 합니다.
이 친구도 앞으로 많이 괴롭힐테니, 외워두죠!

순수함수, 비순수함수

어떤 동일한 인자가 들어왔을 때 같은 값을 반환하는, 즉 외부 상태에 의존하지 않고 일정한 결과를 전달하는 함수를 순수함수라 하고, 그렇지 않은 친구를 비순수함수라고 합니다.

처음 들으실 때는 와닿지 않으실 거에요. 하지만 예시를 보면 이해가 가실 겁니다!

const arr = [1,4,3,2]
console.log(arr.map((a, i) => i + 1)) // [1,2,3,4]
console.log(arr) // [1,4,3,2]

// 비순수함수
const arr = [1,4,3,2]

arr.sort((a, b) => a - b); 
console.log(arr) // [1,2,3,4]

대표적으로 map이 순수함수이며, sort가 비순수함수입니다.

map으로 연산이 되면 arr 자체는 변하지 않죠? 즉, 순수함수는 외부 상태에 의존하지 않는 함수이기에, 따라서 오직 매개변수를 받고 내부의 독립적인 환경에서 로직을 처리하기에 순수하다는 것이죠!

반면 sort는 매개변수를 받고, arr라는 외부의 상태 값을 변화시켰어요. 따라서 비순수함수라는 겁니다.

당연히 순수함수가 더욱 지향해야 할 함수겠죠? 함수형 프로그래밍에서는 순수함수를 지향해야 하도록 합시다.
그래서 비순수함수인 sort는 가끔 자바스크립트가 낳은 실수로 취급 받습니다. 😭

🚀 마치며

오... 3시간이 남짓 걸렸는데요.
정말 35쪽 분량의 적지 않은 내용이었어요.

다만, 저 역시 이를 정리하면서 함수의 실행 순서라던지 디테일한 부분에서 많이 깨닫고 갑니다.
특히 식별자 부분은 좀 더 저를 반성하게 되었던 계기를 주었어요.

기본기가 쌓이니까, 점점 더 설명이 풍부해지고 단단해지는 기분이 들어서 좋아요. > 다들 즐거운 코딩하시길 바라며. 이상! 🌈