spread 문법 사용방법, 화살표 함수 사용 방법

bin·2023년 1월 20일
0

spread 문법

ES6에 스프레드(spread)문법이 추가 되었습니다. 이 문법은 Spread Operator(스프레드 연산자, 전개 구문, 펼침 연산자 등)라고 하는데, 배열이나 문자열 같이 반복이 가능한 문자를 0개 이상의 인수(피라미터, 함수로 호출시) 또는 요소 (배열 리터럴의 경우)로 확장할 수 있습니다.

간단한 예를 들면 다음과 같은 표현을 들 수 있습니다.

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [...arr1, 6, 7, 8, 9]; 

console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

var str1 = 'paper block';
var str2 = [...str1]
console.log(str2); // ["p", "a", "p", "e", "r", " ", "b", "l", "o", "c", "k"]

화살표 함수 사용 방법

화살표 함수 표현은 전통적인 함수표현의 간편한 대안입니다. 하지만, 화살표 함수는 몇가지 제한점이 있고 모든 상황에 사용할 수 없습니다.

  1. this나 super에 대한 바인딩이 없고 methods로 사용될 수 없습니다.
  2. new.target 키워드가 없습니다.
  3. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
  4. 생성자로 사용할 수 없습니다.
  5. yield를 화살표 함수 내부에서 사용할 수 없습니다.
const materials = [
'Hydrogen'.
'Helium',
'Lithium',
'Beryllium'
];

console.log(materials.map(material => material.length));
// Array [8, 6, 7, 9]

이렇게 작성하며, 코드나 매개변수가 하나 뿐인 경우 괄호하지 않아도 됩니다.

(singleParam) => {statements}
singleParam => { statements }

spread 참고 https://paperblock.tistory.com/62
화살표 함수 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

profile
프론트엔드부터 공부하고 있습니다

0개의 댓글