TIL -25. JavaScript : [es6] arrow function

ES는 is a scripting-language specification standardized by Ecma International, ECMA Script의 줄임말

만든 이유?
:JavaScript의 역사는 점점 기퍼지고, 문법의 보안이 필요하면서 버전별로 문법을 확장시키고, 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES가 명세를 확정해왔다.

1. arrow function : =>

//ES5
function() {}

//ES6
() => {}

• 위의 코드는 이름이 없는 함수의 기본적인 표현
• ES6에서는 function이라는 키워드가 빠지고 소괄호만 남아 =>(arrow)가 추가
• 호출할 때는 둘다 같다.

getName()

• 인자가 하나일 때는 소괄호가 생략 가능하다.
  단, 인자가 두개일 때는 생략이 불가능하다.

const getName = (name) => {} //인자가 하나일 때 소괄호
const getName = name => {}//인자가 하나일 때 소괄호 생략가능
const getName = (name, age) => {} //인자가 두개이상일 때

• 함수가 실행내용이 딱히 없어 return만 한다면, return키워드와 중괄호가 생략가능하다.

const hi = name => { return name };
const hi = name => name;

중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 써야한다. 다른코드가 들어가면 안된다.

2.template literals

• String 작성할 때 따음표를 사용하였지만,ES6에서는 back tick으로도 string을 감쌀 수 있다.

const name = '김개발'; //기존
const name = `김개발`; //back tick으로 감싸기

• back tick으로 감싸면 그 안에 변수를 넣어서 표현할 수 있다.
  변수를 사용하려면 ${}으로 변수를 감싸줘야 한다.

const name = '김개발';
const hi = `안녕하세요. 저는 ${name} 입니다.`;

• 엔터처리(개행, break line), 따음표로 감싼 string은 개행 처리를 하지 않으면 문법 오류가 난다. 따음표로 감싼 string에서 개행을 하려면 아래와 같이 한다.

let detail = '자세히\n'+'보아야\n'+'이쁘다';
console.log(detail);

3. string method

• ES6에서 추가된 몇가지 유용한 string method가 있다.
• startsWith , endsWith, includes

const email = 'yealee.kim87@gmail.com';

console.log(email.startsWith('ye'));
console.log(email.endsWith('com'));
console.log(email.includes('@gmail'));

또, 특정 문자열을 반복하고 싶으면 repeat함수를 쓰면 된다.