- 스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많습니다.
- 함수는 프로그램을 구성하는 주요 '구성 요소(building block)'입니다.
- 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있습니다.
함수 선언
- 함수 선언 방식은 함수 선언문이라고 부르기도 합니다
function showMessage() {
alert( '안녕하세요!' );
}
showMessage();
showMessage();
- function키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언할 수 있습니다.
- 새롭게 정의한 함수는 함수 이름 옆에 괄호를 붙여 호출할 수 있습니다.
- showMessage()같이 말이죠.
지역 변수
- 함수 내에서 선언한 변수인 지역 변수(local variable)는 함수 안에서만 접근할 수 있습니다.
function showMessage() {
let message = "안녕하세요!"; // 지역 변수
alert( message );
}
showMessage(); // 안녕하세요!
alert( message ); // ReferenceError: message is not defined (message는 함수 내 지역 변수이기 때문에 에러가 발생합니다.)
외부 변수
- 함수 내부에서 함수 외부의 변수인 외부 변수(outer variable)에 접근할 수 있습니다.
- 함수에선 외부 변수에 접근하는 것뿐만 아니라, 수정도 할 수 있습니다.
let userName = 'John';
function showMessage() {
userName = "Bob"; // (1) 외부 변수를 수정함
let message = 'Hello, ' + userName;
alert(message);
}
alert( userName ); // 함수 호출 전이므로 John 이 출력됨
showMessage();
alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜
매개변수
- 매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다.
- 매개변수는 *인수(argument)*라고 불리기도 합니다
- 전역 변수 from이 있고, 이 변수를 함수에 전달하였습니다.
- 함수가 from을 변경하지만, 변경 사항은 외부 변수 from에 반영되지 않았습니다. 함수는 언제나 복사된 값을 사용하기 때문입니다.
function showMessage(from, text) {
from = '*' + from + '*'; // "from"을 좀 더 멋지게 꾸며줍니다.
alert( from + ': ' + text );
}
let from = "Ann";
showMessage(from, "Hello"); // *Ann*: Hello
// 함수는 복사된 값을 사용하기 때문에 바깥의 "from"은 값이 변경되지 않습니다.
alert( from ); // Ann
기본값
- 매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면
- '기본값(default value)'을 설정해주면 됩니다. 매개변수 오른쪽에 = 을 붙이고 undefined대신 설정하고자 하는 기본값을 써주면 되죠.
function showMessage(from, text = "no text given") {
alert( from + ": " + text );
}
showMessage("Ann"); // Ann: no text given
반환값
- 함수를 호출했을 때 함수를 호출한 그곳에 특정 값을 반환하게 할 수 있습니다.
- 이때 이 특정 값을 반환 값(return value)이라고 부릅니다.
function checkAge(age) {
if (age >= 18) {
return true;
} else {
return confirm('보호자의 동의를 받으셨나요?');
}
}
let age = prompt('나이를 알려주세요', 18);
if ( checkAge(age) ) {
alert( '접속 허용' );
} else {
alert( '접속 차단' );
}
함수 이름짓기
- 함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것입니다.
- 따라서 함수의 이름은 대개 동사입니다.
- 함수 이름은 가능한 한 간결하고 명확해야 합니다.
- 함수가 어떤 동작을 하는지 설명할 수 있어야 하죠.
- 코드를 읽는 사람은 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 합니다.
- 함수가 어떤 동작을 하는지 축약해서 설명해주는 동사를 접두어로 붙여 함수 이름을 만드는 게 관습입니다.
- 다만, 팀 내에서 그 뜻이 반드시 합의된 접두어만 사용해야 합니다.
showMessage(..) // 메시지를 보여줌
getAge(..) // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..) // 합계를 계산하고 그 결과를 반환함
createForm(..) // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함