javascript 5. 객체

 

객체는 몇 가지 특수한 기능을 가진

연관 배열 (associative array)

 

객체는 프로퍼티를 저장한다. 

{key:value} 

이것을 property 라고 한다.

 

key: 문자형 (문자열, 심볼)

value : 모든 자료형

 

let user = { // 객체 user 
	name: "John", //첫 번째 프로퍼티
    age: 30       //두 번째 프로퍼티. key는 age, value는 30

 

 

객체이름.key

점 표기법 (dot notation)

: 객체에 저장된 key에 해당하는 value 불러오기.

 

delete 프로퍼티이름

프로퍼티 삭제

 

복수의 단어를 사용한 키값은 따옴표로 묶어라

 

trailing (hangoing) ,

예시)

한 줄에 하나의 문장을 담고 쉼표로 구분지어 밑으로 내려간다.

let user = {
	name: "John",
    age: 30
}

 

주의!! 상수(const) 객체는 수정될 수 있다. 

const 객체이름 = {key:value}

에서 const는 객체의 값을 고정하지만 그 내용은 고정하지 않는다. 

 

const 는 user=... 를 전체적으로 설정하려고 할 때 오류가 발생한다. 

 

 

 

점 표기법으로 프로퍼티 값을 읽어올 수 없는 경우! (띄어쓰기가 있는 경우)

대괄호 [  ] 표기법(square bracket notation) 을 이용한다. 

대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작한다.

 

계산된 프로퍼티(computed property)

프로퍼티 키가 대괄호 [  ]로 둘러싸여 있다.

{[fruit]:5}

 

이름과 값이 변수의 이름과 동일한 경우

단축 프로퍼티 사용 가능!

name : name 대신

name 만 사용해도 알아들음

 

프로퍼티 이름 짓기

예약어 (for let return...등) 사용 금지

 

* 하지만 객체 프로퍼티에는 __proto__ 외에는 제약이 없다.

* 예약어를 key로 사용 가능.

 

* 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형변환된다. 

 

"key" in object

프로퍼티 존재 여부 확인하기

 

* 자바스크립트 객체의 중요한 특징

: 존재하지 않는 프로퍼티에 접근하려고 해도 에러가 발생하지 않고 undefined를 반환한다.

 

 

for in 반복문

객체의 모든 키를 순회 가능

for (key in object) {
	// 각 프로퍼티 키(key)를 이용하여 본문(body)를 실행합니다.
}

 

객체 정렬 방식

정수 프로퍼티 (integer property)는 자동으로 정렬

그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬

 

 

참조에 의한 객체 복사

객체는 참조에 의해 (by reference) 저장되고 복사된다.

* 객체가 할당된 변수를 복사 = 객체의 참조값이 복사되고, 객체는 복사되지 않는다.

 

참조에 의한 비교

객체 비교시 == 와 ===는 동일함

피연산자인 두 객체가 동일한 객체인 경우 true를 반환

 

객체 복사

 

정말 필요한 경우 :

1. 새로운 객체를 만든 다음,

2. 기존의 객체 프로퍼티들을 순회,

3. 원시수준까지 프로퍼티를 복사.

let user = {
	name : "John",
    age : 30
};

let clone = {}; // 새로운 빈 객체

// 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
	clone[key] = user[key];
}

// 이제 clone은 완전히 독립적인 복제본이 되었습니다.
clone.name = "Pete"; // clone의 데이터를 변경합니다.

alert( user.name ); // 기존 객체에는 여전히 John이 있습니다.

 

또는 Object.assign 이용 : 얕은 복사 (shallow copy) 

Object.assign(dest, [src1, src2, src3 ....])

dest = 목표로 하는 객체

src1, src2, ... 복사하고자 하는 객체

 

 

 

중첩 객체 복사

프로퍼티가 다른 객체에 대한 참조 값인 경우 복사를 하고 싶을 때 사용 = deep cloning (깊은 복사)

Structed cloning algorithm

(자바스크립트 라이브러리 lodash 의 메서드인 _.cloneDeep(obj)를 이용하면 

알고리즘을 직접 구현하지 않고 깊은 복사 처리 가능)

 

객체 지향 프로그래밍 (object-oriented programming, OOP)

참고서 : <GoF의 디자인 패턴> 에릭 감마 , <UML을 활용한 객체지향 분석 설계> 그래디 부치

 

메서드 : 객체 프로퍼티에 저장된 함수

 

function을 생략해도 메서드를 정의할 수 있다. 

 

this : '현재 객체' 를 나타낸다.

메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다. 

( 메서드는 this로 객체를 참조한다. )

화살표 함수 =>는 고유한 this 를 가지지 않는다.

 

 

생성자 함수 (constructor function)

1. 함수 이름의 첫 글자  = 대문자

2. new 연산자를 붙여 실행

3. new 와 함께 호출하면 내부에서 this 가 암시적으로 만들어지고, 마지막엔 this 가 반환)

 

- 생성자 함수에는 return 문이 없다.  (this 가 역할을 대신)

 

 

소감

전보다는 조금 더 이해가 되는 것 같다. 더이상 외계어가 아니라는 사실이 좋다. 파이팅. 

 

출처 : 스파르타 코딩 클럽 내일 배움 캠프 [자바스크립트 핸드북]