[Javascript] 객체 (Object, array, DOM)

Coastby·2022년 6월 8일
DOMJavaScriptarray
0

Javascript

목록 보기
1/1

👉객체란?

'객체 (object)'는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 또한 자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위이기도 하다.

Javascript에서 사용하는 객체

  • 문서 객체 모델 (DOM) : 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체이다. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있다.
  • 브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있다.
  • 내장 객체 : 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있다. 예를 들어, 날짜, 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 쉽게 사용할 수 있다.

✓ 객체의 인스턴스 만들기

자바스크립트에서 객체는 참조 형태로 사용해야 한다. 즉, 객체 자체가 아니라 인스턴스 (instance)의 형태로 만들어서 사용한다. 자바스크립트 안에 정의된 객체는 그대로 두고 객체와 똑같은 속성과 기능을 만들 수 있다. 자바스크립트의 객체가 틀이라면 그 틀을 기본으로 해서 계속 같은 모양으로 찍어내는 것이 인스턴스이다. 그리고 그 인스턴스에 식별자를 붙여서 사용한다.

객체의 인스턴스를 만들 때는 new라는 예약어를 사용한다. new 뒤에 만들려고 하는 객체 이름을 써준다.

new 객체명

예를 들어, new 예약어를 사용하여 Date 객체의 인스턴스를 만든다. 그리고 변수 now에 저장한 변숫값을 콘솔에 찍는다.

var now = new Date();
console.log(now)

//result
//Wed Jun 08 2022 13:21:34 GMT+0900 (한국 표준시)

✓ 프로퍼티와 메서드 이해하기

객체에는 프로퍼티 (property)와 메서드(method)가 있는데, 쉽게 말해 프로퍼티는 객체의 특징이나 속성을 나타내고, 메서드는 객체에서 할 수 있는 동작을 표현한다. 예를 들어, '자동차 운전'이 하나의 프로그램이라면 '자동차'는 객체가 되고, 자동차의 프로퍼티는 자동차의 제조사나 모델명, 색상, 배기량 등이 된다. 또한 자동차의 메서드는 시동걸기, 움직이기, 멈추기, 주차하기 등이 된다.

인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받아서 똑같이 사용한다. 프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 마침표(.)를 붙이고 객체의 프로퍼티나 메서드 이름을 작성한다. 이때 메서드는 함수와 같은 역할을 하므로 getHors()처럼 이름 옆에 괄호를 넣어야 한다.

예를 들어, 앞의 now 인스턴스에 toLocaleString() 이라는 메서드를 적용해 본다.

var now = new Date();
console.log(now.toLocaleString())

//result
//2022. 6. 8. 오후 1:28:42

👉Array 객체

✋배열(Array) vs 리스트(List)

✓ 배열

  • 데이터가 많아지고 그룹 관리의 필요에 따라 배열을 사용한다.

  • 고정된 크기를 갖는 같은 자료형의 원소들이 연속적인(논리적 저장 순서와 물리적 저장 순서가 일치) 형태로 구성된 자료구조

    	- 인덱스에 따라 값을 유지하므로 원소가 삭제되어도 빈자리가 남게되어 메모리가 낭비된다.
	- 처음 크기를 10으로 지정한다면 5개의 데이터만 저장하더라도 실제 배열의 크기는 10이다.

  • 인덱스(index) : 각 원소의 번호로 0번부터 시작하며, 해당 원소에 접근한다.

  • 데이터 갯수가 확실하게 정해져 있고, 접근이 빈번한 경우 배열이 효율적이다.

  • cache hit 가능성이 커져 성능에 큰 도움이 된다.

    	cache hit : CPU가 참조하고자 하는 메모리가 캐시에 존재하고 있는 경우

  • 고정이고 연속적인 만큼 인덱스로 random access가 가능하다.

  • 접근, 수정 O(1)으로 빠르게 조회가 가능하다.

  • 하지만 삽입과 삭제의 경우 연속적인 형태 유지를 위해 shift 연산을 해야하므로 O(n)이 된다.

✓ 리스트

  • 배열의 문제점을 해결하기 위한 자료구조
    • 빈틈없는 데이터의 적재라는 장점을 가진다.
    • 원소를 삭제했을 때 삭제된 데이터 뒤 원소로 빈틈없이 연속적으로 위치시킨다.

  • 리스트의 핵심은 원소들 간의 순서로 순서가 있는 데이터의 모임이 리스트이며 리스트를 다른 이름으로 시퀀스(sequence)라고도 부른다.

  • 배열에서 인덱스는 유일무이한 식별자이지만 리스트에서는 몇 번째 데이터인지 정도의 의미를 가진다.

  • 빈 엘리먼트는 허용하지 않는다.

  • 순차성을 보장하지 못하기 때문에 spacial locality 보장이 되지 않아 cash hit가 어렵다.

  • spacial locality : 프로그램 실행 시 접근하는 메모리 영역은 이미 접근이 이루어진 영역의 근처일 확률이 높다는 프로그램 성격 표현

  • 언어별로 list를 지원하는 것이 다르다

    • 최근 언어들은 리스트를 기본으로 제공
    • C : 리스트 지원 X
    • JavaScript : 배열에 리스트 기능 포함
    • Python : 기본 리스트, 배열 지원 X
    • Java : 배열과 리스트 모두 지원, ArrayList와 LinkedList로 나뉨

출처: https://jy-tblog.tistory.com/38 [jy.log:티스토리]


👉DOM (The Document Object Model)

참고 : https://from2020.tistory.com/23
웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹문서 전체 또는 일부분이 동적으로 반응하게 하는 것이다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다.

✓ 문서 객체 모델 (DOM)의 정의

  1. 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
  2. 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
DOM은 브라우저에서 구현된다. 따라서 브라우저마다 DOM을 구현하는 방식이 다를 수 있다.

✓ DOM의 기능

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

✓ DOM 구조, DOM tree

넷플릭스의 개발자 도구 - element에서 볼 수 있는 DOM tree 구조. 기본적으로 html의 구조를 따라가고 이를 tree 구조로 표현한다.

✓ DOM API

스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여),
문서 자체를 조작하거나 문서의 children 을 얻기 위해 document 또는 window elements 를 위한 API 를 즉시 사용할 수 있다.

  • DOM 구조에 접근
    • JS를 조금이라도 만져봤다면, document.getElementById('id')와 같은 함수들을 사용해보았을것이다.
      DOM은 문서의 children, 하위 요소를 얻기 위한 API를 제공한다는데, 위 메소드가 딱 이를 보여준다.
    • 앞에서 태그 하나하나가 전부 객체라고 말했다.
      DOM이 구성한 객체에 DOM이 제공하는 메소드와 프로퍼티들을 통해 접근할 수 있다.
      DOM에 인터페이스라는 표현을 썼다는 것을 다시 한 번 짚고 넘어가자.
  • DOM 수정
    • 객체에 접근했다면, DOM API를 활용해 DOM을 수정할 수 있다.

✓ DOM node

객체지향의 개념이지만, DOM에서 모든 객체들은 클래스(프로토타입)를 상속받는다.

이는 상속의 관계인데, 하위 요소들은 상위 요소들의 클래스를 전부 상속받는다.
네이버의 body태그의 노드 속성을 보자.

마치 저 그림 그대로다. body -> HTMLBodyElement -> Element -> Node -> EventTarget까지. Object는 JS의 모든 객체가 갖는 프로토타입이기 때문에 넘어가자.

각 프로토타입이 제공하는 메소드와 프로퍼티에 대해서는 모던 JS 튜토리얼에 친절하게 설명되어있다.

⭐️ DOM의 정의⭐️
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

profile
Coastby
훈이야 화이팅

0개의 댓글