🐥

あなたの知っているJavaScriptはもう古い(書き方編 -その3- )

2022/08/06に公開

JavaScript

React

Vue.js

tech

おさらい

その１，その２で新しいJavaScriptの書き方について学んできました。
今回は最終回となるその３です。

オブジェクトの省略方法

オブジェクトのプロパティ名と設定する変数が同じ場合、省略することができます。


const name = "タロウ";
const age = 20;

// userオブジェクト
const userObject = {
    name: name.
    age: age,
}

userObject // { name: "タロウ", age: 20 }のようなオブジェクトになる

// こんな感じでかけばプロパティ名を省略できる
// userオブジェクト
const userObject = {
    name,
    age,
}

userObject // { name: "タロウ", age: 20 }のようなオブジェクトになる

map, filter

Ruby on Railsではお馴染みですが、これらもJavaScriptで使えます。
昔は配列に対して、for文でまわしてこんな感じで処理を書いていたかとおもいます。


var animal = ["トラ", "ねこ", "いぬ"]

for (var index = 0; index < animal.length; index++) {
    animal[index]; // とら、ねこ、いぬが順番にとりだせる
}

いちいちindexで要素の何番目というかたちで処理をしていったかと思います。

そこで、mapをつかうことで簡単に配列に対して処理ができます。
mapは配列を順番に処理していって、処理した結果を返します
配列.map()といった形で使用して、中身はアロー演算子で処理します。

const animal = ["トラ", "ねこ", "いぬ"]

// mapでの処理
const animal_copy = animal.map( (name) => {
    return name;
});

animal_copy; // ["トラ", "ねこ", "いぬ"]



const numbers = [10, 20, 30];

// mapでの処理で二倍すれば二倍したものが返さえる
const double_numbers = numbers.map( (number) => {
    return number * 2;
});

double_numbers; // [20, 40, 60]

mapではすべての要素に対して処理をしましたが、fileterで条件に合うものだけが処理されて返却されます。

const numbers = [1, 2, 3, 4, 5];

// 偶数のみを取り出す
const even_numbers = numbers.filter( (number) => {
    // 偶数は2で割り切れる
    return number % 2 === 0;
});

even_numbers; // [2, 4]

まとめ

全３回でモダンなJavaScriptの書き方を学んできましたが、圧倒的に便利にかけるようになっている、、、！！（歓喜）
昔はこんな書き方でめんどくさかったなー（特に私はの場合はfor文とか、、、）っていう印象が強かったんですが、これはES2015を使うしかない！！どんどんJavaScriptを書くしかない！！ってことでこれからはReact書いていきます！

おさらい

オブジェクトの省略方法

map, filter

まとめ

Discussion