最近業務でReactを使用しているが、Jsの基本がわかっていなかったため、コードリーディングに苦労しました。
この記事では、Reactを解読する上で欠かせないJsの構文をまとめたので、よかったら参考にしていただけると幸いです。
分割代入(オブジェクトや配列から値を抽出するためのもの)
オブジェクト(↓name: '桃太郎'のようなプロパティからなる変数を「オブジェクト」という。)
const person = {
name: '桃太郎',
age: 13,
birth_place: " Japan"
}
const { name, age, birth_place } = person
console.log(name) => 桃太郎
console.log(age) => 13
console.log(birth_place) => Japan
配列（[]で括り、中に数字や文字列を書き、「,」でつなげたもの）
const array = [ "田中", 21, "北海道" ]
const [ name, age, birth ] = array
console.log(name) => 田中
console.log(age) => 21
console.log(birth) => 北海道
スプレッド構文（配列の要素を展開するためのもの）
const array1 = [ 10, 20, 30, 40, 50 ]
console.log(...array1) => 10 20 30 40 50
スプレッド構文は、配列の要素をまとめて使用することもできる。
const array1 = [ 10, 20, 30, 40, 50 ]
const [ num1, num2, ...array2 ] = array1
console.log(num1) => 10
console.log(num2) => 20
console.log(...array2) => 30 40 50
console.log(array2) => [ 30, 40, 50 ]
論理演算子（&&,||）
| |は、その左側がfalseなら右側を返す。
const judge1 = true
const judge2 = false
if (judge1 || judge2) {
console.log("judgeのどっちかはtrueだよ。")
}
=> judgeのどっちかはtrueだよ。
if (judge1 && judge2) {
console.log("judgeのどちらもtrueだよ。")
}
=> undefined
const money = undefined
const pay = money || "お金はないのかな？？"
console.log(pay)
=> お金はないのかな？？
const money = 1000
const pay = money || "お金はないのかな？？"
console.log(pay)
=> 100
&&は、その左側がtrueなら右側を返す。
const money = 500
const pay = money && "お金じゃん!!"
console.log(pay)
=> お金じゃん!!
三項演算子( 条件 ? “trueのとき実行” : “falseのとき実行” )
const num = 5 > 10 ? "大きいやん。" : "小さいやん。"
console.log(num) => 小さいやん。
今回紹介したJsの構文はReactでたくさん使用しているので、よかったら参考に。