JavaScriptリファレンス

インターンシップタスク
ジェフンは最近コーヒーの勉強に夢中です.
エスプレッソベースのコーヒーレシピを学びました
アメニティは水入りの濃縮コーヒー、カフェラテは牛乳入りの濃縮コーヒーです.
そこで,このフォーミュラを配列に整理するためのコードを作成した.

let espresso = ['espresso'];

let americano = espresso;
americano.push('water');

let caffeLatte = espresso;
caffeLatte.push('milk');

// 테스트 코드
console.log(espresso);
console.log(americano);
console.log(caffeLatte);

私はすでに効率的にコードを書いたと思っていましたが、実際にコードを実行した後、奇妙な結果を発見しました.

[ 'espresso', 'water', 'milk' ]
[ 'espresso', 'water', 'milk' ]
[ 'espresso', 'water', 'milk' ]

在勲が経験した問題を解決するとともに、コーヒーモカやバニララテのレシピも作る.
モカは濃縮コーヒーにミルクとチョコレートシロップ、バニララテは濃縮コーヒーにミルクとバニラシロップを加えたメニューです.
コードがうまく記述されている場合は、次の結果を出力する必要があります.

[ 'espresso' ]
[ 'espresso', 'water' ]
[ 'espresso', 'milk' ]
[ 'espresso', 'milk', 'chocolateSyrup' ]
[ 'espresso', 'milk', 'vanillaSyrup' ]

▼▼課題解説

オブジェクトと配列は、変数に割り当てられたときに直接格納される値ではなく、アドレス値を格納する「参照タイプ」(Reference Type)である.
したがって、オブジェクトまたは配列に割り当てられた変数を別の変数に割り当てると、同じ値が表示され、いずれかの変数を変更すると、別の変数も変更されます.
したがって,ジェフンがコードを書くのは効率的であるが,変数espresso,americano,caffeLatteともに同じアドレス値を持つため,予想外の結果を出力した.
配列については,この場合を解決するためにslice法を用いて簡単に解決できる.
sliceメソッドを呼び出すと、パラメータに値が渡されない場合は、メソッドのフィーチャーを使用して配列全体を直接返すことができます.

let espresso = ['espresso'];

let americano = espresso.slice();
americano.push('water');

let caffeLatte = espresso.slice();
caffeLatte.push('milk');

// 테스트 코드
console.log(espresso);
console.log(americano);
console.log(caffeLatte);

espresso値をコピーしようとすると、sliceメソッドを呼び出す値を指定するだけです.

[ 'espresso' ]
[ 'espresso', 'water' ]
[ 'espresso', 'milk' ]

コードを実行すると、必要な結果が良好に出力されることを確認できます.
そしてここでモカコーヒーとバニラカフェラテのレシピをもっと作ります
カフェモカもバニラカフェラテもエスプレッソと牛乳がありますが、カフェラテをコピーすればいいんですよね?
(モカ:エスプレッソ+ミルク+チョコレートシロップ/バニララテ:エスプレッソ+ミルク+バニラシロップ)

// 아래 코드중 잘못된 부분을 수정해 주세요.
let espresso = ['espresso'];

let americano = espresso.slice();
americano.push('water');

let caffeLatte = espresso.slice();
caffeLatte.push('milk');

// 여기에 caffeMocha와 vanillaLatte 레시피를 만들어 주세요.
let caffeMocha = caffeLatte.slice();
caffeMocha.push('chocolateSyrup');

let vanillaLatte = caffeLatte.slice();
vanillaLatte.push('vanillaSyrup');

// 테스트 코드
console.log(espresso);
console.log(americano);
console.log(caffeLatte);
console.log(caffeMocha);
console.log(vanillaLatte);

[ 'espresso' ]
[ 'espresso', 'water' ]
[ 'espresso', 'milk' ]
[ 'espresso', 'milk', 'chocolatesyrup' ]
[ 'espresso', 'milk', 'vanillasyrup' ]