본문 바로가기

Front-End/JavaScript

함수

함수를 생성하는 방법 중에 익히 쓰는 방법이 두가지가 있다.

함수 선언식 , 표현식이다.

 

함수 선언식은 fuction 함수이름 (){} 이런 형태를 갖는다.

function add() {}

 

함수 표현식은 변수를 선언하고 , 값으로 함수를 넣는 것이다.

const add = function () {};

 

기명함수 : 함수 선언 시 함수 이름을 명시하는 것

보통 함수 선언식에서 많이 사용된다.

기명함수 : const add = function add(){}

function add() {}

 

 

익명함수 : 함수이름을 생략하고 선언하는 것

보통 함수 표현식에서 많이 사용된다.

익명함수 : const add = function () {};

 

매개변수(parameter) : 함수 파라미터 구멍에 들어가는 변수다.(소괄호 안에)

function printTxt(msg) {
console.log(msg, name);
}
//하나만 받아서 쓰던지 , 아니면 매개변수를 아예 아무것도 안받아도 자바스크립트는 에러라고 보지 않는다.

 

 

매개변수는 기본값을 지정할 수 있다.

function add1(a, b, c = 0) {
console.log(a + b + c);
}

 

args에 대해 배워보겠다.(ES6)

function addss(...args) {
  console.log(args); // 함수에 전달된 인수를 배열로 출력
  let sum = 0;
  for (let i = 0; i < args.length; i++) { // args 배열을 순회
    sum += args[i]; // 각 인수를 sum에 더함
  }
  return sum; // 총합 반환
}

// 함수 호출 예시
console.log(addss(1, 2, 3, 4)); // [1, 2, 3, 4] 출력 후 10 반환
console.log(addss(5, 10, 15));  // [5, 10, 15] 출력 후 30 반환

1. args는 함수에 전달된 모든 인수를 배열 형태로 수집한다.

2. console.log(args)는 수집된 인수 배열을 콘솔에 출력한다.

3.for 루프는 인수 배열을 순회하며 모든 인수의 합은 계산한다.

function argsFunc(a, b, ...args) {
  console.log(a, b, args);
}
argsFunc(10, 20, 30, 40);

결과 : 10 20 [ 30, 40 ]

이런 식으로 args는 배열 형태로 나온다.

 

 

 

Return

함수 내부에 return을 만들면 , 함수 밖에서 값을 사용할 수 있다.

function addFunc(a, b) {
const sum = a + b;
return sum;
}
console.log(addFunc(2, 4));

오직 함수 안에서만 return을 사용해야 한다.

return을 만나는 순간 코드는 종료가 된다. 그 뒤에 코드 써봤자 의미가 없다.

코드는 종료되지만 , 개념은 바로 잡아야한다.

return을 쓰면 함수종료! 가 아니라 결과반환이라고 생각해야 한다고 함.

 

 

 

"return으로 반환할 수 있는 데이터 종류는 한개다." => 데이터 하나 , 객체 하나, 함수하나 등등

//외부 함수
function membershipCard() {
//내부 함수
return function () {
return {
name: "야호야호",
grade: "basic",
};
};
}
const membership = membershipCard();
console.log(membership());
 
결과 : { name: '야호야호', grade: 'basic' }

 

호출할 땐 함수처럼 호출하면 된다. 

console.log(membership());

 

const add = (a,b) => {return a+b}
const add = (a,b) => a+b

화살표함수를 할 때 , { } + return을 제거할 수 있다.

근데 나오는 값이 객체면 에러가 뜸.

객체에 나오는 { } 이놈이 함수처럼 보이기 때문이다.

그럼 어케 해야함?

 

 

객체를 반환할 때 소괄호로 묶어주면 된다.

const membershipCard = () => {
return {
name: "야호야호",
grade: "basic",
};
};
 //소괄호로 묶은 것
const membershipCard = ()=> ({name: "야호야호",
grade: "basic",})
 
console.log(membershipCard());
 
const membershipCard = 매개1=> ({name: "야호야호",
grade: "basic",})
 
이렇게 매개변수 하나일 땐 , 소괄호 생략이 가능하나 두개부턴 안된다.
 
const membershipCard = (매개1,매개2) => ({name: "야호야호",
grade: "basic",})

 

 

팩토리얼

5! = 5*4*3*2*1

4! = 4*3*2*1

이런식으로 n * (n-1)을 1이 될때까지 하는 것이다.

이에 대한 방법은

const factorial = (n) => {
let result = 1;
for (let i = 1; i <= n; i++) {
result = result * i;
}
return result;
};
console.log(factorial(5), "5번 문제");

이런 식으로 i는 1부터 시작해서 , n과 같거나 작도록 말고 곱해주면 된다.

 

두번째 방법은 재귀함수다.

const factorial2 = (n) => {
if (n === 0 || n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
};

자기 자신을 호출하는 것을 재귀함수라 하는데 ,

return n*factorial(n-1) 이 부분에서 스스로를 호출하기 때문에 재귀함수다.

다만 , 예외처리를 해야한다.

n이 0이거나 1이면 무한루프가 돌아가기 때문에 상단에 꼭!

예외처리를 해줘야 한다.

 

 

 

아 그리고 자바스크립트에서 함수는 객체다.

 

'Front-End > JavaScript' 카테고리의 다른 글

Closer  (0) 2024.07.19
깊은 복사,얕은 복사  (0) 2024.07.19
자료형 , 연산자  (0) 2024.07.17
조건문 , 반복문 정리  (0) 2024.07.16
빌트인 생성자 Date(JS)  (0) 2024.03.15