8. 함수

함수

명령문을 하나의 단위로 그룹화한 것을 말합니다.

함수를 생성하는 방법에는 함수 선언식과 함수 표현식이 있습니다.

 

 

함수 선언식

• function 키워드, 함수이름( ), 블록{…} 으로 이루어져 있습니다.

function sayHello() {
  console.log("안녕하세요");
  console.log("반갑습니다");
}
sayHello();

 

 

함수 표현식

• 객체인 함수를 변수에 담아 생성할 수 있습니다.
• 함수 표현식으로 선언할 경우 호이스팅의 영향을 받지 않습니다.

let sayHello2 = function() {
  console.log("자바스크립트");
  console.log("함수입니다");
};
sayHello2();

 

 

파라미터

• 괄호() 안에 파라미터(매개변수)를 선언하여, 함수 호출 시 값을 전달할 수 있습니다.

function person(name, age) {
  console.log("이름과 나이를 출력합니다.");
  console.log(name + ", " + age);
}

person("홍길동", 99);  // person 함수에 값 전달

 

 

반환 값

• return 키워드를 사용하여 함수에서 값을 반환할 수 있습니다.

function sum(number1, number2) {
  let number = number1 + number2;
  return number;
}
let result = sum(5, 3);  // sum 함수에 값 전달 후 리턴
console.log(result);     // result: 8

 

 

함수 스코프

• 전역 스코프 - 최상단에 선언된 변수, 함수
• 블록 스코프 - 블록 단위로 선언된 변수, 함수
• 같은 블록 안의 변수만 사용 가능합니다
• 자식은 부모것을 사용할 수 있습니다.

function aBlock() {
  let name = "홍길동";
  let age = 99;
  
  function bBlock() {
    let job = '개발자';
    console.log('name: ', name); //사용 가능
    console.log('age: ', age);   //사용 가능
    console.log('job: ', job)
  }
  
  console.log('job: ', job);  //사용 불가
}

 

 

Arrow Function

• 함수를 생성하는 방법으로 ES6에서 추가된 화살표 표기법(Arrow Function)입니다.
• function 예약어를 생략할 수 있습니다.
• 함수에 매개변수(Parameter)가 단 하나 뿐이라면 괄호()도 생략할 수 있습니다.
• 함수 바디가 표현식 하나라면 중괄호와 return도 생략할 수 있습니다.

let f1 = function() {
  console.log("hello");
}
// function 예약어 생략
let f1 = () => { console.log("hello"); }

let f2 = function(name) { 
  console.log(name);
}
// 파라미터 괄호 생략, 블록 중괄호 생략
let f2 = name => console.log(name);

let f3 = function(a, b) {
  return a + b; 
}
// return 생략
let f3 = (a, b) => a + b;

 

 

콜백함수

• 다른 함수가 실행을 끝낸 뒤 다시 호출되는 함수를 말합니다.

function func(callback) {
  callback();
}
function callback() {
  console.log("callback");
}

func(callback);

 

 

 

---

실습

// 1.배열 요소의 평균값을 계산하는 함수
function calculateAverage(arr) {
  let sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum / arr.length;
}
let calculate = [1, 2, 3, 4, 5];
console.log(calculateAverage(calculate)); // 3


// 2.배열 요소중 최댓값 구하기 함수
function getMaxValue(array) {
  let max = array[0];
  for (var i = 1; i < array.length; i++) {
    if (array[i] > max) {
      max = array[i];
    }
  }
  return max;
}
let numbers = [10, 5, 8, 15, 3];
console.log(getMaxValue(numbers)); // 15


// 3.계산기 함수
function calculate(num1, num2, operator) {
  switch(operator) {
  case '+':
    return num1 + num2;
  case '-':
    return num1 - num2;
  case '*':
    return num1 * num2;
  case '/':
    return num1 / num2;
  default:
    return "잘못된 연산자입니다.";
  }
}
let result = calculate(10, 5, '+');
console.log(result); // 15