{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/array/","result":{"data":{"site":{"siteMetadata":{"title":"Progress Not Perfection","author":"Sunmin","siteUrl":"https://sunmin.netlify.com","comment":{"disqusShortName":"","utterances":"Sunmin0520/blog"}}},"markdownRemark":{"id":"53a687a3-1f47-5c28-aee9-9d236d4f8480","excerpt":"자료구조에서의 배열 동일한 크기의 메모리공간이 빈틈없이 연속적으로 나열된 자료구조(밀집배열dense array) 연속적으로 인접 -> 인덱스 통해 단 하나의 연산으로 임의의 요소에 접근. O(1) 정렬되지 않았거나 특정 요소 접근, 삽입, 삭제는 O(n) JS에서의 배열 배열의 요소 위한 각각의 메모리공간의 크기는 달라도 되고, 연속적으로 이어져 있지 않을수도 있다 (희소배열 sparse array) JS…","html":"<h2 id=\"자료구조에서의-배열\" style=\"position:relative;\"><a href=\"#%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0%EC%97%90%EC%84%9C%EC%9D%98-%EB%B0%B0%EC%97%B4\" aria-label=\"자료구조에서의 배열 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>자료구조에서의 배열</h2>\n<ul>\n<li>동일한 크기의 메모리공간이 빈틈없이 연속적으로 나열된 자료구조(밀집배열dense array)</li>\n<li>연속적으로 인접 -> 인덱스 통해 단 하나의 연산으로 임의의 요소에 접근. O(1)</li>\n<li>정렬되지 않았거나 특정 요소 접근, 삽입, 삭제는 O(n)</li>\n</ul>\n<h2 id=\"js에서의-배열\" style=\"position:relative;\"><a href=\"#js%EC%97%90%EC%84%9C%EC%9D%98-%EB%B0%B0%EC%97%B4\" aria-label=\"js에서의 배열 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>JS에서의 배열</h2>\n<ul>\n<li>배열의 요소 위한 각각의 메모리공간의 크기는 달라도 되고, 연속적으로 이어져 있지 않을수도 있다 (희소배열 sparse array)</li>\n<li>\n<p>JS에서의 배열은 일반적 의미의 배열이 아닌 <strong>일반적 배열의 동작을 흉내낸 특수한 객체</strong></p>\n<p>\n<br>\n<img src=\"https://user-images.githubusercontent.com/60782131/107640298-68ea5480-6cb5-11eb-8050-e75d516936b9.png\">\n</p>\n</li>\n<li>위와 같이 인덱스 나타내는 문자열을 프로퍼티로 가지고, 배열의 요소는 value이고 length 프로퍼티 가짐</li>\n<li>객체이므로 일반적인 배열보다는 인덱스로 요소에 접근시 느리다. 하지만 특정 요소 검색, 삽입, 삭제는 더 빠르므로 이것 주로 선택</li>\n<li>대부분의 모던 JS엔진은 배열을 일반 객체에 비해 좀 더 배열처럼 작동하도록 최적화</li>\n</ul>\n<h2 id=\"js에서의-객체\" style=\"position:relative;\"><a href=\"#js%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%9D%EC%B2%B4\" aria-label=\"js에서의 객체 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>JS에서의 객체</h2>\n<ul>\n<li>JS의 객체는 키를 인덱스로 사용하는 해시테이블이라고 생각할 수 있다.</li>\n<li>\n<p>클래스 기반 객체 지향 프로그래밍 언어(JAVA,C++ 등)에서는 클래스를 기반으로 객체(인스턴스) 생성</p>\n<ul>\n<li>즉 객체 생성 전에 이미 프로퍼티와 메서드 정해져있다. 생성된 이후에는 프로퍼티 삭제 및 추가 불가</li>\n</ul>\n</li>\n<li>\n<p>JS는 클래스 없이 객체 생성 &#x26; <strong>객체 생성된 이후에도 동적으로 프로퍼티와 메서드 추가 가능</strong>, 크기 정의 필요 없음, 요소의 데이터타입 제한 없음</p>\n<ul>\n<li>But 클래스기반 객체 지향 프로그래밍 언어보다는 객체 생성과 프로퍼티 접근 비효율 -> JS엔진은 프로퍼티 접근 위해 최적화</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"pass-by-reference\" style=\"position:relative;\"><a href=\"#pass-by-reference\" aria-label=\"pass by reference permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>pass-by-reference</h3>\n<ul>\n<li>\n<p><strong>pass-by-value</strong></p>\n<ul>\n<li>원시타입은 immutable. 값으로 전달(복사되어 전달)</li>\n<li>런타임(변수 할당 시점)에 메모리의 스택 영역에 고정된 메모리 영역을 점유하고 저장</li>\n</ul>\n</li>\n<li>\n<p><strong>pass-by-reference</strong></p>\n<ul>\n<li>객체는 프로퍼티 변경 추가 삭제 가능 -> 변경가능(mutable) => 동적으로 변화가능하므로 메모리 공간 확보 에측 불가 -> 런타임에 메모리공간 확보하고 <strong>메모리의 힙 영역에 저장</strong></li>\n<li>객체는 참조 방식으로 전달. 절대 복사X. 예를 들어 var foo = {val:10} 이라면 변수 foo는 객체 자체를 저장이 아닌 <strong>생성된 객체의 참조값(address)를 저장</strong></li>\n</ul>\n</li>\n</ul>\n<p>\n<br />\n<br />\n</p>\n<p><strong>출처</strong> </p>\n<ul>\n<li>이웅모, 모던 자바스크립트 Deep Dive(위키북스, 2020)</li>\n<li><a href=\"https://poiemaweb.com/js-object\">PoiemaWeb</a></li>\n</ul>","frontmatter":{"title":"[JS] JavaScript에서의 배열과 객체","date":"February 11, 2021"}}},"pageContext":{"slug":"/JavaScript/array/","previous":{"fields":{"slug":"/JavaScript/review_coreJS_06.prototype/"},"frontmatter":{"title":"[JS][코어 자바스크립트] 06. 프로토타입","category":"javascript","draft":false}},"next":{"fields":{"slug":"/CS/shell/"},"frontmatter":{"title":"[CS] shell, kernel","category":"cs","draft":false}}}},"staticQueryHashes":["3128451518","521680639"]}