프론트엔드(Web)/JavaScript

JavaScript 함수

만능 엔터테이너 2024. 7. 16. 17:23
728x90
반응형
SMALL

함수에는 함수 선언문, 함수 표현식, 화살표 함수가 있습니다.

 

함수 선언문 - function 키워드로 함수를 정의하는 방법

function 식별자(){}
function gugudan() {
 for(let i = 1; i <=9; i++){
  console.log(`e*${i} = ${3*i}`);
  }
}

 

이렇게 작성하고 나면, 아래와 같이 함수명 ();로 함수를 실행할 수 있습니다.

gugudan();

 

함수 표현식 - 변수에 할당하는 함수에 식별자가 있으면 네이밍 함수, 없으면 익명 함수로 구분합니다.

const 변수명 = function(){}; // 익명 함수
const 변수명 = function 식별자(){}; // 네이밍 함수
const gugudan = function(){
  for(let i=1; i <=9; i++){
  console.log(`3*${i} = ${3*i}`);
  }
};
gugudan(); // 함수 호출 문제 없음

const gugudan = function naming(){
 for(let i=1; i<=9; i++){
 console.log(`3*${i} = ${3*i}`);
 }
};

naming(); // 함수 호출하면 오류가 발생

즉, 식별자가 아닌 변수명으로 호출해야됨

 

함수는 일관된 목적을 가진 코드 집합이라서 const 키워드로 작성하는 것을 권장합니다.

 

화살표 함수 - 익명 함수로 정의가 가능하며 화살표를 사용해 함수를 정의하는 방법

() => {};
const gugudan = () => {
  for(let i=1; i <=9; i++){
  console.log(`3*${i} = ${3*i}`);
  }
};
gugudan(); // 함수 호출 문제 없음

 

매개변수 : 함수를 정의할 때, 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수

인수 : 정의한 함수를 호출할 때, 소괄호 안에 전달하고 싶은 데이터를 작성

// 함수 선언문
function 함수명(매개변수1, 매개변수2, ..., 매개변수N){}
// 함수 표현식
const 함수명 = function 식별자(매개변수1, 매개변수2, ..., 매개변수N){};
// 화살표 함수
const 함수명 = (매개변수1, 매개변수2, ..., 매개변수N) => {};
// 함수 호출
함수명(인수1, 인수2, ..., 인수N);
function gugudan(dan){
  for(let i = 1; i <= 9; i++){
    console.log(`${dan} * ${i} = ${dan * i}`);
  }
}
gugudan(3);
gugudan(5);
gugudan(8);

 

여기서 조건문 내부 dan이 매개변수

화살표 함수에서 매개변수 정의
const sum = (num1, num2) => {
  console.log(num1, num2);
};
sum(10, 20);

단, 화살표 함수는 매개변수 1개일 경우 ()를 생략할 수 있습니다.
const sum = num1 => {
  console.log(num1);
};
sum(10);

 

return문 - 함수 외부로 데이터를 반환할 때 사용합니다.

return 식(또는 값)
function sum(num1, num2){
  let result = num1 + num2;
}
sum(10,20);
console.log("out: " + result); // ReferenceError: result is not defined

이때, return문을 사용하여 함수 내부의 변수를 함수 외부로 전달하면 오류가 발생하지 않습니다.

function sum(num1, num2){
  let result = num1 + num2;
  return result;
}
const result = sum(10,20);
console.log("out: " + result); // out: 30

 

이때, return에 할당된 값을 밖으로 내보내기에 반환값이라고 합니다.

함수 내부 - 지역 스코프( 지역 스코프는 함수 내부에서만 참조 가능)

함수 외부 - 전역 스코프 (전역 스코프는 스코프와 상관없이 모두 참조 가능)

 

즉시 실행 함수 - 함수를 정의하면서 동시에 실행까지 하는 함수

(function(){})();

 

728x90
반응형
LIST