본문 바로가기

개발공부/한입 크기로 잘라먹는 리액트

[S1U6~8] 함수, 함수표현식과 화살표함수, 콜백함수

1. 함수

1-1. 직사각형의 면적을 계산하는 식 만들어보기

직사각형의 면적을 계산하고 출력하는 코드를 만들어보자

// 1. 너비를 먼저 정하고
let width1 = 10;
// 2. 높이도 정해준다.
let height1 = 20;
// 3. 면적 계산식인 너비 * 높이를 해준다.
let area1 = width1 * height1;
console.log(area1); //200

let width2 = 30;
let height2 = 15;
let area2 = width2 * height2;
console.log(area2); //450

위와 같은 코드로 직사각형의 면적을 계산할 수 있다.
하지만 너비와 높이의 값만 다르고, 면적을 생성하는 식은 같은 동작들이 반복되고 있다.
반복적인 작업을 하드코딩하기보다는 함수를 이용하면 편리해진다.

1-2.함수를 이용하여 직사각형의 면적을 계산하는 식 만들어보기

함수로 직사각형의 면적을 계산하는 방법을 알아보자.

function getArea() {
  let width = 10;
  let height = 20;
  let area = width * height;
  //이렇게 만들 경우 콘솔에 아묷도 출력되지 않는다.
  console.log(area); 
}

콘솔에 아무것도 출력되지 않는 이유는 함수를 생성만 하였지 사용을 해주지 않아서이다.

이럴때는 함수를 사용하여 호출해주면 된다.

function getArea() {
  let width = 10;
  let height = 20;
  let area = width * height;

  console.log(area); //200
}
//함수호출
getArea();
console.log("함수실행 완료") //함수실행 완료

** 정리 **

  1. function getArea()로 함수를 생성한다.
  2. getArea()를 통해 호출된다.
  3. 호출 후 함수 내부의 코드들을 순차적으로 읽어 면적을 계산해준다.
  4. 함수의 닫힌 중괄호(})에 도달하면 함수 호출이 종료된다.
  5. console.log("함수실행 완료")가 출력된다.

여기서 getArea()함수를 여러번 호출해도 상관은 없으나, 너비와 높이가 고정되어있기때문에
항상 같은 결과값만 출력된다.

너비와 높이를 다르게 받아 면적을 계산해주는 함수를 생성해보자

1-3. 매개변수를 이용하여 너비와 높이를 다르게 받는 함수 만들어보기

function getArea(width, height) {
  //함수명(매개변수1, 매개변수2)
  let area = width * height;
  console.log(area); //6
}
getArea(2, 3);
//getArea(너비, 높이)에서 너비와 높이를 다르게 넣어주면 면적값이 함수내부에 있는 console.log(area)에 출력된다.

위와 같이 함수명(매개변수1, 매개변수2)를 이용하여 함수를 생성해준 후,
함수 밖에서 호출을 해주면 결과값이 콘솔에 찍히게 된다.

여기서 면적을 출력하는 것이 아닌 면적의 결과값을 받고 싶을때는 어떻게 하면 좋을지 살펴보자

1-3. 매개변수를 이용한 함수의 결과값 받기

function getArea(width, height) {
  let area = width * height;
  // return 이라는 키워드를 사용하여 결과값을 반환해준다.
  return area;
}
//대입 연산자를 이용하여 area라는 변수에 저장한다.
let finalarea = getArea(100, 200);
console.log(finalarea); // 20000
// 면적에 대한 결과값이 출력된다.

이제 추가로 전역변수와 지역변수에 대해서 한번 알아보도록 하자

1-4. 전역변수와 지역변수

1-4-1. 지역변수

function getArea(width, height) {
  let area = width * height;
  return area;
}

let finalarea = getArea(100, 200);
console.log(finalarea); // 20000

console.log(area); //area is not defined
// 함수의 바깥에서 함수 내부에 있는 변수인 area를 출력해보면 'area is not defined'라는 문구가 뜬다.
// area라는 변수는 함수 내부에서만 작동하는 '지역변수'이기때문이다.

1-4-2. 전역변수

let count = 1;

function getArea(width, height) {
  let area = width * height;
  console.log(count); // 1
  // 함수외부에 있는 변수 count는 함수 내부에서 출력가능하다.
  // 여기서 count는 전역변수라고 한다.
  return area;
}

let finalarea = getArea(100, 200);
console.log(finalarea); // 20000

console.log(area); //area is not defined

이처럼 함수 내부의 지역변수는 함수바깥에서 출력이 되지 않고, 함수 외부의 전역변수는 함수내부에서 출력이 가능하다.

2. 함수표현식과 화살표함수

2-1. 함수표현식

함수도 결론적으로는 상수이기때문에 어떤 변수나 상수에 담아서 사용할 수 있다.

let hello = function() {
  // 여기서 함수의 명을 굳이 따로 작성해주지 않아도 괜찮다.
  return "안녕하세요 여러분";
};
// 함수를 대입 연산자를 이용하여 대입해준 후
const helloText = hello();
// helloText를 호출해보면 리턴 값이 호출된다.
console.log(helloText); // 안녕하세요 여러분

즉, 함수 표현식은 hello라는 변수에 function() {...}를 담아서 사용하는 방식이다.

그렇다면 함수 표현식과 함수 선언식의 차이를 한번 알아보자

2-1-1. 함수표현식과 함수선언식의 차이

// helloA는 함수표현식으로 작성된 함수
let helloA = function() {
  return "안녕하세요 여러분A";
};
// helloB는 함수선언식으로 작성된 함수
function helloB() {
  return "안녕하세요 여러분B";
};

위와 같이 작성된 코드가 있다고 가정해보자
여기서 함수를 호출해보자.

console.log(helloA()); // Cannot access 'helloA' before initialization
console.log(helloB()); // 안녕하세요 여러분B

// helloA는 함수표현식으로 작성된 함수
let helloA = function() {
  return "안녕하세요 여러분A";
};
// helloB는 함수선언식으로 작성된 함수
function helloB() {
  return "안녕하세요 여러분B";
};

함수선언식과 함수표현식이 작성된 코드줄 이전에 호출을 해보면 함수표현식으로 작성된 helloA()는 에러 메세지가 뜨고,
함수선언식으로 작성된 helloB()는 리턴값이 출력된다.

이렇게 함수선언식으로 작성된 코드의 결과값이 작성된 함수선언식 이전에 등장할 수 있는것을 호이스팅이라고 한다.
함수 호이스팅은 함수선언식으로 만들어진 함수를 프로그램 실행 전에 최상단으로 끌어올려주는것이라고 생각하면 된다.

함수표현식으로 작성된 helloA()는 호이스팅이 일어나지 않기때문에 에러메세지를 출력하고있다.

// helloA는 함수표현식으로 작성된 함수
let helloA = function() {
  return "안녕하세요 여러분A";
};
// helloB는 함수선언식으로 작성된 함수
function helloB() {
  return "안녕하세요 여러분B";
};

console.log(helloA()); //안녕하세요 여러분A

이렇게 함수표현식으로 작성된 함수는 함수표현식 이후의 코드줄에 호출을 해줘야만 리턴값이 호출된다.

2-2. 화살표 함수

화살표함수를 이용하여 코드를 작성해주면 좀 더 간결하게 코드를 작성할 수 있다.

let helloA = () => {
  //function을 생략하고 바로 화살표로 작성해줄 수 있다.
  return "안녕하세요 여러분A";
};

console.log(helloA()); // 안녕하세요 여러분A

function이라는 문구를 삭제할수있음으로써 코드가 좀 더 간결해진다.

let helloA = () => { return "안녕하세요 여러분A"; };

위와 같이 한줄로 작성해주어도 콘솔레 출력했을때 같은 결과값이 나온다.
여기서 더 간결하게 만들어보자

let helloA = () => "안녕하세요 여러분A";

위 예제코드는 리턴값이 간결하기 때문에 중괄호를 삭제하고 작성해주어도 괜찮다.

여기서 주의해야할 점은 화살표함수는 호이스팅의 대상이 아니라는 점이다.

3. 콜백함수

콜백함수란 어떤 다른 함수에 매개변수로 함수를 넘겨준것을 의미한다.
코드를 보면서 직접 익혀보자

function checkkMood (mood) {
    if (mood === "good") {
        // 기분좋을때 하는 동작
        sing()
    } else {
        //기분이 안 좋을때 하는 동작
        cry()
    }
}

function cry () {
    console.log("ACTION :: CRY");
}

function sing() {
    console.log("ACTION :: SING"); //ACTION :: SING
}

function dance() {
    console.log("ACTION :: DANCE");
}

checkkMood("good");

checkMood(()good을 넣어주면 ACITON :: SING이 호출된다.

checkMood("sad")로 해주면 다음과 같다

function checkkMood (mood) {
    if (mood === "good") {
        // 기분좋을때 하는 동작
        sing()
    } else {
        //기분이 안 좋을때 하는 동작
        cry()
    }
}

function cry () {
    console.log("ACTION :: CRY"); // ACTION :: CRY
}

function sing() {
    console.log("ACTION :: SING");
}

function dance() {
    console.log("ACTION :: DANCE");
}

checkkMood("sad");

하지만 이처럼 checkMood()"good"이나 "sad"의 값을 넣었을때
고정된 동작(sing or cry)만 작동한다.
아직 dance()는 사용해보지도 못하였다...

checkMood()함수를 좀 더 유연하게 작성해보자

function checkkMood (mood, goodCallback, badCallback) {
  // goodCallback, badCallback이라는 매개변수를 추가한 후
    if (mood === "good") {
        // 기분좋을때 하는 동작에 goddCallback을 넣어준다.
        goodCallback();
    } else {
        //기분이 안 좋을때 하는 동작에 badCallback을 넣어준다.
        badCallback();
    }
}

function cry () {
    console.log("ACTION :: CRY"); //ACIION :: CRY
}

function sing() {
    console.log("ACTION :: SING");
}

function dance() {
    console.log("ACTION :: DANCE");
}

checkkMood("sad", dance, cry);
// checkMood에 mood와 goodCallback에서 실행할 함수, badCallback에서 실행할 함수를 넣어준다.

여기서 checkkMood("good", dance, cry);를 입력해주는 경우 ACTION :: DANCE가 출력된다.

이처럼 checkkMood("sad", dance, cry);, checkkMood("good", dance, cry);와 같이 작성된것은 함수표현식이며,
dance(), cry(), sing()과 같은 함수를 매개변수(parameter)에 담는것을 콜백함수라고 한다.

이렇게 콜백 함수를 사용하면 유연한 코드를 만들 수 있다.