자바스크립트 ES6 함수의 추가기능 살펴보기

2023. 2. 10. 20:10· Language/javascript
목차
  1.  
  2. 1. 함수의 구분
  3. 2. 메서드
  4. 3. 화살표 함수
  5. * 매개변수 선언
  6. * 함수 몸체 정의
  7. * 화살표 함수와 일반 함수의 차이
반응형

 

1. 함수의 구분

자바스크립트 ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있었다. ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론이고 생성자 함수로서 호출도 가능했다. 즉, ES6 이전의 모든 함수는 callable이면서 constructor인 것이다. 이는 혼란을 줄 수 있고 에러를 발생시킬 가능성도 있기 때문에 성능 측면에서 좋지 않은 영향을 끼친다고 하는데 그래서 ES6에서부터는 함수를 사용 목적에 따라 일반함수, 메서드, 화살표 함수로 명확히 구분했다.

 

ES6 함수의 구분 constructor prototype super arguments
일반 함수 O O X O
메서드 X X O O
화살표 함수 X X X X

 

* callable : 호출할 수 있는 함수 객체

* constructor : 인스턴스를 생성할 수 있는 함수 객체

* non-constructor : 인스턴스를 생성할 수 는 함수 객체

 

 

2. 메서드

ES6 이전에는 메서드에 대한 명확한 정의가 없었으나, ES6 부터는 메서드에 대한 정의가 명확하게 규정되었다. ES6에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. ES6 사양에서 정의한 메서드는 non-constructor이기에 생성자 함수로서 호출할 수도 없고, 인스턴스 생성도 할 수 없어 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

 

const obj = {
  x: 1,
  // foo는 메서드다.
  foo() {
    return this.x
  },
  // bar에 바인딩된 함수는 메서드가 아닌 일반 함수다.
  bar: function () {
    return this.x
  },
}

console.log(obj.foo())
console.log(obj.bar())

 

 

3. 화살표 함수

화살표 함수는 function 대신 화살표( => )를 사용하여 기존의 함수 정의 방식보다 간략하게 정의할 수 있다. 화살표 함수는 함수 표현식으로 정의해야한다.

* 매개변수 선언

1. 매개변수가 여러개인 경우 소괄호 () 안에 매개변수를 선언한다.

const hello = (x, y) => { console.log(x, y) };

 

2. 매개변수가 한개인 경우 소괄호 ()를 생략할 수 있다.

const hello = x => { console.log(x) };

 

3. 매개변수가 없는 경우 소괄호 ()를 생략할 수 없다.

const hello = () => { ... };

 

* 함수 몸체 정의

1. 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있다.

const hello = (x, y) => console.log(x, y)
hello(1, 5) // 1, 5

// 위 표현은 다음과 동일
const hello = (x, y) => { return console.log(x,y) }

 

2. 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호 ()로 감싸주어야한다.

const hello = (id, name) => ({ id, name });
hello(1, 'Lia') //{id: 1, name: 'Lia'}

// 위 표현은 다음과 동일
const hello = (id, name) => { return { id, name } };

 

3. 함수 몸체가 여러 개의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 없다. 이 때, 반환값이 있다면 반환값을 명시적으로 반환해야한다.

const hello = name => {
    const result = `안녕하세요 제 이름은 ${name} 입니다.`;
    return result;
}

hello('Lia') // `안녕하세요 제 이름은  Lia 입니다.`

 

4. 화살표 함수도 일급객체이므로 map, filter, reduce 등과 같은 고차함수에 인수로 전달할 수 있다. 

// ES5
[1, 2, 3].map(function (v) {
  return v * 2;
});

// ES6
[1, 2, 3].map(v => v * 2); // -> [ 2, 4, 6 ]

 

* 화살표 함수와 일반 함수의 차이

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor

2. 화살표 함수는 일반 함수와 달리 중복된 매개변수 이름을 선언할 수 없다.

3. 화살표 함수는 함수 자체의 this, argument, super, new.target 바인딩을 갖지 않는다.

4. this의 용법 차이 : 화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 this이다. 화살표 함수의 this는 일반 함수의 this와 다르게 동작하기 때문. 

 

 

 

반응형
저작자표시 비영리 동일조건 (새창열림)
  1.  
  2. 1. 함수의 구분
  3. 2. 메서드
  4. 3. 화살표 함수
  5. * 매개변수 선언
  6. * 함수 몸체 정의
  7. * 화살표 함수와 일반 함수의 차이
'Language/javascript' 카테고리의 다른 글
  • 자바스크립트 String과 Symbol 타입
  • 자바스크립트 배열은 배열이 아니다?
  • appendChild로 여러개 추가, append vs appendChild 차이(+ prepend, after, before)
  • 자바스크립트 Strict mode 왜 쓰는걸까? + 제약조건
도잎
도잎
프론트엔드 개발 성장기록
도잎
JDevelog
도잎
전체
오늘
어제
반응형
  • 분류 전체보기 (149)
    • Web dev (48)
      • React (22)
      • Vue (8)
      • Next.js (6)
      • Node.js (2)
      • Springboot (2)
    • App dev (2)
      • Flutter (2)
    • Language (33)
      • javascript (30)
      • typescript (2)
      • java (1)
    • StyleSeet (3)
      • CSS (3)
      • Sass (0)
    • Database (2)
      • PostgreSQL (1)
    • DevOps (11)
      • Webpack (4)
      • Linux (3)
      • Docker (2)
      • Tomcat (1)
    • 개발지식 (2)
      • Web (1)
    • 항해99(6기) (20)
    • UXUI (0)
    • 알고리즘 (25)
    • 유용정보 (2)

최근 글

hELLO · Designed By 정상우.v4.2.1
도잎
자바스크립트 ES6 함수의 추가기능 살펴보기
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.