[JS] 자바 스크립트 함수 다루기

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

자바 스크립트에서 함수는 함수 선언문, 함수 표현식, 화살표 함수등을 사용해 정의

---

함수 선언문으로 함수 정의

function 키워드로 함수 정의

function 식별자(){}

ex)

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

gugudan(); -> 이와 같은 방식으로 실행

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

const 변수명 = function(){}; // 익명 함수
const 변수명 = function 식별자(){}; // 네이밍 함수

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

함수 선언문과 다르게 function 키워드 다음에 오는 식별자로 함수를 호출하지 않고, 할당한 변수명으로 호출

ex)

const gugudan = function() {
	for(let i=1; i<=9; i++){
    	console.log(`3 * ${i} = ${3 * i}`);
    }
};
gugudan(); // 익명함수 또한 변수명으로 호출

함수 표현식으로 함수 정의 시 const 키워드 주로 사용
-> var, let 키워드를 사용해도 문제 X

화살표 함수로 정의하기

() => {};

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

---

매개변수, 인수

매개변수 : 함수를 정의할 때 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수

인수 : 전달하고 싶은 데이터를 적은 것

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

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

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

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

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

ex)

gugudan(3);
gugudan(5);

매개변수가 있는 함수 호출 시, 인수를 전달하지 않아도 오류 발생 X
-> undefined 값이 할당됨

함수에 미리 기본 값 할당 가능

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

sum(); 

---

return 문

함수 외부로 데이터 반환 시 사용

function sum(num1, num2){
	let result = num1 + num2;
    return result;
}
const result = sum(10, 20);
console.log("out:" + result); // out : 30

함수를 거치면 배열에서 가장 큰 값 return 하는 함수 구하기

function getArrayMaxNumber(arr){
    let max_val = -9999999;
    for(let i = 0; i <arr.length ; i++){
        if(arr[i]>max_val){
            max_val = arr[i];
        }
    }

    return max_val;
}

const max = getArrayMaxNumber([10,50,30]);
console.log(max);

---

스코프

변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙

함수 스코프

함수에서 정의한 블록문만 스코프의 유효 범위로 인정하는 방식

함수 내부 -> 지역 스코프, 함수 외부 -> 전역 스코프

function sum(){
	let a = 10; //지역 스코프
    console.log(`함수 내부 : ${a}`);
}
sum();
console.log(`함수 외부 : ${a}`);

블록 스코프

원래 js는 함수 스코프를 따른느 언어였지만, ES6에서 let,const 키워드가 추가되면서 블록 스코프 또한 지원
-> 블록 스코프란 {}로 구성된 블록문을 기준으로 스코프의 유효 범위를 나누는 방식

let a = 10;
{
	let b = 20;
    console.log(`코드 블록 내부 a: ${a}`);
    console.log(`코드 블록 내부 b: ${b}`);
}
console.log(`코드 블록 내부 a: ${a}`);
console.log(`코드 블록 내부 b: ${b}`);

위 경우 코드 블록 내부 b를 외부에서 출력할때 오류

블록 스코프는 let,const 키워드에서만 발생하므로 위 코드를 var 키워드로 바꾸면 참조 오류 X

참조 우선순위

let,const 키워드는 같은 식별자의 중복 선언 불가
-> 정확하게는 같은 스코프 영역에서 중복 선언 불가

let a = 10;
const b = 20;
function sum(){
	let a = 50;
    const b = 70;
    console.log(`함수 내부 a:${a}`);
    console.log(`함수 내부 b:${b}`);
}
sum();

함수 내부 a:50
함수 내부 b:70

전역 스코프와 지역 스코프에 같은 식별자를 가지는 참조 대상이 있다면, 우선 같은 지역 스코프의 식별자를 찾아서 참조
-> 찾지 못할때는 전역 스코프에서 참조

---

함수 호이스팅

호이스팅이란 코드를 선언과 할당을 분리해 선언부를 자신의 스코프 최상위로 끌어올리는 것

console.log(num);
var num = 10;

var num; // 선언부를 스코프 최상위로 끌어올림
console.log(num);
num = 10;

printHello();
function printHello(){
	console.log("Hello");
}

// 위 경우 함수가 정의되기 전에 호출되서 오류가 날것 같지만, 정상 동작

function printHello(){ // 함수 선언문을 최상위로 끌어올림
  	console.log("Hello");
}
printHello();

선언과 할당을 분리해서 선언부를 스코프 최상위로 올리는 것
-> 함수 표현식으로 정의된 함수는 함수 선언문으로 정의된 함수와는 조금 다르게 동작

// 이 경우엔 에러
printHello();
var printHello = function printHello(){
	console.log("Hello");
}

var printHello;
printHello();
printHello = function printHello(){
  console.log("Hello");
} // 에러

화살표 함수 방식또한 변수를 할당하는 것이므로 위와 같이 호스팅 되어 에러
-> 함수 표현식이나 화살표 함수를 let이나 const 키워드로 선언했다면 호이스팅 자체가 되지 않음

---

즉시 실행 함수 사용

함수를 정의하면서 동시에 실행까지 하는 함수

(function(){})();

일반적으로 함수를 선언 시 전역 스코프에 정의됨
-> 프로그램이 종료되기까지 전역 스코프에 선언한 함수는 메모리에서 사라지지 않음

const init = function(){
  	console.log("initialized!");
}

위 코드의 경우에는 어짜피 한번만 사용할 함수인데, const 키워드 때문에 init 식별자를 더이상 사용할 수 없음
-> 이러한 오염을 방지하기 위해 즉시 실행 함수 사용

(function init(){
	console.log("initialized!");
})();

// initialized!
init() ; //ReferenceError : init is not define

즉시 실행 함수는 한번 실행되고 나면 메모리에 데이터가 남지않아, init 식별자는 한번도 사용되지 않은 것처럼 인식 됨

매개변수가 있는 함수도 즉시 실행 함수로 정의해서 실행

(function sum(a, b){
  	console.log(a + b);
}) (10,20); // 30

---

코드 예시

원의 넓이 반환하는 함수

const pi = 3.14;

const circle_area = (a,b) =>{
    return a * b * pi;
}

let area = circle_area(3,4);
console.log(area);

매개변수로 배열을 전달받아, 배열의 요소 중에서 가장 큰 수를 찾아 반환하는 함수

const max_find = (arr) =>{
    let max_val = -999999;

    for(let i = 0; i < arr.length ; i++){
        if(arr[i] > max_val){
            max_val = arr[i];
        }
    }
    return max_val;
}

console.log(max_find([1,5,6,8,100,90,999]));

BMI 지수를 계산하여 비만,과체중,정상, 저체중 반환하는 함수

const BMI_calc = (weight, height_cm) => {
    let BMI = weight / (height_cm / 100) ** 2;
    if(BMI >= 26){
        return "비만입니다."
    } else if(BMI >= 24){
        return "과체중입니다"
    } else if(BMI >= 18.5){
        return "정상입니다."
    } else{
        return "저체중입니다."
    }
}

console.log(BMI_calc(56, 180));