[JavaScript] ES6 syntax

link717·2020년 9월 19일

JavaScript TIL WeCode arrow function string method template literal

JavaScript

목록 보기

8/17

🍭 ES6 문법 맛보기!

🥞 arrow function

function를 표현할 때 쓸 수 있는 새로운 표현식으로 ES6에서 새로 도입된 문법이다.

. ES5
function() {}

. ES6
() =>     // 간단한거는 괄호도 생략가능
() => ()  // return을 입력하지 않아도 return 됨

() => {}  // return을 입력해야 함

. ES5
const getName = function(name, age) {}

. ES6
const getName = (name, age) => {}
const getName = name => {} 

* parameter가 1개 일때는 소괄호도 생략가능하다.

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

. ES5
function getName(name) {
  return name;
}

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

*중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 한다.

🍘 arrow method의 활용

arrow function은 callback 함수(인자도 전달되는 함수)로 사용할 때 가장 많이 사용한다. arrow method를 활용하기 위해 array method를 간단히 설명하겠다.

.Array.map(): map method는 배열을 반복하는데 callback 함수에서 return한 값으로 각 요소를 수정해준다. map method의 return 값은 수정된 값으로 다시 생성된 배열이다.

🍘 assignment

moreThan100 함수에 숫자로 구성된 배열을 인자로 넘겨드립니다.
100 보다 크거나 같으면, true를 
100 보다 작으면 false로 요소를 변경하여 
새로운 배열을 return해주세요.
 
const moreThan100 = nums => {
  let newArr = nums.map(n => {
    if (n >= 100) {
      return true;
    } return false;
  })
  return newArr;
}

.Array.forEach: for문 대신 사용하는 반복 method으로 map과 다르게 return하는 것이 없다.

🌮 literal template

sting 안에 변수를 삽입할 때 사용한다. literal template는 backtic(`) 문자로 감싸인 형태로 쓰이며, 그 안에 변수를 삽입할 때는 ${ } 형태를 쓴다. 작은 따옴표('')/큰 따옴표("")의 구분이 없으며, 별도의 연산자 없이 간단하게 문자열을 삽입할 수 있다. 가장 큰 장점으로는 코드의 가독성이 좋다는 것이다.

const myPet = 'armadillo';
console.log(`I own a pet ${myPet}.`);

›I own a pet armadillo.

작은 따옴표('')/큰 따옴표("")로 감싼 string의 줄바꿈을 하려면 \n으로 바꿔줘야 한다. 하지만 literal template은 string을 입력한대로 줄바꿈이 된다.

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

let detail = `자세히 
보아야
이쁘다

. literal template
내코드..`;
console.log(detail);

🍹 string method

그동안 string에서 특정 string을 찾기 위해서는 indexOf를 사용했었지만 이제는 새로운 3가지의 method가 생겼다. 이 method를 사용했하면 특정 문자열이 있을때는 true, 아닐때는 false를 나타낸다.

. startsWith
. endsWith
. includes

const email = 'https://velog.io';

console.log(email.startsWith('ht'));
console.log(email.endsWith('.io'));
console.log(email.includes('://'));

›true
›true
›true