함수 선언 방법
- function 함수명(파라미터1, 파라미터2, ...) { 본문 }
- 함수는 이름만 보고도 무슨 역할을 하는지 알 수 있는 "자기 설명적(self-describing)" 코드로 작성해야한다.
지역 변수
- 함수 내에서 선언한 변수
- 함수 내에서만 접근 가능함
외부 변수
- 전역 변수
- 함수 내부에서 함수 외부에 선언된 외부 변수(outer variable) 접근 가능함. (수정도 가능)
let userName = 'John';
function showMessage() {
userName = "Bob"; // (1) 외부 변수를 수정함
let message = 'Hello, ' + userName;
alert(message);
}
alert( userName ); // 함수 호출 전이므로 John 이 출력됨
showMessage();
alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜- 지역 변수가 없는 경우에만 사용 가능
- 만약 동일한 이름의 변수가 내외부에 있다면, 내부 변수가 외부 변수를 가리게 됨
- 즉, 같은 이름을 가진 지역 변수에 의해 가려지지 않는다면 모든 함수에서 접근 가능함. (따라서 사용이 권장되지 않고, 최소화 해서 사용하는게 권장됨)
let userName = 'John';
function showMessage() {
let userName = "Bob"; // 같은 이름을 가진 지역 변수를 선언합니다.
let message = 'Hello, ' + userName; // Bob
alert(message);
}
// 함수는 내부 변수인 userName만 사용합니다,
showMessage();
alert( userName ); // 함수는 외부 변수에 접근하지 않습니다. 따라서 값이 변경되지 않고, John이 출력됩니다.
매개 변수
- 파라미터, 인수
- 매개변수 : 함수 선언 방식 괄호 사이에 있는 변수 (선언 시 파라미터를 부르는 용어)
- 인수 : 함수 호출 시 매개변수에 전달되는 값 (호출 시 파라미터를 부르는 용어)
기본값
- 함수 호출 시 매개변수를 전달하지 않으면 undefined 가 default 로 들어간다.
function showMessage(from, text = "no text given") {
alert( from + ": " + text );
}
showMessage("Ann"); // Ann: no text given
혹은
function showMessage(from, text = anotherFunction()) {
// anotherFunction()은 text값이 없을 때만 호출됨
// anotherFunction()의 반환 값이 text의 값이 됨
}- JS 는 파라미터 개수에 맞춰 전달되지 않아도 에러는 안 일으키고, undefined 가 전달됨.
- 따라서 undefined 가 되지 않게 하려면 위와 같이 기본 값 default value 를 파라미터에 fix 해둘 수 있음.
- 기본값 평가 시점은 함수 호출이 될 때 마다 일어난다.
- 옛날 JS 에는 위처럼 기본값 설정을 할 수 없었으므로, 아래와 같이 처리한 흔적을 볼 수 있다. 참고할 것.
function showMessage(from, text) {
if (text === undefined) {
text = 'no text given';
}
alert( from + ": " + text );
}
혹은
// 매개변수가 생략되었거나 빈 문자열("")이 넘어오면 변수에 '빈 문자열'이 할당됩니다.
function showMessage(text) {
text = text || '빈 문자열';
...
}
혹은
// 매개변수 'count'가 `undefined` 또는 `null`이면 'unknown'을 출력해주는 함수
function showCount(count) {
alert(count ?? "unknown");
}
showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown
반환 값
- function 함수명(arg1, arg2, ...) { ... return 반환할 값;}
- return 문이 없거나, return; 으로 끝나게 되면 함수는 undefined 를 반환한다.
- JS는 return 끝에 자동으로 ; 를 넣어버리므로, return 문 내부에 줄 삽입을 해선 안된다. 만약 return 값이 길어질 경우 아래와 같이 괄호로 씌워줘야한다.
return (
some + long + expression
+ or +
whatever * f(a) + f(b)
)