함수의 의미(가치)
함수는 코드의 집합을 나타내는 자료형으로 함수명을 선언하거나 하지 않을 수도 있다. 중괄호 {...}안에 다양한 코드를 작성하기 때문에 코드의 집합이라고 말한다.
-
반복되는 코드를 한번 정의해놓고 필요할 때마다 호출해서 사용할 수 있기 때문에 반복 작업을 피할 수 있다.
-
긴 프로그램을 기능별로 나눠서 여러 함수로 만들어 작성하면 '모듈화'로 전체 코드의 가독성을 높인다.
-
기능별로 수정이 가능하기 때문에 유지보수가 용이해진다.
! 내장함수(alert(), prompt(), log())들은 소스코드가 비공개이다. console.log(내장함수)로 찍어보면 결과 값은 f 함수명() { [native code] }로 나오게 된다.
Q. 자바스크립트 내장함수의 소스코드는 누가짠 것인가?, 키워드(예약어)는 새로 추가되는 것으로 알고 있는데 내장함수의 경우에도 새로 추가되는 경우가 있는지. 추가된다면 누가 추가하는 것인지..
A. MDN 재단에서 업데이트 운영중.. 추후 검색필요..
함수의 구조
함수는 익명함수(anonymous function)과 선언적 함수(named function)으로 크게 나누어볼 수 있고 기본 형태는 아래와 같다.
<script>
function 함수명(or 익명) () {}
</script>함수의 구성요소는
-
함수명 (익명존재)
-
매개변수
-
문장(조건, 반복 등)
-
리턴
구성요소를 포함한 함수의 기본적인 형태는 다음과 같다.
<script>
function 함수명(or 익명) (매개변수) {
문장(조건, 반복등)
return 결과값;
}
</script>- 함수명 ( ) 형태로 '호출' 해서 '함수를 실행'할 수 있고 괄호( ) 안에 매개변수를 입력해서 결과 값을 계산할 수 있다.
매개변수(parameter)의 종류
- 함수를 호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 부른다.
가변 매개변수 함수를 구현할 때 자바스크립트에서는 나머지 매개변수(rest parameter) 문법을 사용해서 결과 값을 계산한다.
<script>
function 함수명(...나머지 매개변수) { }
</script>- 나머지 매개변수를 사용하면 매개변수를 배열의 형태로 인식하여서 함수 계산을 실행할 수 있다.
<script>
function sample(...items) {
console.log(items);
}
sample(1, 2); // 실행 결과: [1, 2]
sample(1, 2, 3); // 실행 결과: [1, 2, 3]
</script>- 전개 연산자 (spread operator)
<script>
// 매개변수를 모두 출력하는 함수
function sample(...items) {
console.log(items);
}
const array = [1, 2, 3, 4];
console.log(array); // 전개 연산자 사용X, 실행 결과: [Array[4]]
console.log(...array); // 전개 연산자 사용, 실행 결과: [1, 2, 3, 4]
</script>- 단순 반복문을 사용해서 함수 호출 실행을 하는 경우는 전개 연산자가 필요없을 수도 있다.
하지만 새로운 배열을 만들어서 요소들을 합칠 때는 전개 연산자를 통해서 값에 접근해야 사용할 수 있기 때문에 자주 쓰게 된다. (특히 리액트를 사용할 때?)
- 기본 매개변수
<script>
function sample(a, b=기본값) { }
</script>
- 매개변수는 왼쪽부터 입력되기 때문에 입력하지 않는 경우의 기본값을 주기 위해서는 처음 입력되는 매개변수 자리가 아니라 나중에 입력되는 자리(오른쪽)에 기본값을 설정해서 사용한다.
! 매개변수로 배열과 배열이 아닌 값이 함께 입력돼서 함수를 처리하는 경우
(입력되는 매개변수 중 최대값 구하기)
<script>
const max = (first, ...rests) {
let output;
let items;
if (Array.isArray(first)) { // 배열로 매개변수가 주어지는 경우
output = first[0];
items = first;
} else if ((typeof first) === 'number') { // 숫자로 매개변수가 주어지는 경우, 나머지 매개변수 사용
output = first;
items = rests;
}
for (const item of items) { // 매개변수를 배열화하여 최대값 구하기
if (item > output) {
output = item;
}
}
return output
}
console.log(`max(배열): ${max([1, 2, 3, 4])}`);
console.log(`max(숫자, ...): ${max(1,2,3,4)}`);
</script>
- 배열 자료형과 숫자형이 섞여서 매개변수로 입력되는 경우는 두가지를 구분할 수 있는 조건문으로 분기가 필요하고 나눈 조건에 따라서 문장을 작성하여 함수를 실행시킨다.
함수를 학습하며 우선적으로 매개변수의 쓰임에 대한 고민이 중요하다는 것을 느꼈다.
그리고 함수 실행 문장들은 앞서 배운 조건문, 반복문 등을 적절하게 활용하여 로직을 작성하는 것이 참 중요하다고 생각한다.
앞으로 함수의 장점과 의미를 기억하며 기능별로 함수를 만들고 매개변수를 잘 활용할 수 있도록 함수를 만들어보자 !
