Skip to content

Latest commit

 

History

History
102 lines (77 loc) · 2.75 KB

함수-화살표-함수.md

File metadata and controls

102 lines (77 loc) · 2.75 KB

함수 / 화살표 함수

Create Date: 2022/12/30
Update Date: 2022/12/30

노션에서 확인하기

함수는 한 번 정의하면 몇 번이고 호출할 수 있는 자바스크립트 코드 블록입니다.

매개변수와 인자

function sum(a, b) {
  return a + b;
}

sum(2, 3);
  • 위 코드에서 매개변수와 인자는 무엇일까요?
    • 매개변수: a, b / 인자: 2, 3
const array = {
  push: () => [].push('a'), // <= 객체의 ㅁㅁㅁ?
};
  • 위의 push라는 함수는 객체의 ㅁㅁㅁ라고 부릅니다. ㅁ안에 들어갈 단어는 무엇일까요?
    • 메서드

화살표 함수

function 함수_선언문() {
  return '함수 선언문';
}
const 함수_표현식 = function () {
  console.log('함수 표현식');
};

이전에 이런 문제를 냈었습니다. 화살표 함수는 함수 표현식입니다.

ES6에서 => 를 이용해 간결한 문법으로 함수를 정의할 수 있습니다.

const isGenius = () => true;

화살표 함수는 문법이 간결하므로 다른 함수에 전달할 때 이상적입니다. Array.method나 Object.method를 사용할 때 좋습니다.

// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6
var selected = allJobs.filter((job) => job.isSelected());

화살표 함수는 다른 방법으로 정의된 함수와 차이점이 존재합니다. 바로 자신이 정의된 환경의 this 키워드 값을 상속한다는 것입니다.

// ES5
function Person() {
  this.age = 0; // `this`를 자신의 인스턴스로 정의.

  setInterval(function growUp() {
    // 비엄격 모드에서, growUp() 함수는 `this`를 전역 객체로 정의
    // 이는 Person() 생성자에 정의된 `this`와 다릅니다.
    // 따라서 외부 age, 내부 age는 다른 Reference를 가지고 있습니다.
    this.age++; // dynamic scope # this
    console.log(this.age); // NaN
  }, 1000);
}

var p = new Person();

// ES6
function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // lexical scope # this
    console.log(this.age); // 1, 2, 3, 4, ...
  }, 1000);
}

var p = new Person();

참고 자료