반응형
함수의 분류
- 사용자 정의 함수 : 사용자가 필요한 기능을 직접 만든 함수
- 자바스크립트 코어 함수 : 자바스크립트 기본적으로 제공하는 함수 ex) pasreInt(), Math.random()..
기본 구조
- INPUT(parameter) > function() > OUTPUT
기본 문법
1. 함수의 선언
function 함수명(매개변수, 매개변수 ...){
문장
return 리턴값
}
2. 함수 실행
함수명();
Source
function add(a, b) { // 입력(a,b)
let sum = a + b; // 할일
return sum; // 출력
}
let result = add(1, 5);
document.write(result); // 6
함수의 파라미터 초깃값 설정
- '파라미터=값'을 사용하여 초기값 설정 가능
- 초기값으로 설정된 파라미터는 값을 전달받지 않으면 초기값을 사용하는데 이를 '디폴트 파라미터'라고 함
기본 문법
function 함수명(파라미터, 파라미터=초기값, 파라미터=초기값) {
}
임의의 파라미터를 가지는 함수 정의
- 정해지지 않은 파라미터의 개수를 가지는 함수의 경우 '나머지 파라미터(Rest Parameter) '...'을 이용하여 함수 정의
- 입력받은 파라미터는 인덱스를 이용하여 파라미터[0], 파라미터[1]의 방식으로 사용
기본 문법
// Function
function 함수명(...파라미터) {}
// Arrow Function
(...파라미터) => {}
// 인덱스를 지정하여 파라미터 사용
파라미터[0]
source
function calcSum(...prices) {
let result = 0
for(const value of prices) {
result +=value
}
return result
}
calcSum(1,2,3) // ⇒ 6
함수의 변수와 리턴처리
- 함수의 리턴값을 지역변수로 선언하여 반환 받을 경우 반드시 return 처리 필요 하며, 함수내에서만 변수호출 가능
- 함수의 리턴값을 전역변수로 처리시에 return처리를 하지 않아도 되며, 함수 외부에서도 결과값 반환 가능
함수 내 지역변수 리턴값을 함수 밖에서 호출하는 방법
- 전역변수 선언 ( 전역변수로 선언 시 함수 내에서 리턴처리가 없이 결과 출력 가능)
// = 내부함수 활용
function add(a, b) {
let sum = a + b;
return sum; // 지역변수 일 때는 반드싀 리턴 필요
}
console.log(add(1, 4));
//console.log(sum); // ERROR sum이 add 안에 선언된 지역변수라서 Error 발생
// + 해결방안 (sum을 전역변수로 선언)
let result // 전역변수
function add(a, b) {
result = a + b;
}
add(3,2)
document.write(result); // 5
함수 활용
매개변수 값으로 함수 이용
// hi1, hi2 는 일반 함수
function hi1() {
alert('hi');
}
function hi2() {
alert('hi-2');
}
// 매개변수 값으로 함수를 이용
function exec(a) { // a = hi1, a = hi2와 동일
a(); // 매개변수로 받은 함수를 호출
}
exec(hi1);
exec(hi2);
리턴값으로 함수 활용
$(function () {
function hi() {
document.write('hi');
}
$('#btnStart').click(hi);
});
리턴값으로 익명함수 활용
sestInterval(function(){
document.write('hi');
}, 1000)
리턴값으로 중첩함수 활용
function hi() {
// 중첩함수
function hello(name) {
document.write(`${name}님`);
}
return hello; // 리턴값으로 중첩함수를 넘기고 있음
}
//함수를 저장한 것이 아닌 hi()를 호출하고 그 리턴값으로 hello()를 받고 있음
// 중첩함수인 hello()를 받고 있는 것
const func = hi();
func('john'); // hello('john'); 동일
객체 방식으로의 함수 정의
let hi = new Function('name', 'document.write(name+"님")');
hi();
익명함수의 확장으로 함수 정의
- 재사용 목적이 아닌 다른 함수와의 충돌을 막기 위함
(function (name) {
document.write(name);
})('john');
반응형
'JS > Javascript' 카테고리의 다른 글
[함수] 콜백(callback) 함수 (0) | 2023.02.25 |
---|---|
[Javascript] 변수 (0) | 2023.02.04 |
[Javascript] 매개변수(parameter)와 전달인자(argument) (0) | 2023.02.04 |
[Javascript] 함수의 매개변수 (1) | 2023.01.07 |
[Javascript] 함수의 종류 (0) | 2023.01.07 |