윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 44강 - 값복사와 참조복사 > javascript

 안녕하세요 모던 웹을 위한 자바스크립트 3 이 쿼리 먼 3탄 4관객이

을 출력을 해서
아까 설명한 것과 같은 과정이 실행되는 녀석을 볼 수 있습니다
뭐 사실 당연한 결과라고 할 수 있는데 이 다음 코드를 보고 나면 앤 요
결과가 약간 애매 지게 되는데요
체 코 드 6 다시 30 에 있는 내용을 한번 붙여 넣고 함께 살펴보도록
하겠습니다
일단 오리지널 어레이를 선언을 하고
뉴 어레이 에다가 오리지널에 이를 넣게 됩니다
긋고 오리지널에 이혜영 번째 값을 273 으로 변경을 한 뒤 오리지널에
이에 값과 뉴 어레이의 값을 차례차례 출력을 하고 있습니다
일단 오리지널 어레이는 1 2 3 에서 273 으로 첫 번째 녀석을
바꾼 거기 때문에
아마
273 2 3 4를 출력을 하게 될겁니다
오리 자 어레이 말고 뉴 어레이 같은 경우에는 u 값을 한번 넣었죠
그리고 이녀석 얘긴 따로 변경을 가하지 않고 곧바로 출력을 했기 때문에
123가 출력된다 라고 생각하는 경우가 굉장히 많습니다
뭐 이렇게 말했다 는 의미는 요렇게 실행이 안된다는 의미겠죠
다시 위쪽에 있는 녀석을 요렇게 변경을 해 보고 실행해 보도록 할게요
저장을 하고 실행을 하게 되면 처음 결과는 오리지널에 이를 출력을 해서
273 2 3 4가 되고 그 다음 구두 273 2 3 4가 되는 녀석을
확인할 수 있습니다
분명히 오리지널에 이에 값만 변경을 했는데 뉴 어레이의 값도 같이
변경되었다는 의미입니다
이 현상을 이해하기 위해선 이제부터 올해가 값과 참조 라는 말을 9분을
해야 되는데요
우리가 값을 영어로는 밸류 라고 부르고 참조 는 영어로 레퍼 랑스 라고
부르게 됩니다
어쨌거나 그래서 벨류 는 우리가 지분 자료형 으로 선언된 값을 모두 다
밸류 라고 부르게 됩니다
우리가 기본 자료형 은 숫자 문자열 불이 2.2 녀석을 복사를 하게 되면
이 값이 그냥 복사가 되어서 들어가는 겁니다
한마디로 누벨 2 콜 오리지널 밸류 라고 적었을 때 그냥 12
요러한 형태로 복사가 되어 들어간다 라고 생각을 해 주시면 됩니다
따라서 이 오리지널 밸리와 뉴 벨류 는 전혀 다른 값이 점
그래서 서로가 서로의 영향을 주지 않고 지 두 번의 값을 것 변경을 했을
때 새로운 값에 전혀 영향을 주지 않아서 273 과 10을 출력을 하게
되는 겁니다 방금 언급했던 것처럼 이 현상은 기본자료 용 모두에서
나타나요
그래서 u 앞쪽에 있는 걸 추로 주게 되면 요녀석도 서로가 서로의 영향을
주지 않아서 273 과
아 273 과 트롤을 출력을 하는 모습을 볼 수 있습니다
그런데 우리가 기본 자룡 을 제외한 녀석들 함수 라던지 객체 라던지
그리고 현재 배열도 개최하고 이전에 언급을 했었죠 그래서 배열이 라던지
를 활용할 때는 요기 약간 달라지게 됩니다
우리가 객체 같은 큰 녀석을 사용하게 되면 이 2배 열에 객체나 배열에
얼마나 큰 값이 들어갈 지 자바스크립트 프로그래밍 언어는 실행 하기
전까지 알 수가 없어요
이 요소가 몸 안개가 될지 10만 개가 될지 전혀 9분을 할 수 없기
때문에
자바스크립트는 요렇게 배열을 선언을 하거나 객체를 선언을 하거나 함수를
선언 을 하게 되면
273 123라는 녀석을 메모리 위에 올리게 되구요
이 메모리의 주소를
오리지널에 이라는 녀석의 할당하게 됩니다
우리가 일반적으로 메모리 주소를 간단하게 표현할 때는
0x 뿅뿅 이라고 입력을 하게 되는데요 0x1 이라고 한번 이 녀석을
가정을 해 보도록 하겠습니다
그리고 오리지널에 인 유어 레일을 하게 되면 0x00 일이라는 녀석을
할당을 하게 되는 겁니다
요 0x00 일이라는 것은 u 배열이 메모리 위에 위치한 위치라고 생각을
해 주시면 됩니다
이어 섬 오리지널에 이혜영 번째 값을 273 으로 바꾸게 되는데요
이거는 0x00 일이라는 여서 개 0번째 있는 값 셀 273 이라고
바꾸라 는 의미입니다
한마디로 0x00 일은 요 123라는 대열이 메모리 위임 올라가 있는
이신데요 이녀석이 앞글자를 273 으로 바꿨기 때문에 메모리 위에 있는
배열에 형태가 바뀌게 되는 것입니다
이어서 우리가 0x00 1과 0 6 쏘 000 일을 똑같이 출력을 하게
되죠
한마디로 복사 된게
실질적으로 배열에 값니라 배열 내부에 있는 메모리 주소가 복사된
거기 때문에 두개가 같은 형태로 출력된다 라고 할 수 있습니다
다시한번 코드를 붙여놓고
한번 직접 읽어 보면서 어떠한 식으로 실행이 되는지 함께 이해를 해
보시면 좋겠습니다
어쨌거나 이렇게 메모리 위에 올라가 있는 주소를 우리가 레터 랑스 참조
라고 부르게 됩니다
자 그럼 책에 있는 내용을 함께 살펴보도록 할텐데요 그림 6.2 로 를
보시면 일단 우리가 아까 오리지널 밸류 기본 자룡 을 10으로 할당을
했습니다
이어서 뉴 밸류 에 다시 입을 넣었는데요 이때는 십은 가볍 짜 나요 기본
자료는 가볍기 때문에 이 값을 곧바로 뉴 벨류 에다가 꼽게 됩니다
한마디로 오리지널 배경에도 10 이라는 값이 들어 있고 뉴 밸류 라는 6
애도 10 이라는 값이 들어 있는 것이 됩니다
그리고 오리지널 벨뷰 에 있는 값을 273 으로 바꿔 써 점
그러면 이 두녀석은 서로 서로 독립된 여성이기 때문에 서로 다른 값을
가지게 됩니다
이렇게 두 개의 변수가 완전한 독립성을 갖는 것을 우리가 값 복사 또는
깊은 복사 라고 부르게 됩니다
어쨌거나 이어서 배열이나 객체를 하던지 함수는 약간 퀸 녀석이 있기
때문에 자바스크립트가 메모리 위에 올라가 있는 그 주소값을 할당하게
됩니다
6월 0x10 을 레퍼런스 라고 부르게 되었는데요 사실 이렇게 직선적으로
저장 되는 것도 아니고
요렇게 값이 모여 객실 용으로 딱 나오는 것도 아니지만 일단 가정을 해서
설명하는 것이라고 생각을 해 주시면 되겠습니다
어쨌거나 오리지널에 이에 다간 앤 유 배열의 값이 그대로 들어가는게
아니라 이 배열에 참조가 들어 가게 됩니다
그리고 뉴 어레이 콜 오리지널에 일을 해도 요 참조가 복사 된다 라고 할
수 있죠
그래서 오리지널이 에 값을 변경 을 했을 때 뉴 어레이 에 있는 값도
함께 병정 되던 것처럼 보이는 것입니다
이렇게 두개가 참조가 들어가서 그 독립적 이지아는 형태로 복사가 되는
것을 참조 복사 또는 얕은 복사 가 되고요
사실 이녀석이 우리가 프로그래밍을 하다 보면 굉장히 문제가 되는 경우가
많아서 용어를 따로 정리를 하고 기억을 해 두는 겁니다
어쨌거나 그래서 프로그래밍 현서는 2부 녀석을 어떻게 복제할 것인가
요 오리지널에 이 가 참조 복사 얕은 복사 되는게 아니라 짚은 복사 되게
만드는 방법이 굉장히 중요한 문제가 됩니다
그래서 한번 요녀석을 살펴보도록 할게요 일단 복사를 할 때 아예 새로운
배열을 만들어 주셔야만 새로운 주소 값이 들어가게 됩니다
요녀석이 뭐 0x10 이라 부르고 요 아래쪽에 있는 걸 0x0 이라고
부르게 되면 지금부터는 이제 인 두 녀석이 전혀 다른 값을 가지게 되죠
이 다음에 매부 에 있는 기본 자룡 을 하나하나 옮기는 과정을 거둬
주셔야 됩니다
모포 반복문을 돌림 되겠죠
부의 얇 i 는 0부터 아이 난 오리지널에 이에
음
땡스 까지 i've 뿔을 해주시면 반복이 돌 거구요
뉴 어레이 에 i 번째 에다가
오리지널에 이에 i 번째 를 요렇게 하나하나 복사를 해 주시면
유 내부에 있는 값들은 기본 자들 행위이기 때문에 하나하나 복사가 됩니다
이후에 뭐 오리지널이 에 값을 변경하고 뭐 북치고 장구치고 다 해도 아예
참조 가 다르기 때문에 서로에게 영향을 끼치지 않습니다
저장을 하고 코드를 실행해 보면 첫 번째 오리지널을 변경한 녀석은 273
이 3달을 출력을 하고 두번째 있던 유 어레이는 이제 깊은 복사 가 된
것이기 때문에 1 2 3 4가 그대로 출력되는 모습을 볼 수 있습니다
어쨌거나 배열이나 객체 같은 경우에는 얕은 복사가 이루어 지기 때문에
그게 프로그래밍 언어 상으로 문제가 되는 경우가 굉장히 많아서 요러한
형태로 깊은 복사를 해서 사용하는 것을 꼭 기억을 해 주셔야 하고요
참고적으로 이렇게 깊은 복사를 우리가 뭐 영화 단어로는 클론 이라는 말을
많이 사용을 합니다
그래서 클론 이라는 이름의 메소드를 라던지 함수 라던지 가 있다면 모든
프로그래밍 언어를 9분하지 않고 참조 복사가 되는 녀석을 깊은 복사 하게
만드는 녀석이라고 함께 기억을 해 주시면 좋겠습니다
어쨌거나 책을 보시면 배열이 외에도 객체를 짚은 복사하는 방법 또 나오고
이 크마 스크립트 식스 에서 요걸 사용하는 방법도 나오게 되는데요
한번 같이 살펴 보시면 좋겠습니다 어쨌거나 방금 클론 이라는 녀석이 깊은
복사를 하게 만드는 녀석 이라고 했는데요
이 깊은 복사 가 어떻게 이루어지는지 언더 스코어 js 라이브러리가
내부적으로 가지고 있는 클론 이라는 메소드를 한번 내부 넣어보았습니다
굉장히 코드 각 인데요
요걸 한번씩 쭉 읽어보면서 분석을 한번 해보시면 어떠한 형태로 더 깊은
복사를 제대로 할 수 있는지 이해 하실 수 있을 거라고 생각합니다
어쨌건 오늘 강의는 여기까지 되겠구요 다음 강의 부터는 이제 좀 재미있는
내용을 나가요 지금까지 논리가 자바스크립트 문법을 주구장창 아 다 봤죠
근데 다음부터는 이제 지금까지 배웠던 문법을 활용을 해서 무언가를 만드는
과정을 거칠 거기 때문에 지금까지의 내용을 이해를 하셨다면 이제
지금부터는 조금 내용을 쉽게 진행하실 수 있을 거라고 생각을 합니다
어쨌거나 오늘 강의는 여기까지 되겠고요 다음 강의 부터는 본격적으로 탈장
부터 기본 내장 객체
브라우저 내장 객체 그리고도 키만 두 오브젝트 모델 등을 살펴보도록
하겠습니다.