🐙

Reactのコードを読む時に脳内変換する省略記法

2022/10/19に公開約600字

jsの省略記法はタイピングには優しいが脳には優しくない。

Reactでよく目にする省略記法
●その1
プロパティ名と変数名が一致しているときの省略記法
●その2
複製後要素を展開する省略記法 スプレッド演算子...

const sampleObj = {
  id: 15,
  name: "佐藤",
  age: 20,
  hobby: "baseball" 
}

const changeHobby = (sampleObj, hobby) => {
  const newObj = {
    ...sampleObj, //複製後要素を展開する省略記法
    hobby //省略記法を戻すと hobby: hobby
  }
  return newObj
}
console.log(changeHobby(sampleObj, "soccer"))
{ id: 15, name: '佐藤', age: 20, hobby: 'soccer' }

簡易例

const name = "田中";
const age = 24;
//オブジェクトdict生成
const obj = { 
  name, //省略記法を戻すと name: name
  age  //省略記法を戻すと age: age
};
console.log(obj); 
{ name: '田中', age: 24 }

その3...作成途中

Discussion

ログインするとコメントできます