(1-3) JS/Node 기초 - 함수

 

함수란 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록이다.

함수는 항상 출력값을  반환한다. (return)
함수는 어떻게 사용할까?

function cal(param1, param2) {
	console.log(param1 + param2);
	return param1 * 10; // 버튼 제작, 선언
}

cal(10,20); // 버튼 사용, 호출

 

 

삼각형의 넓이를 구해야 되는 경우를 함수로 만들어보자.

function getTriangleArea(base, height){
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

console.log(getTriangleArea(2, 4)); // Prints 4


// 함수 내부에서 return을 한 경우, 출력값이 return 문의 값.

 

 

function getTriangleArea(base, height) {
  let triangleArea = (base * height) / 2;
  }
  console.log(getTriangleArea(2, 4))     // Prints undefined
  
  
  //함수 내부에서 return을 하지 않은 경우 출력값이 undefined

 

 

함수 선언 방법인 함수 선언식, 함수 표현식, 화살표 함수에 대해 알아보자.

 

 

함수 선언식

function getTriangleArea(base, height) {
 let triangleArea = (base * height) / 2;
 return triangleArea;
}

// 함수 선언식

 

 

함수 표현식

const getTriangleArea = function (base, height) { 
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// 함수 표현식 - getTriangleArea라는 변수를 선언, 익명의 함수를 할당한다.

 

 

화살표 함수

const getTriangleArea = (base, height) => {
  let tirangleArea = base * height;
  return triangleArea;
};

// 화살표 함수 - getTriangleArea 라는 변수 선언, 함수 선언 화살표로 대체.

 

 

const getTriangleArea = (base, height) => base * height / 2;    // 0, 정상 작동
const getTriangleArea = (base, height) => { base * height / 2 } // X, undefined 리턴.

// 만약 함수의 본문(body)에 return 문만 있는 경우, return과 {} 중괄호를 생략할 수 있다.

 

 

const getTriangleArea = (base, height) ==> (base * height / 2)  // 0, 정상 작동

// return 문에서 소괄호를 사용할 수 있다.

 

 

//bad
const getStudentAvg = arr.filter(person => person.job === 'student').reduce((sum, person)) => (sum + person.grade), 0)

//good
const getStudentAvg = arr => {
  return arr
  .filter(person => person.job === 'student')
  .reduce((sum, person) => (sum + person.grade), 0)
}

//만약 함수 내의 표현식이 2줄 이상인 경우, return과 {} 중괄호(Curly brace)를 명시적으로 쓰는 것이 좋다.