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

javascript

자바스크립트 강의 리스트

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

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
윤인성님의 javascript강의 청각장애인을 위한 자막
1544412048402.jpg

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

구형
이번 절에서는 7.5 절의 상속에 대해서 간단하게 설명을 하고 이후의
내용을 계속 진행을 하도록 하겠습니다
일단 상속은 간단하게 부모가 가지고 있는 속성을 자식 에서 재활용을
하겠다는 기능인데요
요 기능도 객체를 조금 더 효율적으로 생성하기 위한 방법중의 하나라고 할
수 있습니다
뭐 전부 다 그냥 개체를 조금 더 효율적으로 생성하기 위해서 사용하는
테크닉 인데요
원래 프로토타입 기반의 객체지향 프로그래밍 언어는 상속 이라는 기능을
내부적으로 가지고 있지 않아요
이걸 모방을 해서 구현을 할 뿐이지 기본적으로 제공되는 기능은 아닙니다
사실 그래서 클래스 기반의 객체지향 프로그래밍 언어는 상속을 기본적으로
지원을 하거든요 그래서 이 상속 이라는 기능 때문에 프로토타입 기반의
객체지향 프로그래밍 언어가 클래스 기반의 객체지향 프로그래밍 언어 에게
밀렸다 고 생각을 해 주시면 됩니다
그래서 최신 자바 스크립트 버저 이니그마 스크립트 3번이 그만 스크립트
2016 2017 부터는 상속 이라는 기능을 기본적으로 클래스 에서
지원을 하게 되었습니다
그래도 내용을 보시게 되면 이게 무슨 말인가 라고 약간 고민을 하실 수
있어요 왜냐하면 은 상속 이라는 개념 자체도 쉬운 개념이 아닌데 그
상속이 라는 개념을 프로토타입으로 모방을 해서 구현 하는 과정을 설명하고
있기 때문에 모방에서 구현하는 방법 까지는 이해가 되도 이상 속 이라는
것을 어떠한 경우에 활용하는지 굉장한 의문이 되실 수 있습니다 그리고
일반적인 자바 스크립트 개발에서는 상속을 거의 사용하지 않고요
프레임워크를 사용한 대규모 자바스크립트의 블리 케이션 개발에 상속이 활용
되게 되는데 최근에는 타입 스크립트를 사용한 앵귤러 js 라던지 아니면
이 크마 스크립트 6a 부의 버전을 이 크마 스크립트 파이브의 버전으로
변경 을 해주는 바벨 같이 녀석을 활용을 해서 요 상속을 구현 하기
때문에 현재 단계에서는 우리가 상속을 살펴보지 않고 이 책이 모두 끝난
이후에 리 액트 같은걸 맛보기를 하면서 그때 상속이 어떻게 활용되는지
살펴보도록 하겠습니다 사실 저도 실버 를 처음에 할때는 싶을 프로
공부하는 동안에 상속이 몬 개념 인지 그 공부 끝날 때까지 다 하지
못했어요 나중에 일을 하면서 상속을 활용해 보다 보니까 상속으로 어느
경우에 활용하고 왜 이걸 사용하면 객체를 조금 더 효율적으로 선언을 할
수 있게 되는지 그 때 께 따라서 사실 이후에 우리가 진짜로
애플리케이션을 만들어 보면서 그때 설명하도록 하겠습니다
자 그러면 194 페이지에 6.8 점 2 절 참조 복사 값 복사 부분을
살펴보도록 하겠습니다
음 일단 쿼터 6 다시 29 각 복사에 대해서 살펴보도록 하겠습니다
우리가 값 복사 를 지 푼 복사 라고 부르기도 하는데 용
사실 우리가 기본자료 용을 가지고 깊은 복사 라고 부르지는 거의 않지만
거의 같은 경우이기 때문에
4 그렇게 설명을 하고 있습니다 어쨌거나 현재 코드의 실행 결과를 한번
같이 측을 해 보도록 하겠는데요
미리 한번 책에 있는 내용을 보면서 예측을 해 보시기 바랍니다
일단 코드를 간단하게 분석을 해 보게 되면 10 이라는 값을 오리지널
밸리의 넣고 오리지널 밸류 에 있는 값을 뉴 벨 2 에 넣은 다음에 오리
저널 밸류 에 있는 값을 273 으로 변경을 하고 각각의 값을 출력을
하게 됩니다
오리지널 밸류 는 273 으로 바꿔 쓰니까 은 쪽은 뭐 273 이 출력의
되겠고 뉴 밸류 같은 경우는
우리가 오리지널 밸류 에 값을 넣었는데 이때 오리지널 밸류 에 값은 12

그래서 12 들어가서 273 과 10을 출력을 하게 될겁니다
한번 저장을 하고 함께 실행해 보도록 하겠습니다
실행을 하면 273 을 한번 출력을 하고 그 다음에 십

을 출력을 해서
아까 설명한 것과 같은 과정이 실행되는 녀석을 볼 수 있습니다
뭐 사실 당연한 결과라고 할 수 있는데 이 다음 코드를 보고 나면 앤 요
결과가 약간 애매 지게 되는데요
체 코 드 6 다시 30 에 있는 내용을 한번 붙여 넣고 함께 살펴보도록
하겠습니다
일단 오리지널 어레이를 선언을 하고
뉴 어레이 에다가 오리지널에 이를 넣게 됩니다
긋고 오리지널에 이혜영 번째 값을 273 으로 변경을 한 뒤 오리지널에
이에 값과 뉴 어레이의 값을 차례차례 출력을 하고 있습니다
일단 오리지널 어레이는 1 2 3 4 에서 273 으로 첫 번째 녀석을
바꾼 거기 때문에
아마
273 2 3 4를 출력을 하게 될겁니다
오리 자 어레이 말고 뉴 어레이 같은 경우에는 u 값을 한번 넣었죠
그리고 이녀석 얘긴 따로 변경을 가하지 않고 곧바로 출력을 했기 때문에
1234 가 출력된다 라고 생각하는 경우가 굉장히 많습니다
뭐 이렇게 말했다 는 의미는 요렇게 실행이 안된다는 의미겠죠
다시 위쪽에 있는 녀석을 요렇게 변경을 해 보고 실행해 보도록 할게요
저장을 하고 실행을 하게 되면 처음 결과는 오리지널에 이를 출력을 해서
273 2 3 4가 되고 그 다음 구두 273 2 3 4가 되는 녀석을
확인할 수 있습니다
분명히 오리지널에 이에 값만 변경을 했는데 뉴 어레이의 값도 같이
변경되었다는 의미입니다
이 현상을 이해하기 위해선 이제부터 올해가 값과 참조 라는 말을 9분을
해야 되는데요
우리가 값을 영어로는 밸류 라고 부르고 참조 는 영어로 레퍼 랑스 라고
부르게 됩니다
어쨌거나 그래서 벨류 는 우리가 지분 자료형 으로 선언된 값을 모두 다
밸류 라고 부르게 됩니다
우리가 기본 자료형 은 숫자 문자열 불이 2.2 녀석을 복사를 하게 되면
이 값이 그냥 복사가 되어서 들어가는 겁니다
한마디로 누벨 2 콜 오리지널 밸류 라고 적었을 때 그냥 12
요러한 형태로 복사가 되어 들어간다 라고 생각을 해 주시면 됩니다
따라서 이 오리지널 밸리와 뉴 벨류 는 전혀 다른 값이 점
그래서 서로가 서로의 영향을 주지 않고 지 두 번의 값을 것 변경을 했을
때 새로운 값에 전혀 영향을 주지 않아서 273 과 10을 출력을 하게
되는 겁니다 방금 언급했던 것처럼 이 현상은 기본자료 용 모두에서
나타나요
그래서 u 앞쪽에 있는 걸 추로 주게 되면 요녀석도 서로가 서로의 영향을
주지 않아서 273 과
아 273 과 트롤을 출력을 하는 모습을 볼 수 있습니다
그런데 우리가 기본 자룡 을 제외한 녀석들 함수 라던지 객체 라던지
그리고 현재 배열도 개최하고 이전에 언급을 했었죠 그래서 배열이 라던지
를 활용할 때는 요기 약간 달라지게 됩니다
우리가 객체 같은 큰 녀석을 사용하게 되면 이 2배 열에 객체나 배열에
얼마나 큰 값이 들어갈 지 자바스크립트 프로그래밍 언어는 실행 하기
전까지 알 수가 없어요
이 요소가 몸 안개가 될지 10만 개가 될지 전혀 9분을 할 수 없기
때문에
자바스크립트는 요렇게 배열을 선언을 하거나 객체를 선언을 하거나 함수를
선언 을 하게 되면
273 1234 라는 녀석을 메모리 위에 올리게 되구요
이 메모리의 주소를
오리지널에 이라는 녀석의 할당하게 됩니다
우리가 일반적으로 메모리 주소를 간단하게 표현할 때는
0x 뿅뿅 이라고 입력을 하게 되는데요 0x1 이라고 한번 이 녀석을
가정을 해 보도록 하겠습니다
그리고 오리지널에 인 유어 레일을 하게 되면 0x00 일이라는 녀석을
할당을 하게 되는 겁니다
요 0x00 일이라는 것은 u 배열이 메모리 위에 위치한 위치라고 생각을
해 주시면 됩니다
이어 섬 오리지널에 이혜영 번째 값을 273 으로 바꾸게 되는데요
이거는 0x00 일이라는 여서 개 0번째 있는 값 셀 273 이라고
바꾸라 는 의미입니다
한마디로 0x00 일은 요 1234 라는 대열이 메모리 위임 올라가 있는
이신데요 이녀석이 앞글자를 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 라이브러리가
내부적으로 가지고 있는 클론 이라는 메소드를 한번 내부 넣어보았습니다
굉장히 코드 각 인데요
요걸 한번씩 쭉 읽어보면서 분석을 한번 해보시면 어떠한 형태로 더 깊은
복사를 제대로 할 수 있는지 이해 하실 수 있을 거라고 생각합니다
어쨌건 오늘 강의는 여기까지 되겠구요 다음 강의 부터는 이제 좀 재미있는
내용을 나가요 지금까지 논리가 자바스크립트 문법을 주구장창 아 다 봤죠
근데 다음부터는 이제 지금까지 배웠던 문법을 활용을 해서 무언가를 만드는
과정을 거칠 거기 때문에 지금까지의 내용을 이해를 하셨다면 이제
지금부터는 조금 내용을 쉽게 진행하실 수 있을 거라고 생각을 합니다
어쨌거나 오늘 강의는 여기까지 되겠고요 다음 강의 부터는 본격적으로 탈장
부터 기본 내장 객체
브라우저 내장 객체 그리고도 키만 두 오브젝트 모델 등을 살펴보도록
하겠습니다.

댓글 0개

등록된 댓글이 없습니다.

 
Total 83건 1 페이지
썸네일
제목

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권에 문제가 있는 자료일 경우 impactlife@naver.com 으로 신고해 주시면 즉시 삭제처리하겠습니다.

Menu