JavaScript 기본 #2 함수

#5 함수

- 순서: 함수 선언 → 함수 호출 → 함수 안 → 함수 종료

- 여러번 호출 가능

- 함수 내에서 선언한 지역변수는 함수 내에서만 사용 가능

- 함수 외에서 선언한 전역변수는 함수 내/외에서 사용 가능

//함수 선언식, 함수 선언 방식의 함수 생성
function getArea() {
  let width = 10;
  let height = 20;
  let area = width * height;
  console.log(area);
}

getArea(); //200

//매개변수 사용
function getArea(width, height) {
  let area = width * height;
  return area;
}

let area1 = getArea(10, 20); //area1 = 200

 

---

#6 함수표현식 & 화살표 함수

< 함수 표현식 >

: 이름 없이 변수에 담아서 사용

 

*hoistiong: 함수 선언식으로 만들어진 함수는 실행 전에 코드의 최상단으로 끌어 올려진다.

(함수 표현식 x)

const helloText = helloA(); //오류 발생
const helloText = helloB(); //안녕

//함수 표현식
let helloA = function() {
  return "안녕";
}

//함수 선언식
function helloB() {
  return "안녕";
}

const helloText = helloA(); //안녕
const helloText = helloB(); //안녕

 

< 화살표 함수 >

- hoistiong의 대상이 아니므로 순서를 잘 지켜야 한다.

let hello = () => "안녕";

 

---

#7 콜백 함수

: 다른 함수의 매개변수로 함수를 넘겨준다.

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

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

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

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

checkMood("good", sing, cry);

//예시 2
function introduce (lastName, firstName, nameCallback) {
  let Name = lastName + firstName;
  NameCallback(Name);
}

function hello (name) {
  console.log("안녕 내 이름은 " + name);
}

introduce("김", "철수", hello); //안녕 내 이름은 김철수

 

---

이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.