React를 위한 Javascript (2)

함수 만들기

같은 작업을 반복 수행해야 할 때마다 함수를 사용할 수 있다. 함수를 만들 때 사용할 수 있는 여러 가지 문법을 살펴보고, 각 방식으로 만든 함수의 내부를 살펴보자.

1. 함수 선언

함수 선언 또는 함수 정의는 function 키워드로 시작하고, 그 뒤에 함수 이름이 온다. 함수에 속한 Javascript 문장은 중괄호 ({ }) 사이에 들어간다.

function logCompliment() {
  console.log("잘했어요!");
}

// 코드 실행
logCompliment();

2. 함수 표현식

함수를 만드는 다른 방법으로는 함수 표현식[function expression]이 있다. 함수 표현식은 (이름 없는) 함수를 만들며, 변수에 값을 대입할 수 있다.

const logCompliment = function() {
  console.log("잘했어요!");
}

// 코드 실행
logCompliment();

함수 선언과 표현식 중 어떤 쪽을 결정할 때 알아둬야 할 내용으로, 함수 선언은 호이스팅 되지만 함수 표현식은 호이스팅 되지 않는다.

인수 넘기기

예시로 작성한 logCompliment함수는 아무 인수[argument]나 파라미터[parameter]를 받지 않는다. 함수가 사용하는 변수에 대해 동적으로 값을 제공받고 싶다면, 함수 이름 뒤 괄호 안에 파라미터 이름을 추가해서 함수를 선언하면 된다.

const logCompliment = function(name, message) {
  console.log(`${name}님, ${message}`);
}

// 코드 실행
logCompliment("HyoJin", "잘했어요!");

값 반환하기

현재 함수는 값을 콘솔에 남기지만, 실제로는 값을 돌려받기 위해 함수를 호출하는 경우가 더 흔하다. 그렇다면 함수가 반환할 값을 지정하는 return문을 추가하자.

const logCompliment = function(name, message) {
  return `${name}님, ${message}`;
}

// 코드 실행
console.log(logCompliment("HyoJin", "잘했어요!"));

3.디폴트 파라미터

ES6 명세에는 디폴트 파라미터[default parameter]가 추가되었다. 함수에 호출하면서 인자 값을 지정하지 않으면 디폴트 값이 쓰인다.

const logCompliment = function(name = "Unknown", message = "안녕하세요!") {
  return `${name}님, ${message}`;
}

// 코드 실행
console.log(logCompliment()); // Unknown님, 안녕하세요!

문자열 뿐만 아니라 어떤 타입의 값이라도 default 값으로 사용할 수 있다.

const defaultPerson = {
  name: {
    first: "효진",
    last: "박",
  },
  favExercise: "러닝",
};

const logExercise = function (p = defaultPerson) {
  console.log(`${p.name.first}은(는) ${p.favExercise}를 좋아합니다.`);
};

// 코드 실행
logExercise(); // 효진은(는) 러닝를 좋아합니다.

4. 화살표 함수

화살표 함수[Arrow Function]는 ES6에 새로 추가된 유용한 기능이다. 화살표 함수를 사용하면 function키워드 없이도 함수를 만들 수 있다. 화살표 함수에서는 return을 사용하지 않아도 식을 계산한 값이 자동으로 반환된다.

const lordify = function (fruit) {
  return `구미의 ${fruit}`;
};

console.log(lordify("사과")); // 구미의 사과
console.log(lordify("딸기")); // 구미의 딸기

위의 함수 식을 화살표 함수를 사용하면 아주 간단하게 만들 수 있다.

const lordify = (fruit) => `구미의 ${fruit}`;
console.log(lordify("바나나")); // 구미의 바나나

const lordify_two = (fruit, land) => `${land}의 ${fruit}`;
console.log(lordify_two("멜론", "구미")); // 구미의 멜론

=> 화살표를 사용하면 한 줄로 모든 함수 정의를 끝낼 수 있다. function 키워드를 없애고, 화살표가 어떤 값을 반환하는지를 지정해주기 때문에 return도 없앴다. 또한, 파라미터를 하나만 받는 경우, 소괄호를 생략해도 된다는 것이다. (2개 이상이면 괄호가 필요)

지금까지는 반환해야 하는 것이 단 한 문장이었기 때문에 한 줄로 화살표 함수 정의를 끝냈다. 하지만, 결과를 계산하기 위해 여러 줄을 사용해야 한다면 중괄호({ })로 함수 본문 전체를 둘러싸야한다.

객체 반환하기

객체를 반환하고 싶을 때 어떻게 하면 될까?

const person = (firstName, lastName) => 
{
	first: firstName,
	last: lastName
};

console.log(person("애벌레", "코딩")); // Uncaught SyntaxError: Unexpected token :

이 오류를 고치기 위해서는 반환하려는 객체를 괄호로 둘러싸면 된다.

const person = (firstName, lastName) => ({
  first: firstName,
  last: lastName,
});

console.log(person("애벌레", "코딩")); // Uncaught SyntaxError: Unexpected token :

• 왜 괄호로 둘러싸야 하는가? 참고사항
  1. 코드 블록 (statement block)
     • 중괄호 안의 내용이 "실행문"으로 해석됨
     • 반환값이 없으면 undefined 반환
  2. () => { console.log("hi"); }
  3. 객체 리터럴 (object literal)
     • 객체를 직접 반환
     • 중괄호가 객체 리터럴의 중괄호라는 것을 명확하게 알려줘야 함
  4. () => ({ key: "value" })
  파서(자바스크립트 엔진)가 헷갈리는 지점

  const fn = () => { foo: "bar" };
  

  여기서 foo: "bar"는 객체의 속성이 아니라 label statement로 해석된다.즉, foo: "bar"는 "bar"라는 문자열을 실행하는 코드로 해석될 뿐, 반환값이 없다.

  ---

  왜 소괄호 ()로 감싸야 하는가

  const fn = () => ({ foo: "bar" });
  

  • () 안에 들어가면 표현식(expression) 으로 해석됨
  • 표현식의 중괄호는 객체 리터럴로 인식됨
  • 따라서 객체가 그대로 반환됨
• 객체 리터럴을 반환하고 싶다면, 파서에게 "이건 코드 블록이 아니라 값(표현식)이다" 라고 명확히 알려야 한다.
• loopLabel: for (let i = 0; i < 3; i++) { console.log(i); }
• 자바스크립트 파서가 화살표 함수 뒤의 {}를 보면, 기본적으로 코드 블록이라고 가정된다.
• 화살표 함수 (args) => { ... } 에서 { ... }는 두 가지 의미로 해석된다

화살표 함수와 영역

일반 함수는 this를 새로 바인딩[binding]한다. 예를 들어서, 아래 예시의 this는 gangwon객체가 아닌 그 어떤 것이다.

const gangwon = {
  reports: ["용평", "평창", "강촌", "강릉", "홍천"],
  print: function (delay = 1000) {
    setTimeout(function () {
      console.log(this.resorts.join(","));
    }, delay);
  },
};

gangwon.print(); // Cannot read property 'join' of undefined

이 오류는 this.resorts의 join메서드를 호출하려고 시도하기 때문인데, 해당 setTimeout함수 내에서 this를 콘솔로 확인해보면, window 객체임을 알 수 있다. 이를 해결하기 위해 화살표 함수를 사용하면 this영역이 제대로 유지된다.

const gangwon = {
  reports: ["용평", "평창", "강촌", "강릉", "홍천"],
  print: function (delay = 1000) {
    setTimeout(() => {
      console.log(this.reports.join(","));
    }, delay);
  },
};

gangwon.print(); // 1초 뒤 용평,평창,강촌,강릉,홍천 출력const gangwon = {
  reports: ["용평", "평창", "강촌", "강릉", "홍천"],
  print: function (delay = 1000) {
    setTimeout(() => {
      console.log(this.reports.join(","));
    }, delay);
  },
};

gangwon.print(); // 1초 뒤 용평,평창,강촌,강릉,홍천 출력

화살표 함수는 새로운 this 영역을 만들어내지 않는다.

 

const gangwon = {
  reports: ["용평", "평창", "강촌", "강릉", "홍천"],
  print: (delay = 1000) => {
    setTimeout(() => {
      console.log(this.reports.join(","));
    }, delay);
  }
};

gangwon.print(); // Uncaught TypeError: Cannot read properties of undefined