[JavaScript] Function

Function 

: 특정 작업을 수행하거나 값을 계산하는 데 사용되는 코드의 묶음(집합)

 

1) 코드 재사용

// 덧셈 예제코드
function sum(a, b){
  return a + b;
}

let result = sum(1, 2);  // 3
console.log(result);
console.log(sum(297421,123879));

2) 모듈화 & 추상화

: 복잡한 작업을 수행하는 코드를 함수로 분리

• 모듈성 : 로직(코드 흐름) 단위로 작업을 나누어 관리할 수 있는 특성

3) 이벤트 처리

: 웹 페이지에서 발생하는 다양한 이벤트를 처리하는데 사용

(예시)
let button = document.querySelector('button');

function message(){	// 웹 문서의 요소들과 묶이는 기능 동작을 함수로 정의
  console.log('버튼이 클릭되었습니다.');
}

button.addEventListener('click', message);	// 웹 문서의 내용인 button 클릭 시 동작을 설계

함수 구현 방법 (함수 생성)

: function 키워드를 사용하여 함수를 생성한다.

(기본 구조)
function 함수명(매개변수, parameter) {
	함수가 수행할 코드
    
    return 결과값;
}

함수명

• 변수 명명 규칙과 유사
• 동사 사용을 권장

매개변수(parameter; 파라미터)

• 함수에 입력으로 제공되는 값(데이터)
• 대부분 해당 값을 통해 특정 작업을 수행

결과값(return, 리턴값)

• 함수가 작업을 완료한 후 반환하는 값
• return 키워드를 사용하여 결과값을 반환

 

함수 선언 방식

1) 함수 선언식

• function 키워드 사용, 함수의 이름이 필수적으로 명시
• 호이스팅이 적용 → 함수를 선언하기 전에 호출할 수 있음

2) 함수 표현식

• 함수를 변수에 할당하는 방식으로 정의
• 함수명 사용이 선택적
• 호이스팅 적용 불가 → 선언(정의) 이전에 호출 불가

(기본 구조)
const 변수명 - function(매개변수){
  함수 기능 작성
  return 반환값;
}

3) 화살표 함수

• 기존의 function 키워드를 화살표로 대체하여 간결한 함수를 작성
• 항상 익명 함수(이름이 없는 함수)로 사용
• 'this'가 일반 함수와 다르게 바인딩 됨
• 호이스팅 불가
• 함수 기능이 단일문이면 중괄호와 return 키워드를 생략 가능하다

(기본 구조)
const 변수명 = (매개변수) => {
  - 함수 기능 작성
  return 반환값;  
}

 

함수 호출 방법

• 함수명(인자값); 으로 함수를 호출한다

 

함수의 스코프(범위, scope)

• 지역변수(local) : 중괄호 내의 영역(함수 내부)
• 전역변수(global) : 해당 파일(모듈) 내의 영역

 

자바스크립트 함수 구조 (매개변수 & 인자)

1. 매개변수(파라미터, parameter)

• 함수를 정의하고 호출할 때 함수에 데이터를 전달하는 방식 (변수) - 선언
• 함수를 호출 시에는 괄호 안에 인수(argument)를 넣어서 전달

2. 인자(인수, 아규먼트, argument)

• 함수를 호출할 때 전달하는 실제 값(데이터)
• 함수 호출마다 다른 데이터 전달이 가능

매개변수

1. 기본 매개변수 (default)

• 함수에 인자를 전달하지 않았을 때 사용되는 기본값을 정의
• 함수 호출 시 특정 매개변수(기본 매개변수) 생략이 가능

function defaultFunc(param1=value1, param2=value2) {

}

 

2. 가변 매개변수

• 함수가 받을 수 있는 매개변수의 수가 변할 수 있다는 것을 의미
• 함수 호출 시 인자의 수가 정해져있지 않고, 함수 내부에서 유동적으로 처리

 

3. 나머지 매개변수

• JS에서는 나머지 매개변수를 사용하여 가변 매개변수를 구현
• 함수에 전달된 인자들을 배열의 형태로 받음

매개변수명 앞에 ...(spread 연산자)를 붙여 정의
데이터가 지정될 변수가 있는 매개변수 목록의 마지막에 위치

function spreadFunc(num1, num2, ...nums) {
  // 매개변수명 앞에 ...연산자를 붙이는 경우 해당 데이터는 배열의 형태
}

function print(num1, num2, ...nums) {
  // nums : 배열
  console.log(nums);
}

print(1, 2, 3);		// [3]
print(1, 2, 3, 4, 5);		// [3, 4, 5]
print(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);		// [3, 4, 5, 6, 7, 8, 9, 10]

 

Function 예제

//! 문제 1

// a = 10, b = 5 (매개변수와 인자값 구분)

// add(함수 선언식)
function add(a, b){
  return a + b;
}

// subtract(함수 표현식)
const subtract = function(a, b){
  return a - b;
}

// multiply(화살표 함수)
const multiply = (a, b) => a * b;

console.log(add(10, 5));
console.log(subtract(10, 5));
console.log(multiply(10, 5));


//! 문제 2
// 함수의 재사용성과 모듈성 확인 문제

//? 요구 사항
// 1. 회사의 직원들을 위해 월별 근무 시간과 시급을 기반으로 급여를 계산하는 프로그램을 작성
// : calculatePay(hours, rate)라는 이름의 함수를 작성
// : 근무 시간(hours)과 시급(rate)을 인자로 받고, 총 급여를 계산하여 반환

// 2. 근무시간이 160시간을 초과할 경우, 초과 근무 시간은 기본 시급의 1.5배로 계산
// : 함수를 작성한 후, 다음 직원들의 근무 정보를 사용하여 급여를 계산하고 출력

// >> 각 직원의 월별 근무 시간과 시급이 다를 수 있기 때문에 유연하게 동작될 수 있는 함수 작성

// 직원 A: 172시간, 시급 20달러
// 직원 B: 160시간, 시급 22달러
// 직원 C: 180시간, 시급 18달러

//? 예상 출력
// 직원 A 급여: $계산된 금액
// 직원 B 급여: $계산된 금액
// 직원 C 급여: $계산된 금액

function calculatePay(hours, rate){
  // 월 급여: 근무 시간(hours) * 시급(rate)
  if(hours > 160){
    // 160 이하인 근무시간의 급여 계산
    const regularPay = 160 * rate;
    // 160 초과인 근무시간의 급여 계산
    const overtimeHours = hours - 160;
    const overtimePay = overtimeHours * 1.5 * rate;
    
    return regularPay + overtimePay;
  } else {
    return hours * rate
  }
}

// 직원들의 급여 계산
console.log('직원 A의 급여: $'+ calculatePay(172, 20));
console.log('직원 B의 급여: $'+ calculatePay(160, 22));
console.log('직원 C의 급여: $'+ calculatePay(180, 18));