값에 의한 전달 vs 참조에 의한 전달

Dorogono·2022년 4월 28일
0

JS 알아보기

목록 보기
5/19
post-thumbnail

값에 의한 전달이란.

let score = 80;
let copy = score;

console.log(copy); // 80

전에 쓴 글인 호이스팅에서도 언급했듯이, 변수명은 메모리 주소 이름이다.

그렇다면, score와 copy서로 다른 주소값을 갖고 있다는 걸 알 수 있다.

let score = 80;
let copy = score;
score = 100;

console.log(copy); // 80
console.log(score); // 100
  • 코드를 보면, score 값이 바뀐다고 하더라도 copy 값에 영향을 주지 않는다는 걸 알 수 있다.
  • 이유는 위에서도 말했지만, 서로 다른 주소값을 갖고 있기 때문이다.

참조에 의한 전달이란.

객체(Object)를 전달하는 걸 뜻한다.

let person = {
  name: 'Lee'
};
// 얕은 복사 (참조값만 복사)
let copy = person;

copyperson은 같은 걸 알 수 있다.

이유를 설명하기에 앞서, 얕은 복사를 이해해야 한다.

  1. 얕은 복사란, 객체를 가리키고 있는 주소 참조값만 가져온다.
  2. 객체에 값을 추가하거나, 변화를 주면 해당 객체를 참조하고 있는 변수를 출력하면 변화된 값을 출력한다.

이와는 반대로, 깊은 복사가 존재한다.
이는 위에서 설명한 것과는 다르게 객체가 갖고 있는 주소가 있고, 복사된 객체가 갖고 있는 주소가 따로 또 존재한다.
JSON.stringify() & JSON.parse()가 하나의 방법이 된다.

메모리 주소 상태(얕은 복사)

  1. 객체가 갖고 있는 주소.
  2. person이 갖고 있는 주소 : 1번 주소를 가리킴.
  3. copy가 갖고 있는 주소 : person을 복사해서, 똑같이 1번 주소를 가리킴.
profile
3D를 좋아하는 FE 개발자입니다.

3개의 댓글

comment-user-thumbnail
2022년 4월 28일

값을 복사할때 다시한번 유념해 사용해야하는것을 깨닫고 갑니다.
깊은 복사 JSON.stringify() & JSON.parse() 언급 해주셨는데 예재 코드가 같이 있으면 더 좋을거 같습니다 .😃😃😃😃

답글 달기
comment-user-thumbnail
2022년 4월 28일

얕은 복사와 깊은 복사! 중요한 개념이네요. 유의해서 사용할 수 있도록 해야겠습니다. 잘 봤습니다~

답글 달기
comment-user-thumbnail
2022년 4월 28일

객체를 사용할 때 정말 유의해야 하는 부분이죠! 특히 원본 배열을 바꾸는 메서드들을 사용할 때 이 부분을 이해하지 못하면 정말 혼란스러울 것 같습니다. JSON.stringify()와 JSON.parse()는 형 변환 이외에도 깊은 복사에 쓰이는 부분도 재밌네요 ㅎㅎ

답글 달기