[React #4] 함수 선언식/함수 표현식/화살표 함수/콜백 함수

01. 함수 선언식 (함수 선언 방식의 함수)

 

💡 함수는 중복되는 동일한 코드를 효율적으로 줄이기 위해 사용

area(10, 20); // 200
area(20, 20); // 400

function area(width, height) {
	console.log(width * height);
}

area(10, 30); // 300
area(10, 40); // 400

• 소괄호의 역할 : 매개변수를 전달하고 받는 과정을 전달하기 위함
• 함수 내부에서 선언한 변수나 상수는 밖에서 접근할 수 없음 -> 지역변수
• 함수 외부에 선언된 변수나 상수는 함수 내부에서 접근할 수 있음 -> 전역변수 (글로벌 함수)
• 호이스팅 : 함수 선언식으로 만들어진 함수들은 프로그램 실행 전 코드의 최상단으로 올라감
  -> 밑에서 함수 선언을 해도 위에서 호출할 수 있음

 

02. 함수 표현식

 

💡 함수를 변수에 담아서 활용하는 방식 (무명함수)

let helloA = function () {
  return "hello A";
};

console.log(helloA); // ƒ helloA() {}
console.log(helloA()); // hello A

• 호이스팅이 일어나지 않음
• 해당 함수가 직접적으로 선언하기 전에는 호출할 수 없음

 

03. 화살표 함수

 

💡 무명함수를 간단하고 간결하게 작성할 수 있도록 도와주는 문법

 

• 호이스팅의 대상이 아님

let helloA = () => {
  return "hello A";
};

console.log(helloA()); // hello A

 

• 구현부가 return밖에 없을 경우 return과 중괄호 생략 가능

let helloA = () => "hello A";

console.log(helloA()); // hello A

 

 

04. 콜백 함수

 

💡 함수의 파라미터로 함수를 넘기는 것

function checkMood(mood) {
  if (mood === "good") {
    // 기분 좋을 때 동작
    sing();
  } else {
    // 기분 안 좋을 때 동작
    cry();
  }
}

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

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

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

checkMood("good"); // ACTION :: SING

• 이렇게 작성하면 기분이 좋을 때나 안 좋을 때 동작을 직접 바꿔줘야 함

 

function checkMood(mood, goodCallback, badCallback) {
  if (mood === "good") {
    // 기분 좋을 때 동작
    goodCallback();
  } else {
    // 기분 안 좋을 때 동작
    badCallback;
  }
}

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

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

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

checkMood("bad", sing, cry()); // ACTION :: CRY

• 함수 표현식의 개념을 이용하여 function cry라는 함수를 'badCallback'이라는 매개변수의 값을 담아서 전달함

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'