TIL] JavaScript-ES6 syntax

🍭 ES 6文法办公!

🥞 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 functionがcallback 함수(パラメータを伝達する関数)として使用される場合は가장 많이 사용である.arrowメソッドを活用するために、arrayメソッドを簡単にご紹介します.
.Array.map():mapメソッドは、コールバック関数で返される値で各要素を変更する배열을 반복です.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.

작은 따옴표('')/큰 따옴표("")で包まれたロープの줄바꿈を作るには、\nに変えなければなりません.しかし、literal templateは文字列を입력한대로 줄바꿈に変えた.

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

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

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

🍹 string method

従来,stringで特定のstringを検索するためにindexOfを用いていたが,現在では3つの新しい方法がある.この方法を使用すると、特定の文字列がある場合は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

特定の文字列を繰り返す場合はrepeat関数を使用します.

'#'.repeat(3);

›'###'

JavaScript開発者として必要なES 6構文top 10

Default Parameters in ES6

Template Literals in ES6

Multi-line Strings in ES6

Destructuring Assignment in ES6

Enhanced Object Literals in ES6

Arrow Functions in ES6

Promises in ES6

Block-Scoped Constructs Let and Const

Classes in ES6

モジュールES 6+import/exportにおける意味

[ソース]-JavaScript開発者の場合は、ES 6構文TOP 10を理解する必要があります.