Javascript 5일차 함수(function)

2025. 12. 23. 19:38ㆍ대우개발원 수업 내용/Javascript

반응형

개념 내용 요약10장 함수(Function)

더보기

10.1 함수란

함수(function)

  • 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문
  • 여러 줄의 코드를 하나의 단위로 묶어 재사용 가능

함수를 정의한다

  • function 키워드, 식별자, 소괄호, 블록문을 사용해 함수를 생성하는 것

함수를 정의하면

  • 코드를 새로 작성하지 않고 정의한 함수를 호출하여 사용 가능
  • 코드 수정 및 관리가 쉬워 유지 보수에 유리

10.2 함수를 정의하는 방법

1. 함수 선언문으로 함수 정의하기

  • function 키워드를 사용해 함수를 정의하는 방법
function 함수명() {
}

특징

  • 가장 기본적인 함수 정의 방식
  • 함수 호이스팅의 영향을 받음

2. 함수 표현식으로 함수 정의하기

  • 함수를 변수에 할당해 정의하는 방법

네이밍 함수

  • 변수에 할당된 함수에 식별자가 있는 경우
const 변수명 = function 함수명() {
};

익명 함수

  • 변수에 할당된 함수에 식별자가 없는 경우
const 변수명 = function () {
};

3. 화살표 함수로 함수 정의하기

  • ES6에서 추가된 함수 정의 방식
  • 익명 함수로만 정의 가능
const 함수명 = () => {
};

특징

  • 코드가 간결함
  • 기존 함수와 this 처리 방식이 다름

10.3 함수 기능 확장하기

1. 매개변수와 인수

매개변수(parameter)

  • 함수가 호출될 때 전달받은 데이터를 저장하기 위해 함수에 선언하는 변수

인수(argument)

  • 정의한 함수를 호출할 때 전달하는 실제 데이터

형식

// 함수 선언문
function 함수명(매개변수1, 매개변수2, ..., 매개변수N) {
}

// 함수 표현식
const 함수명 = function(매개변수1, ..., 매개변수N) {
};

// 화살표 함수
const 함수명 = (매개변수1, 매개변수2, ..., 매개변수N) => {
};

// 함수 호출
함수명(인수1, 인수2, ..., 인수N);

2. 매개변수의 특징

데이터 전달

  • 매개변수를 정의하지 않으면 전달한 데이터는 할당되지 않음
  • 오류는 발생하지 않음
  • 전달된 인수와 매개변수는 일대일 대응 관계

매개변수의 기본값

  • 전달받지 못한 매개변수의 값은 undefined

 

 

 

※ 해당 예제는 로컬 환경(localhost)에서 실행한 결과입니다. 실행 코드는 아래를 참고해주세요.

구구단3단

function으로 변경

function.js

더보기 
// // 기본 for문을 사용하는 구구단 3단
// for(let i =1; i <= 9; i++){
//   console.log(`3 * ${i} = ${3 * i}`)
// }

// function gugudan(){ // 함수 시작 3단 구구단
//   for(let i =1; i <= 9; i++){
//     console.log(`3 * ${i} = ${3 * i}`);
//   }
// } // 함수 끝
// 위 까지가 함수 정의

function gugudan(){ // 함수 시작 1~9단 구구단
  for(let i =1; i <= 9; i++){
    console.log(`${i} 단`);
    for(j = 1; j <= 9; j++)
      console.log(`${i} * ${j} = ${i * j}`);
  }
}
gugudan(); // 함수 호출
gugudan();

실행결과

1 단
1 * 1 = 1
1 * 2 = 2
1 * 3 = 3
1 * 4 = 4
1 * 5 = 5
1 * 6 = 6
1 * 7 = 7
1 * 8 = 8
1 * 9 = 9
2 단
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18
3 단
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9
3 * 4 = 12
3 * 5 = 15
3 * 6 = 18
3 * 7 = 21
3 * 8 = 24
3 * 9 = 27
4 단
4 * 1 = 4
4 * 2 = 8
4 * 3 = 12
4 * 4 = 16
4 * 5 = 20
4 * 6 = 24
4 * 7 = 28
4 * 8 = 32
4 * 9 = 36
5 단
5 * 1 = 5
5 * 2 = 10
5 * 3 = 15
5 * 4 = 20
5 * 5 = 25
5 * 6 = 30
5 * 7 = 35
5 * 8 = 40
5 * 9 = 45
6 단
6 * 1 = 6
6 * 2 = 12
6 * 3 = 18
6 * 4 = 24
6 * 5 = 30
6 * 6 = 36
6 * 7 = 42
6 * 8 = 48
6 * 9 = 54
7 단
7 * 1 = 7
7 * 2 = 14
7 * 3 = 21
7 * 4 = 28
7 * 5 = 35
7 * 6 = 42
7 * 7 = 49
7 * 8 = 56
7 * 9 = 63
8 단
8 * 1 = 8
8 * 2 = 16
8 * 3 = 24
8 * 4 = 32
8 * 5 = 40
8 * 6 = 48
8 * 7 = 56
8 * 8 = 64
8 * 9 = 72
9 단
9 * 1 = 9
9 * 2 = 18
9 * 3 = 27
9 * 4 = 36
9 * 5 = 45
9 * 6 = 54
9 * 7 = 63
9 * 8 = 72
9 * 9 = 81
1 단
1 * 1 = 1
1 * 2 = 2
1 * 3 = 3
1 * 4 = 4
1 * 5 = 5
1 * 6 = 6
1 * 7 = 7
1 * 8 = 8
1 * 9 = 9
2 단
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18
3 단
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9
3 * 4 = 12
3 * 5 = 15
3 * 6 = 18
3 * 7 = 21
3 * 8 = 24
3 * 9 = 27
4 단
4 * 1 = 4
4 * 2 = 8
4 * 3 = 12
4 * 4 = 16
4 * 5 = 20
4 * 6 = 24
4 * 7 = 28
4 * 8 = 32
4 * 9 = 36
5 단
5 * 1 = 5
5 * 2 = 10
5 * 3 = 15
5 * 4 = 20
5 * 5 = 25
5 * 6 = 30
5 * 7 = 35
5 * 8 = 40
5 * 9 = 45
6 단
6 * 1 = 6
6 * 2 = 12
6 * 3 = 18
6 * 4 = 24
6 * 5 = 30
6 * 6 = 36
6 * 7 = 42
6 * 8 = 48
6 * 9 = 54
7 단
7 * 1 = 7
7 * 2 = 14
7 * 3 = 21
7 * 4 = 28
7 * 5 = 35
7 * 6 = 42
7 * 7 = 49
7 * 8 = 56
7 * 9 = 63
8 단
8 * 1 = 8
8 * 2 = 16
8 * 3 = 24
8 * 4 = 32
8 * 5 = 40
8 * 6 = 48
8 * 7 = 56
8 * 8 = 64
8 * 9 = 72
9 단
9 * 1 = 9
9 * 2 = 18
9 * 3 = 27
9 * 4 = 36
9 * 5 = 45
9 * 6 = 54
9 * 7 = 63
9 * 8 = 72
9 * 9 = 81

function.js

함수 정리

더보기

1. 기본 for문을 사용하는 구구단 (함수 X)

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

설명

  • 함수 없이 반복문만 사용
  • 실행할 때마다 같은 코드를 다시 작성해야 함
  • 재사용성 낮음

2. 함수 선언문으로 3단 구구단 만들기

function gugudan(){   // 함수 정의
  for(let i = 1; i <= 9; i++){
    console.log(`3 * ${i} = ${3 * i}`);
  }
}

gugudan();   // 함수 호출

설명

  • function 키워드를 사용한 함수 선언문
  • gugudan()을 호출할 때만 실행됨
  • 코드 재사용 가능

3. 함수 선언문으로 1~9단 전체 구구단

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

gugudan();

설명

  • 중첩 for문 사용
  • 하나의 함수로 전체 구구단 출력
  • 함수 내부 변수는 지역 변수

4. 함수 표현식 (네이밍 함수)

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

gugudan();

설명

  • 함수 표현식 방식
  • gugudan → 변수명 (외부 호출용)
  • 내부 함수 이름은 디버깅·재귀용
  • 호출은 반드시 gugudan()으로 함

5. 네이밍 함수 (식별자 다르게 사용)

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

gugudan();

설명

  • naming은 함수 내부 전용 이름
  • 외부에서는 호출 불가
  • 함수 표현식의 특징을 보여주는 예제

6. 익명 함수로 함수 정의하기

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

gugudan();

설명

  • 함수에 이름이 없음
  • 변수명으로만 함수 관리
  • 가장 일반적인 함수 표현식 형태

7. 화살표 함수로 함수 정의하기

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

gugudan();

설명

  • ES6에서 추가된 화살표 함수
  • 항상 익명 함수
  • 문법이 간결함

8. 매개변수(parameter)와 인수(argument) 예제

function sum(num1, num2){   // 매개변수
  let result = num1 + num2;
  console.log("inner:" + result);
}

sum(10, 20);   // 인수

설명

  • num1, num2 → 매개변수(parameter)
  • 10, 20 → 인수(argument)
  • 인수 값이 매개변수에 1:1로 전달됨

9. 매개변수를 사용한 구구단 (n단 출력)

const gugudan = (dan) => {   // 매개변수
  for (let i = 1; i <= 9; i++){
    console.log(`${dan} * ${i} = ${dan * i}`);
  }
};

gugudan(5);   // 인수

설명

  • dan에 전달된 값이 저장됨
  • gugudan(5) → 5단 출력
  • 매개변수 + 인수의 올바른 사용 예

10. 매개변수 기본값 사용

function sum(a = 10, b = 10){
  console.log(a, b);
}

sum(50);

실행 결과

50 10

설명

  • 매개변수에 기본값 설정
  • 인수를 하나만 전달하면
    • a = 50
    • b = 10 (기본값 사용)

핵심 개념 요약

구분설명
함수 선언문 function 함수명()
함수 표현식 const 변수 = function()
네이밍 함수 함수 내부 이름 존재
익명 함수 함수 이름 없음
화살표 함수 () => {}
매개변수 값을 받을 변수
인수 전달하는 실제 값
기본값 인수 없을 때 사용

 

calcSum.html

더보기

http://localhost:52330/js5/calcSum.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1부터 n까지 더하기</title>
</head>
<body>
  <script>
  let userNumber = parseInt(prompt("얼마까지 더할까요?"));
  calcSum(userNumber);
  
    function calcSum(n) { // function 문을 제일 먼저 읽기 때문에 위에서 부터 읽는다는것을 생각안해도 된다.
      let sum = 0;
      for(let i = 1; i <= n; i++){
        sum += i;
      }
      document.write("1부터 " + n + "까지 더하면 " + sum);
    }

  </script>
</body>
</html>

 

fx_gugudan.html

더보기

http://localhost:52330/js5/fx_gugudan.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>구구단 함수</title>
  <style>
    div {
      border: 1px solid #ccc;
      display: inline-block;
      padding: 0 20px 30px 20px;
      margin: 15px;
      line-height: 2;
    }
    div h3 {
      text-align: center;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <script>
    var num = prompt("구구단 몇 단을 원하세요", ""); // n은 문자열
    gugudan(num); // 함수 호출

    function gugudan(n) {
      var m = parseInt(n); // 문자열 n을 숫자로 바꿈

      if(isNaN(m) || m < 1 || m > 9) { 
        alert("잘못입력하셨습니다.");
        // return;
      }
      
      document.write("<div>");
      document.write("<h3>" + m + "단</h3>");
      for(let j = 1; j <= 9; j++) {
        document.write(m +" X " + j + " = " + m*j + "<br>");
      }
      document.write("</div>");
    }
      
  </script>
</body>
</html>

<!-- if(isNaN(m) || m < 1 || m > 9) { 
  alert("잘못입력하셨습니다.");
  return;
} -->

 

'대우개발원 수업 내용 > Javascript' 카테고리의 다른 글

Javascript 9일차 이벤트/  (0) 2025.12.30
Javascript 6일차 함수 return문 / 스코프 / 호이스팅  (1) 2025.12.24
Javascript 4일차 array / for in / break / continue  (0) 2025.12.22
Javascript 3일차 조건문 연습 / 반복문  (1) 2025.12.19
javascript 2일차 조건문 if / else / switch  (0) 2025.12.18

관련글

티스토리툴바