JavaScript | [ES6] arrow function, template literals, string methods

1. ES

ES는 ECMA Script의 줄임말로, JavaScript를 표준화시키고 규격화하기 위해 만들어졌다.
현재 ES10버전까지 나왔으나, 주로 ES6이 쓰이고 있으며, ES2015라고도 한다.

2. arrow function

ES5와 비교하여 ES6에서는 함수를 표현하는 방법이 완전히 달라졌다.

함수 선언 방법

// 이름이 없는 함수의 예
function() {}	// ES5
() => {}	// ES6

// 이름이 있는 함수의 경우
function getName () {}	// ES5
const getName = () => {}	// ES6

//호출하는 방법은 동일
getName()	

인자를 받을 때

const getName = function (name) {}	// ES5
const getName = (name) => {}	// ES6
const getName = name => {}	// 인자가 하나인 경우 괄호 생략 가능. 두개 이상인 경우 불가

반환할 때

// ES5
function hi (text) {
  text += '하세요';
  return text;
}

// ES6
const hi = text => {
  text += '하세요';
  return text
};

//만약 함수의 실행내용이 없이 return만 한다면 return 키워드와 중괄호 생략 가능
const hi = name => { return name };
const hi = name => name;	// 이 경우 화살표 오른쪽에는 리턴될 '값'만 쓰여야 함.

3. template literals

back tick을 이용해 변수 넣기

기존 ES5에서 string 작성시 따옴표('')를 이용했지만 ES6부턴 back tic(``)으로도 감쌀 수 있게 되었다.
back tick(``)을 이용해 변수를 넣는 것은 python에서 f-string과 같은 역할을 한다.

// ES5
const hi = '안녕하세요. 저는 ' + name + ' 입니다.';

// ES6
const name = '김개발';  // 따옴표('')
const hi   = `안녕하세요. 저는 ${name} 입니다.`;  // back tick으로 문장을 감싸고 ${}로 변수를 감싸 변수 표현 가능

개행

// ES5 - 개행처리를 따로 해줘야함
let detail = '자세히\n'+'보아야\n'+'이쁘다';

// ES6 - string을 입력한대로 개행
let detail = `자세히
보아야
이쁘다

내코드..`;

4. string method

예전 string method에서 특정 문자를 찾기 위해 indesOf를 사용했다. 그러나 ES6부턴 아래의 3가지 method가 생겨 특정 문자열을 찾는 것이 더 편리해졌다.
더 많은 string method는 여기에서 확인!

해당 문자열 포함 여부를 확인해 true/false로 반환

• startsWith
• endsWith
• includes

const email = 'hjulee12@gmail.com';

console.log(email.startsWith('hju')); // true
console.log(email.endsWith('com')); // true
console.log(email.includes('@gmail')); // true
console.log(email.includes('@gmail', 8)); // true, '@gmail' 문자가 8번째 위치에서 시작
console.log(email.includes('@gmail', 9)); // false, '@gmail' 문자가 9번째 위치에서 시작하지 않음.