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

재훈이가 겪은 문제를 해결하면서, 카페 모카(mocha) 와 바닐라 라떼(vanillaLatte) 레시피도 만들어 주세요.
모카는 에스프레소에 우유와 초코 시럽을, 바닐라 라떼는 에스프레소에, 우유와 바닐라 시럽을 더한 메뉴입니다.

코드를 잘 작성하셨다면 다음과 같은 결과가 출력되어야 합니다.

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