함수는 어떤 목적을 가진 작업들을 수행하는 코드 블록으로, 여러 곳에서 실행 가능하고(재사용성), 유지보수가 용이하며 가독성을 높일 수 있다.
- function 함수명 (매개변수1, 매개변수2, .. 매개변수n){
로직
return 반환값
}
함수를 선언할 때 사용하는 방법이다. 함수를 사용하게 되면 로직이 수행된 후에 반환값을 도출한다. 함수를 작성하는 방법은 다양하다.
- 매개변수, 리턴타입이 둘다 없는 경우
- 매개변수, 리턴타입이 둘다 있는 경우
- 매개변수는 있는데 리턴타입은 없는 경우
- 매개변수가 없고 리턴타입이 있는 경우
- 함수명(매개변수 값);
함수 사용할 때는 함수명을 불러온 후에 매개변수로 사용할 값을 작성하면 된다.
함수 작성법
- 숫자로 시작할 수 없다.
- 대소문자를 구분해야 한다.
- 이미 정의된 예약어는 사용이 불가능하다.
- 특수문자는 '_' 외에는 사용하지 않는다.
<아래 내용은 권장사항> - 보통 함수명 앞에 있는 문자는 동사형으로 시작한다.
함수 선언 종류
함수선언문
가장 자주 사용되는 방법이다.
- function 함수명 (인자){
로직
return 반환값
};
익명 함수 표현식
변수에 함수를 넣어서 사용하는 방법으로, 함수명이 빠진 형태의 함수 표현식이다. 함수의 내용을 다른 변수에 복사해서 값처럼 쓰는 것이 가능하다.
- let 변수명 = function(인자){
로직
return 반환값
}; - Arrow 함수
Arrow 함수는 function(){}의 형태를 축약한 것으로, 익명함수이며 함수를 호출하기 위해서 변수를 통해 할당되어야 한다.- (매개변수) => {코드};
기명 함수 표현식
기존 이름을 호칭했던 함수를 변에 넣어 선언한다. 잘 사용되진 않는다.
- let 변수명 = function 함수명 (인자){
로직
return 반환값
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function add(a,b){
return a+b;
}
function substract(a,b){
return a-b;
}
function multiply(a,b){
return a*b;
}
function divide(a,b){
return a/b;
}
console.log(add(6,3));
console.log(substract(6,3));
console.log(multiply(6,3));
console.log(divide(6,3));
</script>
</body>
</html>
Default Parameter
설정한 매개변수와 입력한 매개변수의 값이 맞지 않을 때가 있다. 값을 적게 넣었을 경우에 정의되지 않은 나머지 매개변수들은 'undefined'로 해당값을 초기화 한다. 초기화 값은 다른 것으로도 설정이 가능하다.
- function 함수명(인자1,인자n = 초기화값){
로직
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function funcA(a,b = "하늘"){
console.log(`좋아하는 단어 ${a}, ${b}`);
}
funcA("바다");
</script>
</body>
</html>
매개변수를 전부 다 작성하지 않아도 정의되지 않은 나머지 매개변수에 "하늘"이라는 단어가 들어간 것을 확인할 수 있다.
Rest Parameter
설정한 매개변수와 입력한 매개변수의 값이 맞지 않을 때가 있다. 값을 더 많이 넣었을 경우에는 매개변수 개수만큼의 값만을 받고 나머지 값은 argument라는 유사배열객체에 저장된다. Rest Parameter의 경우 ECMA6 이후에 나온 방법으로, 함수 인자에 '...'을 작성하게 되면 넘치는 매개변수를 배열로 전달받을 수 있다. rest parameter('...')은 인자들 뒤에 작성되어야 한다.
- function 함수명(인자1, 인자2,...인자n){
로직
};
인자1, 인자2는 로직에 의해 수행되고, 나머지 값은 rest parameter에 저장된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function funcA(a,b,...c){
console.log(a,b);
console.log(c);
}
funcA(1,2,3,4,5,6,7,8,9);
</script>
</body>
</html>
넘치게 작성된 매개변수가 c에 배열로 저장된 모습을 볼 수 있다.
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript의 for문(for-in | for-of | forEach)에 대해 알아보자 (0) | 2024.07.23 |
|---|---|
| JavaScript의 기초 문법 : 배열 (0) | 2024.07.23 |
| JavaScript의 기초 문법 : 객체 (0) | 2024.07.22 |
| JavaScript : 호이스팅이 무엇인가 ? (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 제어문 - 반복문(while / for) (0) | 2024.07.19 |
| JavaScript의 기초 문법 : 제어문 - 조건문 (if / switch-case) (0) | 2024.07.18 |
| JavaScript의 기초 문법 : 연산자 (0) | 2024.07.16 |
| JavaScript에서 사용자의 입력을 받아보자 (0) | 2024.07.15 |