[J.S] 8. 함수란?

 

8.1 함수의 정의

• 어떠한 목적을 가지고 작성한 코드를 모아둔 블록문
• 필요 할때마다 호출 해서 재사용이 가능
• 내부에 모아둔 여러줄의 코드를 한번에 실행 가능 
• 같은 코드를 여러번 반복 작성할 필요 없음

8.2 함수의 특징

• 재사용 가능성 - 한 번 정의 하면 여러 곳에서 호출이 가능
• 가독성 향상 - 코드가 깔끔하고 이해하기 쉬워짐
• 유지보수 용이 - 로직 변경시 함수만 수정하면 됨
• 매개변수(parameter)와 반환값(Return Value)을 통해 유연하게 동작

8.3 함수의 장점

• 중복 코드 제거 → 코드 길이 감소
• 논리적인 구조화 → 큰 프로그램을 작은 단위로 나누어 관리
• 버그 수정 용이 → 오류를 한 곳에서만 고치면 됨
• 협업 효율성 증가 → 기능 단위로 나누어 작업 가능

8.4 기본 함수의 구조(함수 정의하기)

특정 작업을 수행하는 코드를 하나의 이름으로 묶어 놓은 것

즉 함수 선언문을 사용 해 함수 이름과 실행할 코드를 미리 만들어 두는 과정

// 함수 선언

function 함수이름(매개변수1, 매개변수2) {

    //함수 몸체(실행할 함수)

    return 결과값; // 반환값 (필요 없으면 생략 가능)

}

// 함수 호출

함수이름(인자1, 인자2);

• function 키워드:
  • 자바스크립트에게 "함수를 정의한다" 라고 알려줌
• 함수 이름(Function Name):
  • 함수를 식별 하는 이름
  • 예) add, sayHello
• 매개 변수(Parameter):
  • 함수가 외부로부터 입력 받는 값(옵션)
  • 여러 개일 수 있으며 필요에 따라 생각 가능
• 함수 몸체(body):
  • 함수 호출시 실행되는 코드가 작성되는 부분
  • 필요한 연산이나 처리로직을 작성

8.4.1 동작 방식

1. 함수 선언 →  위의 구조로 함수가 메모리에 저장
2. 함수 호출 →  함수이름(인자1, 인자2,..) 형태로 실행
3. 매개변수 처리 → 호출시 전달된 인자가 각각의 매개 변수에 할당
4. 함수 몸체 실행 → 내부 코드가 실행
5. 결과 반환 →  return 키워드가 있으면 값을 반환 없으면 undefined 를 반환

8.5 예시

1) 구구단 2단을 출력해 보자

console.log('2 * 1=2');

console.log('2 * 2=4');

console.log('2 * 3=6');

console.log('2 * 4=8');

console.log('2 * 5=10');

console.log('2 * 6=12');

console.log('2 * 7=14');

console.log('2 * 8=16');

console.log('2 * 9=18');

 

• 이렇게 하면 2단을 출력 할 수 있지만 너무 반복적이다
• 3단, 4단, 5단을 출력 하려면 같은 코드를 추가적으로 반복해야 해서 너무 비효율적이다. 

 

2) 반복문 for문을 활용하여 코드 줄이기 

for(let i =1; i <=9; i++){

    console.log(`2 * ${i} = ${2 * i}`);

}

 

• 이렇게 반복문으로 작성하면 코드가 단 3줄로 줄일 수 있다. 
• i 가 1부터 9까지 올라가며 console.log를 9번 실행 시킬 수 있다. 

 

3) 2단부터 9단까지 출력하는 중첩 반복문 작성하기

for(let dan =2; dan <=9; dan++){

    for(let i =1; i <=9; i++){

    console.log(`2 * ${i} = ${2 * i}`);

}}

 

• 바깥쪽 반복문이 2단 부터 9단까지 반복
• 안쪽 반복문이 각 단별로 1부터 9까지 돌아가며 곱한다
• 만약 반복문의 범위를 바꿔야 한다면 코드안에서 범위를 직접 수정해야 하기에 번거롭다.  

 

4) 함수를 사용하여 코드 재활용과 관리 편리하게 만들기

function gugudan(dan) {

    for(let i =1; i <=9; i++){

    console.log(`2 * ${i} = ${2 * i}`);

}}

gugudan(2) //2단 출력

gugudan(3) //3단 출력

 

• gugudan 함수에 하는 숫자만 넘겨주면
• 함수 몸체가 자동으로 해당 단 구구단을 출력
• 코드를 수정하지 않고 함수 호출만으로 원하는 단을 출력 가능 

 

5) 번외. 여러단을 한꺼번에 출력 하는 함수로 확장

    for(let dan=start; dan <=end; dan++)

        for(let i =1; i <=9; i++){

        console.log(`2 * ${i} = ${2 * i}`);

}}

gugudan(2,7) //2단에서 7단까지 출력

 

• gugudan 함수는 시작 단(start)과 끝 단(end)을 매개 변수로 받아
• 범위 내 모든 단의 구구단을 출력
• 내부에서 이미 만든 반복문 구조를 활용 하여 코드가 깔끔하고 재사용이 가능

 

함수: 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문

 

 

 

*해당 문서는 김기수 님께서 작성하신 HTML+CSS+자바스크립트 책을 읽고 이해한 대로 자바스크립트를 요약한 정리입니다. 

본 문서는 상업적인 목적으로 사용이 불가능 함을 고지합니다. (개인 공부를 남기기 위한 목적임을 명백히 고지합니다.)