사용자 정의 함수(function)
- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
- 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음
- 코드를 재활용
1.함수 선언식
function 함수명(매개변수1,매개변수2 ...){
함수가 호출되었을 때 실행할 문장;
....
return 값
}
함수명(값1,값2 ...)
2.함수 표현식
const 변수명 =function(매개변수1,매개변수2 ...){
함수가 호출되었을 때 실행할 문장;
...
return값
}
디폴트 매개변수
- 매개변수의 값을 설정하는 것
- 매개변수의 값을 정하지 않으면 기본값을 변수에 저장
function 함수명(매개병수1 =값1, 매개변수 =값2,..){
함수가 호출되었을 때 실행할 문장;
...
return값
}
함수명();
함수명(값1,값2, ...);
나머지 매개변수
생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한 번에 지정할 수 있음
function 함수명(매개변수1,....매개변수2){
함수가 호출되었을 때 실행할 문장;
....
return값
}
함수명(값1,값2,값3,값4,값5)
값 2 3 4 5 는 매개변수 2로
HTML 예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수</title>
</head>
<body>
<h2>함수</h2>
<script>
function func1(){
console.log('func1 호출!');
}
func1()
function func2(num){
console.log(`전달받은 매개변수의 값:${num}`)
}
func2('apple')
func2(true)
function func3(start,end){
let sum = 0
for(let i =start; i <=end; i++){
sum += i;
}
console.log(sum)
}
func3(1,100)
function func4(){
return '🎁'
}
func4()
console.log(func4())
const presents =func4();
console.log(presents)
console.log('-----------------------')
//디폴트 매개변수
function func5(num1=1,num2=1){
console.log(`num1의 값: ${num1} , num2의 값 : ${num2}`)
console.log(`${num1} * ${num2} = ${num1* num2}`)
}
func5();
func5(10,3)
console.log('-----------------------')
function func6(...x){
console.log(`x의 값: ${x}`);
console.log(`x의 타입: ${typeof(x)}`)
for(i in x){
console.log(`i의 값: ${i} , x[${i}] = ${x[i]}`);
}
}
func6(30,40,70)
function func7(x1,...x2){
console.log(`x1의 값: ${x1}`);
console.log(`x2의 값: ${x2}`);
}
func7(30,40,70,80);
console.log('-----------------------');
// 보너스!!
(function(){
console.log('함수를 만들고 바로 호출합니다');
})();
</script>
</body>
</html>
결과
