함수(function) : 함수 선언, 함수 표현식, 화살표 함수

21 Sep 2021 - 1 minute read

함수 (function)

---

함수 선언 (Function Declaration)

function 함수명(매개변수){
    코드블럭, 리턴문, ...
}

function test(){
    console.log("function test");
    }

test(); //함수 호출(calling), 실행(running)   

function fruitJuice(apples, oranges) { //parameter(매개변수)
    const juice = `Juice with ${apples} 🍎 and ${oranges} 🍊.`;
    return juice;
} 

const makeJuice = fruitJuice(3, 2); //실행될 때 함수 파라미터에 값 전달
console.log(makeJuice);

//출력 : 
//Juice with 3 🍎 and 2 🍊.

console.log(fruitJuice(1, 3));
//출력 : 
//Juice with 1 🍎 and 3 🍊.

함수 표현식 (Function Expression)

//익명 함수 표현식
변수선언키워드 변수명 = function(매개변수){
    코드블럭, 리턴문, ...
}

//기명 함수 표현식
변수선언키워드 변수명 = function 함수명(매개변수){
    코드블럭, 리턴문, ...
}

함수 선언문과 함수 표현식의 차이

• 함수선언문은 호이스팅에 영향 O, 함수 표현식은 호이스팅에 영향 X

• 함수 선언문은 코드 구현 위치와 관계 없이 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려짐 > 함수 실행 먼저 하고 함수 정의 가능

• 함수표현식은 인터프리터가 해당 코드 줄에 도달할 때 로드됨

화살표 함수 (Arrow Function)

변수선언키워드 변수명 = 매개변수 => 표현식;

const calcAge = birthYear => 2021-birthYear;
const age = calcAge(1994);
console.log(age);

QUIZ

• ‘calcAverage’ 함수 만들어 점수 평균 계산
• ‘checkWinner’ 함수 만들어 teamA와 teamB의 평균을 매개변수로 전달, 각 팀의 점수와 함께 승리 팀 출력

const calcAverage = (a, b, c) => (a + b + c) / 3;

const teamA = calcAverage(43, 56, 26);
const teamB = calcAverage(51, 64, 37);

const checkWinner = function(avgTeamA, avgTeamB){

    if (avgTeamA > avgTeamB){
        console.log(`Team A wins ! (${avgTeamA} vs. ${avgTeamB}`)
    } else if (avgTeamB > avgTeamA){
        console.log(`Team B wins ! (${avgTeamB} vs. ${avgTeamA}`)
    } else {
        console.log("No team wins :p")
    }
}

checkWinner(teamA, teamB);