JavaScript練習問題

JavaScriptの練習問題を自分なりの解釈を加えながら解いていこうと思います。

問題

var items = [
  { name: 'じゃがいも', price: 50, count: 3 },
  { name: 'にんじん', price: 60, count: 1 },
  { name: '豚肉', price: 200, count: 1 },
  { name: '玉ねぎ', price: 50, count: 2 }
];

// targetPriceより小計の高額な商品を出力
function higherPrice (targetPrice) {
  // ここにソースコードを追記しましょう
}

higherPrice(120);

変数itemsは商品の金額と個数を表しています。
関数higherPriceを編集し、商品ごとの小計（単価 * 個数）が引数targetPriceを超えたものの名前をコンソールに出力するようにしてください。

回答

var items = [
  { name: 'じゃがいも', price: 50, count: 3 },
  { name: 'にんじん', price: 60, count: 1 },
  { name: '豚肉', price: 200, count: 1 },
  { name: '玉ねぎ', price: 50, count: 2 }
];

// targetPriceより小計の高額な商品を出力
function higherPrice (targetPrice) {
  for (var i = 0; i < items.length; i++) {
    if (items[i].price * items[i].count > targetPrice) {
      console.log(items[i].name);    
    }
  }
}

higherPrice(120);

考え方

1.targetPriceとitemsそれぞれを比べて値段が高いかを比べる必要があるため、まずはitemsの値をそれぞれ取得する処理を書きます。

function higherPrice (targetPrice) { 
//higherPriceという関数名を宣言しtargetPrice（この場合は１２０）を渡している。
  for (var i = 0; i < items.length; i++){
//varという変数に０を渡して、配列itemsの要素の数をlengthで取得しその数よりiが大きくなるまでこの処理を繰り返す。
//今回は配列itemsの要素は４つなので、処理が4回繰り返される。
//i++はiに処理が終わったのち１を足すという意味で、この場合i=0から始まり、i=3になるまで繰り返される。

    console.log(items[i].price * items[i].count);
//i番目のitemsのprice（単価）と、i番目のitemsのcount(個数)をかけた金額と比べるため、その値を取得する。
}

２.上記処理でitemsの要素それぞれの小計（単価 * 個数）を取得することができたので、あとはそれがtargetPriceより大きい場合だけコンソールに出力するという条件を書いてあげればいいわけですね。

function higherPrice (targetPrice) {
  for (var i = 0; i < items.length; i++) {
    if (items[i].price * items[i].count > targetPrice) {
//if文の条件式の部分に、小計（単価 *　個数)がtargetPriceより大きい場合と記載する。
      console.log(items[i].name);    
//条件に当てはまる時にどんな処理をしたいかをここに書く。
//問題はtargetPriceより大きい場合には、その名前をコンソールに出力しなさいと記載されている
//そのため、条件式に対しtrueのi個目の名前をコンソールに出力する処理を記載している。
    }
  }
}

こんな感じで、まずどんな処理を繰り返したいのかを考えた後にどんな条件かを考えるとわかりやすいと思います。

まとめ

簡単な問題ですが、コードを作るときの考え方を記載しました。
この考え方は難しい問題でも使えると思うので慣れないうちは一つ一つの処理を解決していってそれを最後に合わせるってイメージを持つと良いと思います。