- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
- 필요할 때마다 호출하여 해당 작업을 반복 수행할 수 있음
- 코드를 재활용하기 위한 목적
1. 함수 선언식
function 함수명(매개변수1, 매개변수2 ...){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
2. 함수 표현식
const 또는 let 변수명 = function(매개변수1, 매개변수2, ...){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
3. 디폴트 매개변수
- 매개변수의 값을 설정하는 것
- 매개변수의 값을 정하지 않으면 기본값을 변수에 저장
function 함수명(매개변수1=값1, 매개변수2=값2, ...){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
4. 나머지 매개변수
- 생략 접두사(...)를 사용하여 특정 위치의 인수부터, 마지막 인수까지 한번에 지정할 수 있음
function 함수명(매개변수1, ...매개변수){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
함수명(값1, 값2, 값3, 값4);
매개변수1: 값1
매개변수2: 값2, 값3, 값4
# 함수 사용 예제
<body>
<h2>함수</h2>
<script>
function func1(){
console.log('func1() 호출!')
}
func1();
func1();
console.log('-------------')
function func2(num){
console.log(`전달받은 매개변수의 값: ${num}`)
}
func2(10);
func2('apple');
func2(true);
func2();
console.log('-------------')
function func3(start, end){
let sum = 0
for(let i=start; i<=end; i++){
sum += i;
}
console.log(`${start}부터 ${end}까지의 총합: ${sum}`)
}
func3(1, 100)
func3(1)
console.log('-------------')
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(10, 3)
func5(10)
func5() // num2=10 처럼 변수지정 불가능, 차례대로 넣어야함
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, 50, 80, 100, 40);
func6(50, 80);
// 익명함수
(function(){
console.log('함수를 만들고 바로 호출하기!')
})()
// 함수 표현식
const func7 = function(){
cnosole.log('func7() 호출!');
}
func7();
</script>
</body>
출력결과
호이스팅(hoisting)
- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
- var로 선언한 변수의 경우 호이스팅 시, undefined로 변수를 초기화
- let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음
화살표 함수
- function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
- 화살표 함수는 항상 익명
- return은 생략하며, 모든 화살표 함수는 return 형
매개변수가 없는 경우
const 변수명 = () => {
...
}
const 변수명 = () => 문장;
매개변수가 있는 경우
const 변수명 = 매개변수1 => {
...
}
const 변수명 = (매개변수1, 매개변수2 ...) => {
...
}
# 화살표 함수 예제
<body>
<h2>화살표 함수</h2>
<script>
const func1 = () => console.log('안녕하세요! 자바스크립트!');
func1();
console.log('-------------')
const func2 = x => x * x;
const result = func2(10);
console.log(`10의 제곱:${result}`)
const func3 = (x, y) => {
let sum = 0;
for(let i=x; i<=y; i++){
sum += i
}
return sum
}
const total = func3(1, 100);
console.log(`1부터 100까지의 합:${total}`)
console.log('-------------')
let age = Number(prompt('나이를 입력하세요'));
const isAdult = (age > 19) ? () => console.log('성인입니다.') : () => console.log('미성년입니다.');
isAdult();
</script>
</body>
