1.ES 6とは?

フロントエンド開発者として知らないわけにはいかない機能がたくさんあります.

ECMAとは、国際組織が作成した標準文書ECMAScript(=ES)第6改訂版文書における標準規格のこと.

2015年に発売されたES 6が他のESシリーズよりも人気が高いのは、この時のJavaScriptが現在代表的な機能(矢印関数、const、letなど)を多く持っているからである.

ES 6以前の文法は淘汰された感じがあり、個人的にはES 6はjavascript標準的な感じがします.

2.ES 6機能

1) Ternary Operator

条件がtrue/falseの場合使用

조건 ? true일 때 코드 : false일 때 코드

2) Destructing

構造分解配分と呼ばれ、変数を宣言すると同時に配列や対象値を直接配分できる方法です.

①配列

const array = [1, 2, 3]
const [a, b, c] = array
// a, b, c는 각각 변수로서 a에는 1이 담기고 b에는 2가 담기고 c에는 3이 담김

②対象

const object = {
	name: "Choi",
    age: 26,
    gender: "male"
}

const {name, age, gender} = object
// name에는 "Choi"가 담기고 age는 26이 담기고 gender에는 "male"이 담긴다.
// name 변수를 선언함과 동시에 값이 할당된 것이다.

const {name: myName, age: myAge, gender: myGender} = object
// 물론 key의 이름에 종속되지 않고 변수명을 바꿔서 할당할 수도 있음

配列は必要な変数名として指定できますが、オブジェクトの場合は通常keyの名前を変数として使用します.

もちろん変数名を変えて割り当てることもできます.

③関数

関数の因子がオブジェクトの場合はパラメータでも使用できます.

const param = {
	name: "Choi",
    age: "26",
    gender: "male"
}

const getUserInfo = ({name, age, gender}) => {}

getUserInfo(param)

3）矢印関数

1行のコードを関数の書き方で書けばきれいな関数が書けるので良い

const function = (parameter1, parameter2) => {}

4) const let

ES 6以前に使用されていた変数宣言タイプvarハウスティン、Block Scope無視、定数変数概念の存在しないなどの安定性の問題を解決する変数タイプである.

constは定数、let暗黙変数として機能する.

5) Default Parameter

関数のパラメータが必要でない場合は、デフォルト値を指定できます.

もちろん、因子がデフォルト値と異なる値を超えている場合はその値を参照する.

const getUserInfo = (name, age, gender="male") => {}

getUserInfo("Choi", 26)
// gender는 male이 된다.

getUserInfo("Choi", 26, female)
// gender는 female이 된다.

6) Rest Parameter

パラメータが多すぎると因子全体を一つのパラメータ配列として受信する方法.

const getUserInfo = (...userInfo) => {
	console.log(userInfo);
    // ["Choi", 26, male, cool, nice, rich]
}
const getUserInfo=(name, age, ...userInfo)=>{
	console.log(userInfo);
    // [male, cool, nice, rich]
}

getUserInfo("Choi", 26, male, cool, nice, rich)

普通のパラメータで取得したい人は、2番目の関数のように書くことができます.

ただし、restパラメータはパラメータの最後にしなければならない.

7）ショートヘア

オブジェクトのkeyとvalueの名前が同じであれば、省略して使用できます.

const name = "Choi"
const age = 26
const gender = male

const userInfo={
	name: name,
    age: age,
    gender: gender
}
를 축약해서

const userInfo={
	name,
    age,
    gender
}
로 사용가능하다.

8) Spread Operator

配列または対象内の内容を羅列する.

複数の配列を解き、1つの配列に再結合する機能を多く使う(concatの機能のように).

また配列を複製する際、物を添付する場合やソファーで使用する場合も多い.

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]

const newArray = [...array1, ...array2]

console.log(newArray)
// [1, 2, 3, 4, 5, 6]

9)逆文字列

変数と文字を混ぜて使用する場合、簡単に記入できます.

const name = "Choi"

const oldVer = "Hi" + name + "is here"
const newVer = `Hi ${name} is here

3. ES11

1) Optional Chaining

反応でよく使われる機能.

SPAの特性はフローデータを含むstateを利用しており、レンダリング時にデータ交換の時間内にstateが空になるとエラーが発生する.このときstateにデータをロードし、エラーが発生しない待機に使用します.

主に対象に使われていますが、この値ですか?もしあったら、これを見つけてください.もしこの値段があれば、そうしましょう

const data = {
	userInfo: {
    	name: "Choi"
    }
}

console.log(data?.userInfo?.name)

2)falseを判断する演算子

①|演算子

null、未定義、0、「」、falseはfalseと認識する.

② ?? 演算子

0と「」を除きnull、undefined、falseをfalseと認識する.

4.その他

ES7 : async / await

コールバック関数低値

5.考え方

最近習ったJavaScriptですが、もちろんこれらの機能は知っていますが、新機能です.

本当に、いい時に勉強を始めたんだな、という思いは忘れられませんが、今使っている全ての技術が役に立ちます.

2015年は高校3年生ですが、私が未成年の頃に開発した人は一体どんな戦いをしていたのでしょうか…