커피 메뉴 레시피를 만들기 ▼

해당 레시피는 에스프레소 기반으로하였다.

아메리카노 = 에스프레소 + 물
카페라떼 = 에스프레소 +우유를

해당 레시피를 배열로 코드 작성 ▼

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' ]

이러한 문제를 해결하면서, 카페 모카 와 바닐라 라떼 레시피도 생성한다. 3. 카페 모카 = 에스프레소 + 우유 + 초코 시럽

바닐라 라떼 = 에스프레소 + 우유 +바닐라 시럽

실습 결과

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

// 잘못된 부분을 수정하기 ▼
let espresso = ['espresso'];

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

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

// caffeMocha와 vanillaLatte 생성하기 ▼

//-----------------------------
console.log(espresso);
console.log(americano);
console.log(caffeLatte);
console.log(caffeMocha);
console.log(vanillaLatte);

결과 코드

// 잘못된 부분을 수정하기 ▼
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);

객체와 배열은 변수에 할당할 때 해당 값이 직접 저장되는 것이 아니라, 주소 값이 저장이 되는 참조형(Reference Type)이다.

그렇기 때문에 객체나 배열이 할당된 변수를 다른 변수에 할당하게 되면 서로 같은 값을 바라보게 돼서 한쪽을 수정하면, 다른 한쪽도 수정되는 현상이 발생한다.