【React入門】押さえておきたいJavaScriptの記法10選

// main.jsファイル
// importで、module.jsファイルの内容を取得できる
import { hello } from "./module.js";
hello();

// module.jsファイル
// exportで、ファイルのどこからでも取得できるようにしている
export const hello = () => {
  console.log("hello!");
};

// 配列を用意
const items = [ 1, 2, 3, 4, 5 ];

// mapメソッド
// itemに配列の始めから終わりまでの値が入ってくる
const newItems1 = items.map((item) => item * 2);
console.log(newItems1);

// 出力結果：[ 2, 4, 6, 8, 10 ]

// filterメソッド
// 条件に合うものをフィルタリングする
const newItems2 = items.filter((item) => item < 3);
console.log(newItems2);

// 出力結果：[ 1, 2 ]

// オブジェクトを用意
const person = { name: "Teru", age: 20, city: "Tokyo" };

// 各要素を変数として抽出する
const func = ({ name, age, city }) => {
  console.log(`name: ${name}`);
  console.log(`age: ${age}`);
  console.log(`city: ${city}`);
};

func(person);

// 出力結果："name: Teru", "age: 20", "city: Tokyo"

// 配列を用意
const items = [1, 2, 3];

// 配列をコピーして新しい配列を生成
const newItems = [...items];

// newItemsの0番目の値に0を代入
newItems[0] = 0;

console.log(items);
console.log(newItems);

// 出力結果：[1,2,3], [0,2,3]

// 変数を用意
const item = 0;

// 条件式 ? trueの場合 : falseの場合
const getResult = () => {
  return item === 0 ? "true" : "false";
}

console.log(getResult());

// 出力結果： "true"

// 変数を用意
const item = 0;

// &&演算
// 条件式 && trueの場合
const getResult1 = () => {
  return item === 0 && "true";
}

console.log(getResult1());

// 出力結果： "true"

// ||演算
// 条件式 || falseの場合
const getResult2 = () => { 
  return item === 1 || "false";
}

console.log(getResult2());

// 出力結果： "false"

// 変数を用意
let a = 0;

// async/await (非同期処理をする際に記述するもの)
async function init() {
  // try(正常に読み込めた場合) / catch（正常に読み込めなかった場合）
  try {
    // resolve（正常に読み込めた場合のコールバック関数） / reject（処理が失敗した時に呼ばれるコールバック関数）
    const result = await new Promise((resolve, reject) => {
      a = 1;
      reject(a);
    });
    console.log(result);
  } catch (e) {
    console.log("エラー発生", e);
  }
}

init();

// 出力結果： "エラー発生" 1