반응형
일반함수 (선언적 함수)
- :이름이 있는 함수
- 재귀호출 시에도 사용
- 이름이 있는 함수의 경우에는 변수 선언 전이어도 호출이 가능
* 기본 문법
function 함수() {}
let 함수 = function(){} // 위와 동일한 기능
function 함수() {
console.log('함수');
}
console.log(typeof 함수); // function
• Sources
* 숫자 계산 기본 문법
function 함수(매개변수) {
let output = 초깃값;
처리
return ouput
}
// = a부터 b까지의 합
function sumAll(a, b) {
let output = 0;
for (let i = a; i <= b; i++) {
output += i;
}
return output;
}
console.log(sumAll(1,4)); // 10
// = a부터 b까지의 곱
function mul(a, b) {
let output = 1;
for (let i = a; i <= b; i++) {
output *= i;
}
return output;
}
console.log(mul(1, 3));
// 최소값 구하기
function min(array) {
let output = array[0];
for (const i of array) {
if (output > i) {
output = item;
}
}
return output;
}
newArr = [1, 2, 3, 4, 5];
console.log(min(newArr)); // 1
익명함수 (임의 함수)
- 이름이 없는 함수
- 익명함수 사용을 위해서는 변수에 담아 호출이 필요함
- 함수 자체가 식(Expression)이기 떄뮨에 함수를 변수에 할당 하거나 다른 함수의 매개변수로 사용 가능
- 익명함수는 반드시 선언 이후에 실행이 되어야 호출이 가능 (호이스팅 불가)
* 기본 문법
function (){}
// 변수에 함수를 할당
const print = function(){
console.log('print');
};
print(); // print
const printAgain = print;
printAgain(); // print
일반함수와 익명함수의 차이
- 일반함수의 경우 함수 자체를 출력 시에 콘솔에 함수의 이름이 붙어있음
즉시실행함수
- 함수 선언과 동시에 호출
- 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있음.
* 기본 문법
// + type01
(function(){
}());
// + type02
(function(){
})();
let result = (function (a, b) {
return a + b;
})(10, 20); // 전달인자를 넣어 즉시 실행
console.log(result); // 30
전개 연산자
- 배열을 전개해서 함수의 매개변수로 전달
- 배열 앞에 마침표 3개를 붙여 표혐
* 기본 문법
함수명(...배열)
function callA(...items) {
console.log(items);
}
const array = [1,2,3,4];
// 전개 연산자를 사용하지 않은 경우
callA(array) // [ [ 1, 2, 3, 4 ] ] - 배열 형태로 들어옴
// 전개 연산자를 사용한 경우
callA(...array) // [ 1, 2, 3, 4 ] - 숫자가 하나하나 들어옴
함수에서의 arguments 활용
- 함수에서 arguments를 활용하여 각 인덱스에 어떤 값을 가지고 이쓴지 파악이 가능
- 파라미터의 개수를 정확히 알지 못한 경우 스프레드 연산자에서 arguments 활용 가능
const arr = function (x, y, z) {
console.log(arguments); // [Arguments] { '0': 2, '1': 3, '2': 4 }
return x * y * z;
};
arr(2, 3, 4);
// Spread 연산자의 arguments 활용
const arr2 = function (...arguments) {
return Object.values(arguments).reduce((prev, cur) => prev + cur);
};
console.log(arr2(2, 3)); // ⇒ 5
반응형
'JS > Javascript' 카테고리의 다른 글
[Javascript] 변수 (0) | 2023.02.04 |
---|---|
[함수] 함수의 기본 (0) | 2023.02.04 |
[Javascript] 매개변수(parameter)와 전달인자(argument) (0) | 2023.02.04 |
[Javascript] 함수의 매개변수 (1) | 2023.01.07 |
[Javascript] 반복문 (for, forEach, for...of, for...in ..) (0) | 2023.01.07 |