패스트캠퍼스 환급챌린지 17일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250717(목) 17일차

문법 - 참조와 복사

 

복사

let a = 10;
let b = a;
b = 20;

복사는 독립적인 복제

기본형 데이터는 복사 된다.

a와 b는 처음엔 같은 값을 갖지만, 이후엔 서로 전혀 상관없는 독립된 값으로 동작한다

 

어떤 값들이 복사되는가

기본형 데이터 타입들은 모두 값이 복사된다 - 숫자, 문자열, boolean, null, undefined

어떤 상황에서도 이전 변수에 담겨있는 값에 영향을 주지 않는다

 

참조

let o = { isLoading: false };
let o2 = o;
o2.isLoading = true;

참조는 같은 것을 바라본다

o2는 o에 담긴 객체를 복사하는 것이 아닌 참조하게 된다

즉, 같은 메모리 주소를 바라보고 있는 것

둘 다 같은 객체를 참조(reference) 하고 있어서 하나가 수정되면 실제로 하나뿐인 객체의 속성이 바뀌는 것이고 그걸 바라보는 모든 변수에 영향을 미친다.

 

그럼 참조되는 값이란

참조되는 값은 기본형 값을 제외한 나머지 값 - 객체

 

 

객체는 하나

객체는 유니크하고, 한 번 만들어지면 대입문을 통해 복사되지 않는다

다른 변수에 할당하더라도 객체는 메모리 상에 단 한 군데에만 존재하고,

변수에 그 객체의 위치 정보만 넘겨주는 방식으로 작동

 

함수

let o = {
  isLoading: false,
};

function foo(o) {
  o.isLoading = true;
}

foo(o);

함수에 객체를 넘기고 isLoading 값을 바꾸면 원래 객체까지 바뀌는 것을 확인할 수 있다

이것은 객체가 함수로 전달될 떄도 값이 복사된ㄴ 것이 아닌 참조가 전달되기 때문,

그래서 함수 내부에서 값을 바꾸면 외부 객체도 함게 바뀌게 된다

 

이번 강의는 복사, 참조

복사, 참조는 초보자 개념같지만 강의를 듣고 나니 생각보다 훨씬 중요한 개념이었다

실제 코드에서 어떤 영향을 미치는지 단계별로 설명해줘서 이해도 잘 되고 기억에도 남는다