JavaScript ショートハンド(短絡記法)

20220329

JavaScript

t f B! P L

プログラミング

ショートハンド

短縮記法のこと。
コードの行数が減ってすっきりする、読みやすくなる。
レビューも楽になる。バグも減る(わかりやすくなるから)。

三項演算子

const x = 1;
const y = 10;
let answer;
if (x > y) {
    answer = 'is greater';
} else {
    answer = 'is lesser';
}
console.log(answer); //is lesser

↓ショートハンド

const x = 1;
const y = 10;
const answer = x > y ? 'is greater' : 'is lesser'
console.log(answer); //is lesser

条件式 ? trueの場合の結果 : falseの場合の結果
と書ける。
if-elseくらいの条件文であれば、見やすい。それ以上だと見づらくなる。

短絡評価

const x = 'test';
let y;
if (x !== null || x !== undefined || x !== '') {
     y = x;
}else{
  y = 'new';
}
console.log(y); //test

↓ショートハンド

const x = 'test';
const y = x || 'new';
console.log(y); //test

falseの場合、右に処理が移行する。trueの場合は、そのまま左の処理が行われる。
※プリミティブ型がfalseになるのは、false、0、NaN、''(=空文字)、null、undefinedの場合。それ以外はtrueとなる。

そのため、以下のようにifの条件式は、xと書くだけで良い。

const x = '';
let y;
if (x) {
     y = x;
}else{
  y = 'new';
}
console.log(y); //new

変数宣言

let x;
let y;
let z = 3;

console.log(x); //undefined
console.log(y); //undefined
console.log(z); //3

↓ショートハンド

let x,y,z=3;

console.log(x); //undefined
console.log(y); //undefined
console.log(z); //3

並べて一行で宣言できる。

forループ

const numberArray = [1,2,3]
for (let i = 0; i < numberArray.length; i++){
  console.log(numberArray[i]); //1 2 3
}


ショートハンド1

const numberArray = [1,2,3]

for(i in numberArray){
 console.log(numberArray[i]); //1 2 3
}

ショートハンド2

const numberArray = [1,2,3]

numberArray.forEach((element) => {
 console.log(element); //1 2 3
});

ショートハンド3

numberArray.map((element)=>{
 console.log(element); //1 2 3
});

ショートハンド4

numberArray.filter((element)=>{
 console.log(element); //1 2 3
});

ショートハンド5

numberArray.find((element)=>{
 console.log(element); //1 2 3
});

ショートハンド6

const numberArray = [1,2,3]

numberArray.findIndex((element)=>{
 console.log(element); //1 2 3
});

ショートハンド7

const numberArray = [1,2,3]

numberArray.some((element)=>{
 console.log(element); //1 2 3
});

ショートハンド3~7は、この場合同じ結果になるが、厳密には使い分けが必要。
forEach:配列内の各要素に対して昇順で、1回ずつ実行する。
map:配列の順番通りに各要素に対して一度ずつ呼び出し新しい配列を生成する
filter:条件に合う(trueを返す)要素全てを抽出し、新しい配列を生成する
find:ある条件に合う最初の要素の値を返す。
findIndex:ある条件に合う最初の要素の位置を返す。
some:配列が条件を一つでも満たしていればtrueを返す。
※every:配列が条件をすべて満たす場合にtrueを返す。

オブジェクトプロパティ

const key = 'key1';
const aaa = 789;
const obj1 = { [key]: 123 ,key2: 456, aaa: aaa};
console.log(obj1); // { key1: 123, key2: 456, aaa: 789 }

↓ショートハンド

const key1 = 123;
const key2 = 456;
const aaa = 789;
const obj1 = { key1, key2, aaa };
console.log(obj1); // { key1: 123, key2: 456, aaa: 789 }

変数名がキー、値がバリューで
{ キー }とかくと、{ キー:バリュー }となる。

分割代入

const n = 1;
const m = 2;
console.log(n, m); // 1 2
const obj = { name: 'Gorosuke', age: 8 };
const name = obj.name;
const age = obj.age;
console.log(name, age); // "Gorosuke" 8

↓ショートハンド

const [n, m] = [1, 2];
console.log(n, m); // 1 2
const obj = { name: 'Gorosuke', age: 8 };
const { name, age } = obj
console.log(name, age); // "Gorosuke" 8

便利、すっきりしたコードになる。

apiを呼んだとき等

const response = {
data: [
{
id: 1,
name: 'aichan',
email: 'aichan@aaa.com',
},
{
id: 2,
name: 'gorosuke',
email: 'gorosuke@bbb.com',
},
],
};
const { data: users = [] } = response;

console.log(users);
// [ 
//   { id: 1, name: "aichan", email: "aichan@aaa.com" },
//   { id: 2, name: "gorosuke", email: "gorosuke@bbb.com" } 
// ]

キーがdataで、同じなので、usersに分割代入してくれる!

スプレッド構文

const nums1 = [4, 5, 6];
const nums2 = [1, 2, 3].concat(nums1);
console.log(nums2); //[1, 2, 3, 4, 5, 6]

↓ショートハンド

const nums1 = [4, 5, 6];
const nums2 = [1, 2, 3, ...nums1];
console.log(nums2); //[1, 2, 3, 4, 5, 6]

関数のレストパラメータ... = 配列のスプレッド構文...

分割代入と組み合わせる

const response = {
id: 1,
name: 'aichan',
email: 'aichan@aaa.com',
};
const id = response.id;
const name = response.name;
const email = response.email;
const users = { name, email }
console.log(id,users);
// 1 { name: "aichan", email: "aichan@aaa.com" }

↓ショートハンド

const response = {
id: 1,
name: 'aichan',
email: 'aichan@aaa.com',
};
const { id, ...users } = response;

console.log(id,users);
// 1 { name: "aichan", email: "aichan@aaa.com" }

必須パラメータ

const testfunc = (argument) => {
  if(argument === undefined) {
    throw new Error('Missing parameter!');
  }
  return argument;
}
console.log(testfunc("test")) //test
console.log(testfunc()) //Error: Missing parameter!

↓ショートハンド

const argufunc = () => { throw new Error('Missing parameter!') };

const testfunc = (argument = argufunc()) => argument ;
console.log(testfunc("test")) //test
console.log(testfunc()) //Error: Missing parameter!

デフォルト引数と組み合わせると、すっきりかける。

このブログについて

技術的に悩んだこと、やってみたことを書き溜めています。自身の復習のため、また同じ悩みがある方は参考にできるような書き方にしていきます。 趣味の競馬AI開発と競馬AIでの予想も公開していきます。 金曜日に土曜日の中央競馬(JRA)全レース予想、土曜日に日曜日の中央競馬(JRA)全レース予想を公開する予定です。

Tags

Golang (1) JavaScript (9) python (2) 機械学習 (5) 競馬 (138) 副業 (2)

注目の投稿

2022/10/02(日) 無料 競馬AI 予想 中山競馬場

このブログを検索

アーカイブ

投稿者情報

はじめまして。あいちゃんです。雑魚エンジニアです。趣味で機械学習をやっています。日々の勉強としてアウトプットしていきます。

QooQ