함수 선언 방식으로 함수를 만들 수 있습니다.
function 함수이름(복수의, 매개변수는, 콤마로, 구분합니다) {
/* 함수 본문 */
}
undefined
가 됩니다.깔끔하고 이해하기 쉬운 코드를 작성하려면 함수 내부에서 외부 변수를 사용하는 방법 대신 지역 변수와 매개변수를 활용하는 게 좋습니다.
개발자는 매개변수를 받아서 그 변수를 가지고 반환 값을 만들어 내는 함수를 더 쉽게 이해할 수 있습니다. 매개변수 없이 함수 내부에서 외부 변수를 수정해 반환 값을 만들어 내는 함수는 쉽게 이해하기 힘듭니다.
함수 이름을 지을 땐 아래와 같은 규칙을 따르는 것이 좋습니다.
create…
, show…
, get…
, check…
등의 잘 알려진 접두어를 사용해 이름을 지을 수 있습니다. 접두어를 사용하면 함수 이름만 보고도 해당 함수가 어떤 동작을 하는지 파악할 수 있습니다.함수는 스크립트를 구성하는 주요 구성 요소입니다. 지금까지 다룬 내용은 함수의 기본입니다. 여기선 함수를 만드는 방법, 사용하는 방법을 소개했는데 이 내용은 시작일 뿐입니다. 이어지는 챕터에선 지금까지 배운 것을 바탕으로 함수가 제공하는 고급 기능에 대해 학습해 보도록 하겠습니다.
매개변수 기본값
매개변수에 값을 전달하지 않아도 그 값이 undefined
가 되지 않게 하려면 함수를 선언할 때 =
를 사용해 '기본값(default value)'을 설정해주면 됩니다.
function showMessage(from, *text = "no text given"*) {
alert( from + ": " + text );
}
showMessage("Ann"); // Ann: no text given
이젠 text
가 값을 전달받지 못해도 undefined
대신 기본값 "no text given"
이 할당됩니다.
함수는 동작 하나만 담당해야 합니다.
함수는 함수 이름에 언급되어 있는 동작을 정확히 수행해야 합니다. 그 이외의 동작은 수행해선 안 됩니다.
독립적인 두 개의 동작은 독립된 함수 두 개에서 나눠서 수행할 수 있게 해야 합니다. 한 장소에서 두 동작을 동시에 필요로 하는 경우라도 말이죠(이 경우는 제3의 함수를 만들어 그곳에서 두 함수를 호출합니다).
개발자들이 빈번히 하는 실수를 소개해 보겠습니다.
getAge
함수는 나이를 얻어오는 동작만 수행해야 합니다. alert
창에 나이를 출력해 주는 동작은 이 함수에 들어가지 않는 것이 좋습니다.createForm
함수는 form을 만들고 이를 반환하는 동작만 해야 합니다. form을 문서에 추가하는 동작이 해당 함수에 들어가 있으면 좋지 않습니다.checkPermission
함수는 승인 여부를 확인하고 그 결과를 반환하는 동작만 해야 합니다. 승인 여부를 보여주는 메시지를 띄우는 동작이 들어가 있으면 좋지 않습니다.위 예시들은 접두어의 의미가 합의되었다고 가정하고 만들었습니다. 본인이나 본인이 속한 팀에서 접두어의 의미를 재합의하여 함수를 만들 수도 있긴 하지만, 아마도 위 예시에서 사용한 접두어 의미와 크게 차이가 나진 않을 겁니다. 어찌 되었든 접두어를 사용하여 함수 이름을 지을 땐, 해당 접두어에 어떤 의미가 있는지 잘 이해하고 있어야 합니다. 해당 접두어가 붙은 함수가 어떤 동작을 하는지, 어떤 동작은 하지 못하는지 알고 있어야 하죠. 접두어를 붙여 만든 모든 함수는 팀에서 만든 규칙을 반드시 따라야 합니다. 팀원들은 이 규칙을 충분히 이해하고 있어야 하며, 팀원들 사이에 이 규칙이 잘 공유되어야 합니다.