본문 바로가기
Web/Javascript

객체

by juein 2018. 2. 26.

[Chapter 3] 객체

- 객체는 변형 가능한 속성들의 집합. 객체는 그저 속성을 모아놓은 것이다.

(숫자, 문자, 불리언, null, undefined 를 제외한 값들은 모두 객체다, 배열, 함수, 정규표현식 등은 모두 객체!)


- 객체의 속성명은 문자열이면 모두 가능하다. 빈 문자열도 가능.


- 속성값은 undefined를 제외한 모든 값이 사용가능


- 자바스크립트 객체는 클래스가 없지만, 다른 객체에 상속하게 해주는 프로토타입(prototype) 이 있다.

이 특성을 잘 활용하면, 객체를 초기화하는 시간과 메모리 사용을 줄일 수 있다.


example ) 자동차 객체화 예제

//자동차 객체화
var car = {
  'color' : 'black',
  'model' : 'avante',
  'year' : '2010',
  'wheel' : 4 ,
  'drive' : function() {  
      alert('Brrr~');
   }
};

//car 객체에 name 추가
car['name'] = '붕붕이';

//개발자도구를 활성화 -> console탭을 확인하세요
console.dir(car);

//자동차 시동 걸기 -> 객체안에 들어가는 함수를 '메소드' 라고 한다
car.drive();


//console.dir 출력결과




01] 객체 리터럴
- 중괄호 {} 로 둘러싸고 이름/값 쌍으로 표현하고, 속성:값 의 쌍들을 구분하는데에 , 를 사용



02] 속성값 읽기

- 대괄호 [] 로 둘러싸거나, 마침표 . 표기법으로 읽기 가능



- 존재하지 않는 값을 읽으려고 하면 undefined 를 반환해준다




- || 연산자를 사용하여 기본값을 지정해 줄 수 있다





03] 속성값의 갱신

- 객체의 값은 할당에 의해 갱신된다. 이미 객체안에 존재하면 해당 속성의 값이 변경된다.





04] 참조

- 객체는 참조 방식으로 전달된다. 복사되는게 아니다.


example)





05] 프로토타입(Prototype)

- 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체(Object)와 연결 되어있다.

- Object.prototype 에는 toString(), valueOf() 등과 같은 모든 객체에서 호출 가능한 기본 내장 메서드가 포함 되어있다.

이를 상속받은 객체에서 Object.prototype 에 있는 다양한 메서드를 마치 자신의 속성인것 처럼 사용 할 수 있다.

- console.dir() 로 지정된 객체의 프로토타입을 쉽게 확인 가능



06] 리플렉션

- 변수의 타입을 체크하고 객체의 구조를 탐색하는 과정을 리플렉션 이라 한다.

- 쉬운 방법으로 typeof 연산자를 사용하여 객체에 어떤 속성들이 있는지 확인 할 수 있다






- 원하지 않는 속성을 배제하기 위해 hasOwnProperty 메소드를 사용하는 방법이 있다.

(hasOwnProperty 메소드는 객체에 특정 속성이 있는지 확인해서 true/false 값을 반환해주는 메소드로, 이 메소드를 사용하면 프로토타입 체인을 바라보지 않는다.)





07] 열거(Enumeration)

- for in 구문을 사용하여 객체에 있는 모든 값의 속성 이름을 늘어놓을 수 있다. 





08] 삭제

- delete 를 사용하여 객체의 속성을 삭제 가능하다. 

(delete는 프로토타입 연결상에 있는 객체들은 접근하지 않습니다.)




09] 촤소한의 전역변수 사용

- 전역변수의 잦은사용은 프로그램의 유연성을 약화하기 때문에 가능하면 피하는것이 좋다.

전역변수 사용을 최소화 하는 방법중 하나로, 먼저 전역변수 하나를 생성 한 후



선언한 변수를 다른 전역변수를 위한 컨테이너로 사용하는 방법이 있다.



- 이러한 방법으로 전역변수를 이름 하나로 관리하면 

다른 라이브러리들과 연동할 때 발생하는 문제점을 최소화 할 수 있다.


- 전역변수 사용을 줄이는데 효과적인 방법으로 클로저 사용이 있는데 그건 나중에 서술..




'Web > Javascript' 카테고리의 다른 글

상속  (0) 2018.02.27
콜백, 모듈, 커링, 메모이제이션  (0) 2018.02.27
함수 - (스코프, 클로저)  (0) 2018.02.26
함수  (0) 2018.02.26
객체  (0) 2018.02.26
자바스크립트 기본, 타입, 함수  (0) 2018.02.26

댓글0