모던 JavaScript 튜토리얼을 따라가면서 정리합니다.
2.15. 함수
- 함수는 프로그램을 구성하는 주요 ‘구성 요소(building block)’이다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다.
- 정의한 함수는 함수 이름 옆에 괄호를 붙여서 호출할 수 있다.
- 함수 내에서 선언한 변수인 지역 변수(local variable)는 함수 안에서만 접근할 수 있다.
- 함수 내부에서 함수 외부의 변수인 외부 변수(outer variabe)에 접근, 수정할 수 있다.
- 함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수는 외부 변수를 가린다.
- 전역변수(global variable): 함수 외부에 선언된 변수
- 변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋다. 근래 코드들은 대부분 전역변수를 사용하지 않거나 최소한으로만 사용한다. 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용한 경우도 있긴 하다.
- 매개 변수(parameter)를 사용하면 임의의 데이터를 함수 안으로 전달할 수 있다.
- 원시값이 함수에 인자로 전달되면 전달된 인자는 지역변수에 복사된다. 따라서 변경사항이 반영되지 않는다.
매개변수
- 매개 변수(parameter)를 사용하면 임의의 데이터를 함수 안으로 전달할 수 있다.
- 원시값이 함수에 인자로 전달되면 전달된 인자는 지역변수에 복사된다. 따라서 변경사항이 반영되지 않는다.
기본값
**매개변수에 값을 전달하지 않으면 그 값은 `undefined`가 된다.**
매개변수에 값으 전달되지 않아도 값이
undefined가 되지 않게 하려면 기본값(default value)를 설정해주면 된다.1 2 3 4 5
function showMessage(from, text = "no text given") { alert(from + ": " + text); } show Message("Ann"); // Ann: no text given
기본값으로 복잡한 표현식을 설정할 수도 있다.
1 2 3 4
function showMessage(from, text = anotherFunction()) { // anotherFunction()은 text값이 없을 때만 호출됨 // anotherFunction()의 반환 값이 text의 값이 됨 }
함수를 호출할 때마다 해당하는 매개변수가 없으면 기본값을 평가한다.
매개변수 기본값을 설정할 수 있는 또 다른 방법
함수 선언부에서 매개변수 기본값을 설정하는 것 대신 함수 실행 도중 기본값을 설정하는 게 논리에 맞는 경우가 생기기도 한다.
이 경우 매개변수를
undefined와 비교하여 함수 호출 시 매개변수가 생략되었는지 확인한다.if문
1 2 3 4 5 6 7 8
function showMessage(text) { if (text == undefined) { text = "빈 문자열"; } alert(text); } showMessage(); // 빈 문자열
논리연산자
||1 2 3 4 5
// 매개변수가 생략되거나 빈문자열이 넘어오면 변수에 // '빈 문자열'이 할당된다. function showMessage(text) { text = text || '빈 문자열'; }
null 병합 연산자
??: 0처럼 falsy로 평가되는 값들을 일반 값처럼 처리할 수 있다.1 2 3 4 5 6 7
function showCount(count) { alert(count ?? "unknown"); } showCount(0); // 0 showCount(null); // unknown showCount(); // unknown
반환 값
- 지시자
return;만 명시하는 경우 함수가 즉시 종료된다. return문이 없거나return지시자만 있는 함수는undefined를 반환한다.return은return undefined와 동일하게 동작한다.return과 반환하려는 값 사이에 새 줄을 넣어 코드를 작성하면 안 된다. 자바스크립트는 return문 끝에 세미콜론을 자동으로 넣기 때문에undefined를 반환하게 된다. 표현식을 여러 줄에 걸쳐 작성하려면 표현식이 return 지시자가 있는 줄에서 시작하게 하거나 괄호를 사용한다.
함수 이름짓기
show..: 무언가를 보여줌 (showMessage)get..: 값을 반환함 (getAge)calc..: 무언가를 계산함 (clacSum)create..: 무언가를 생성함 (createForm)check..: 무언가를 확인하고 불린값을 반환함 (checkPermission)
함수는 동작 하나만 담당해야 한다.
함수 == 주석
함수를 간결하게 만들면 테스트와 디버깅이 쉬워지고 함수 그 자체로 주석의 역할을 한다.
소수를 출력해주는 함수 showPrimes(n)
1
2
3
4
5
6
7
8
9
10
function showPrimes(n) {
nextPrime: for (let i = 2; i < n; i++) {
for (let j = 2; j < i; j++) {
if (i % j == 0) continue nextPrime;
}
alert( i ); // 소수
}
}
소수인지 아닌지 여부를 검증하는 코드를 isPrime(n)으로 빼낸다.
1
2
3
4
5
6
7
8
9
10
11
12
13
function showPrimes(n) {
nextPrime: for (let i = 2; i < n; i++) {
if (!isPrime(i)) continue;
alert( i ); // 소수
}
}
function isPrime(n) {
for (let i = 2; i < n; i++) {
if (n % i == 0) return false;
}
return true;
}
이렇게 이름만 보고도 어떤 동작을 하는지 알 수 있는 코드를 자기 설명적(self-describing) 코드라고 부른다.
과제
?나 ||를 사용하여 함수 다시 작성하기
1
2
3
function checkAge(age) {
return (age > 18) ? true : confirm('보호자의 동의를 받으셨나요?');
}
1
2
3
function checkAge(age) {
return (age > 18) || confirm('보호자의 동의를 받으셨나요?');
}
min(a,b) 함수 만들기
1
2
3
function min(a, b) {
return a < b ? a : b;
}
pow(x, n) 함수 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function pow(x, n) {
var result = 1;
for (var i = 0; i < n; i++) {
result *= x
}
}
let x = prompt("x를 입력하세요.", "");
let n = prompt("n을 입력하세요.", "");
if (n < 1) {
alert(`${n}은 양의 정수여야 합니다.`);
} else{
alert( pow(x, n) );
}