JS - Objects 객체에 대한 모든 것 - 1

JS - Objects 객체에 대한 모든 것 링크

1. JS - Objects 객체에 대한 모든 것 - 1
2. JS - Objects 객체에 대한 모든 것 - 2
3. JS - Objects 객체에 대한 모든 것 - 3
4. JS - Objects 객체에 대한 모든 것 - 4
5. JS - Objects 객체에 대한 모든 것 - 5

 

 

현재 JS - Objects  객체에 대한 모든 것 1 ~5 번 글 중

 

1번 글은 자바스크립트의 객체에 대해서 기본적인 사용법 혹은 문법에 대해서 설명은 하겠다.

그리고 2번 글의 내용부터는 자바스크립트이 프로토타입 이라는 내부 메서드의 집합체가 있는데

 

자바스크립트 언어는 프로토타입 기반의 언어이기 때문에 좀 더 자바스크립트에 대해서 깊이 알고자 한다면

프로토타입의 개념을 이해해야 한다.

 

이 프로토타입의 개념을 이해 해야지만 2번 글 부터 이해하는 것이 쉬울 것이다.

아래 프로토타입에 관련된 내용을 정리한 글이 있는데 읽어보는 것을 권장한다.

 

프로토타입 링크페이지 ☜

 

 

 

 

 

▶ Syntax 

객체는 표현할 때 2가지 형태로 표현할 수 있다.

// 첫 번째 표현 방법 (리터럴 방식)
var objA = {
	a:15
}


// 두 번째 표현 방법 (new 키워드를 이용한 생성방식)
var objB = new Object();
objB.a = 15;

위 코드에서 보면 두가 형태로 오브젝트를 선언해서 사용할 수 있는데 둘 다 같은 오브젝트이다. 

근데 둘 차이점은 리터럴 방식은 하나 이상의 키/ 값을 계속해서 추가해서 사용이 가능한데,

 

두 번째 new 키워드를 이용한 생성 방식은 대입하는 방식으로 하나씩 하나씩 추가해서 사용해야 한다.

오브젝트 사용할 땐 첫 번째 방식인 리터럴 방식으로 사용하는 것을 권장한다.

 

 

▶ object 객체 접근 방법에 대한 종류

var idx = 'a';

var obj = {
	a:10
}

obj.a; // 속성 접근(프로퍼티 액세스)

obj['a']; // 키 접근(키 액세스)

obj[idx]; // 키 접근(키 액세스)


//==============================//

var str = 'JS_A';

var objA = {
	[str + 'A']: '안녕',
    	[str + 'B']: 'HI'
}

console.log(objA['JS_AA']); // 안녕
console.log(objA['JS_AB']); // HI

위 예시 코드처럼 프로퍼티 접근하는 방식은 일반적으로 사용을 한다.

또한 키 접근 방식으로도 사용을 하니 접근하는 방식을 알아두면 코딩할 때 여러 가지 방법으로

프로그래밍을 할 수 있으니 익혀두자.

 

 

 

▶ object 복제, 복사, copy (duplicating Objects)

//------------ 예제 1 -------------//

var oldObj = {
  a:10
}

var newObj = Object.assign( {}, oldObj ); // 이 복사(복제)하는 방법은 ES6에서 정의됨.
console.log(newObj.a); // 10
newObj.a = 3;

console.log(newObj.a); // 3
console.log(oldObj.a); // 10

//------------ 예제 1 -------------//


//------------ 예제 2 -------------//
var objA = {
  a:3,
  b:5,
  c:10
}

var objB = {
  a:10,
  d:20
}

var newObj2 = Object.assign( objA, objB );
console.log(newObj2);

//------------ 예제 2 -------------//

오브젝트를 복사(복제) 하는 방법은 ES6에서 정의된 Object.assign을 사용하면 된다.

예제 1은 빈{} 오브젝트에 oldObj 오브젝트를 복사해서 newObj에 넣는 예제이다.

 

그래서 복사(복제)를 한 후에 console.log(newObj.a); 는 10을 출력하고,

그리고 newObj.a 에 새로운 값 3을 다시 할당해서 newObj.a 와 oldObj.a 를 다시 찍어봤더니 3과 10이 찍혔다.

 

결론은 둘 newObj와 oldObj는 독립적으로 존재하며, 서로의 값을 공유하지도 않고 있다.

즉, oldObj를 newObj에 복사해서 두 개의 오브젝트 newObj와 oldObj는 각기 다른 독립적인 오브젝트이다.

 

예제 2는 objA와 objB를 각각 선언하고 각 오브젝트의 프로퍼티 중 a만 중복되게 일부러 선언해 놓고

두 개를 복사하면 어떤 결과가 나올지 주목해보자.

 

Object.assign(타깃이 될 오브젝트, 복사할 오브젝트);

var newObj2 = Object.assign( objA, objB ); 이 구문의 결과는?

 

 

이렇게 나온다. 설명하자면 objA 오브젝트에 objB를 내용을 복사할 것이다.

근데 두 개의 오브젝트 중 a속성(프로퍼티)이 있다.

 

서로의 오브젝트의 속성(프로퍼티) a의 값은 서로 다르다.

그리고 서로 간에 속성(프로퍼티)이 없는 부분도 있다.

 

자, 이 처럼 objA(타깃이 될 오브젝트)에 objB(복사할 오브젝트)를 복사해서 같은 속성(프로퍼티)이 있으면

objB(복사할 오브젝트)의 값을 objA(타깃이 될 오브젝트)의 값을 집어넣는다.

 

그래서 속성(프로퍼티) a의 값은 objB의 값 10이 복사해져서 넣어지고,

objB(복사할 오브젝트)의 속성(프로퍼티) d는 복사가 돼서 위 결과 화면이 나온다.