要素を足す・取り除く
このレッスンで分かること
pushで末尾に足し、popで末尾から取り除けますunshiftで先頭に足し、shiftで先頭から取り除けますpushが返すのは配列ではなく、追加後の要素数です
作ったあとに、中身を差し替えたい
前のレッスンで、作品を 1 つの配列にまとめました。ですがプロフィールサイトは作って終わりではありません。新しい作品ができれば足したいですし、公開をやめた作品は取り除きたい。配列は、作ったあとから中身を変えられる入れ物です。そのための道具が次の 4 つです。
| メソッド | 何をするか | 戻り値 |
|---|---|---|
push | 末尾に足す | 追加後の要素数 |
pop | 末尾から取り除く | 取り除いた要素 |
unshift | 先頭に足す | 追加後の要素数 |
shift | 先頭から取り除く | 取り除いた要素 |
名前が 4 つ出てくると混乱しますが、覚えかたは単純です。push と pop は末尾、unshift と shift は先頭。そして push と unshift が足す側、pop と shift が取り除く側です。
JavaScript
const works = ["プロフィールサイト", "自己紹介カード"];
works.push("スキル一覧の表");
console.log(works.length); // => 3
const removed = works.pop();
console.log(removed); // => スキル一覧の表
console.log(works.length); // => 2取り除く側は、取り除いた要素そのものを返すので、受け取ってすぐ使えます。空配列に pop や shift を呼んでもエラーにはならず、undefined が返るだけです。配列は空のままです。
push が返すのは配列ではない
ここが今回いちばんの引っかかりどころです。push の戻り値は、追加したあとの要素数です。配列そのものではありません。
JavaScript
const works = ["プロフィールサイト"];
const result = works.push("自己紹介カード");
console.log(result); // => 2 (配列ではなく数値)
console.log(works); // => ["プロフィールサイト", "自己紹介カード"]push は works という配列そのものを直接書き換えます。ですから戻り値を受け取る必要はなく、works をそのまま使えばよいのです。return works.push(値) と書いてしまうと、関数が数値を返してしまい、配列を期待するテストは通りません。足したあとで、配列そのものを返してください。
「メソッドを呼んだ結果をそのまま返す」書きかたは多くの場面で正解なので、つい
returnとひと続きに書いてしまいます。配列を書き換える系のメソッドは、書き換えたあとの配列ではなく別の値を返すものが多い、と覚えておいてください。
先頭を取り除くと、残りが 1 つずつ前へ詰まる
先頭側の操作も見ておきます。unshift は先頭に足し、もとからあった要素は 1 つずつうしろへずれます。shift は先頭を取り除き、残りが 1 つずつ前へ詰まります。
JavaScript
const works = ["旧トップページ", "プロフィールサイト", "自己紹介カード"];
const removed = works.shift();
console.log(removed); // => 旧トップページ
console.log(works[0]); // => プロフィールサイト4 つとも、呼んだ時点で works の中身がもう変わっています。どちらを使うかは「新しいものをどこに置きたいか」で決めます。古い順に並べたいなら新作は末尾へ、新しいものを一番上に出したいなら先頭へ。表示の順番から逆算して選んでください。
よくある間違い
- カッコを忘れる —
works.popと書くと関数そのものを取り出しただけで、何も取り除かれません。メソッドは必ず()を付けて呼びます popとshiftを取り違える —popは末尾、shiftは先頭です。名前から向きが読み取りにくいので、迷ったら表を見返してください
要件
- 関数名は
updateWorkList、引数は配列worksと文字列newTitleの 2 つ、戻り値は配列 - 先頭の要素を
shiftで取り除いてから、newTitleをpushで末尾に足すこと return works.push(newTitle)と書かないこと (pushの戻り値は数値なので配列にならない)
入出力例
updateWorkList([], "プロフィールサイト") → ["プロフィールサイト"]
updateWorkList(["下書き"], "プロフィールサイト") → ["プロフィールサイト"]
updateWorkList(["下書き","自己紹介カード"], "スキル一覧の表") → ["自己紹介カード","スキル一覧の表"]
updateWorkList(["下書き","プロフィールサイト","自己紹介カード"], "スキル一覧の表") → ["プロフィールサイト","自己紹介カード","スキル一覧の表"]ヒント
