[JavaScript] Object 오브젝트 1

13958 단어 JavaScriptJavaScript

본 정리글은 인프런 김영보 강사님의 자바스크립트 ES6+ 기본 강의를 수강하고 정리한 글입니다.

자바스크립트 ES6+ 기본

📖 Object 오브젝트 1

📌 is()

구분데이터(값)
형태Object.is()
파라미터비교 대상 값
파라미터비교 대상 값
반환타입까지 같으면 true, 아니면 false
  • 두 개의 파라미터 값과 값 타입을 비교
    -- 같으면 true, 아니면 false 반환 [코드 1]
// [코드 1] is()
const result = Object.is(10, "10");
log(result);

const one = {}, two = {};
log(Object.is(one, two));

[실행 결과]
false
false

  • 오브젝트 비교 목적이 아님
    -- []와 []비교, {}와{}비교는 false

  • JS 값 비교 방법
    -- 값과 타입까지 모두 비교: ===
    -- 타입은 비교하지 않고 값만 비교: == [코드 1]

// [코드 1] JS 값 비교 방법
log((undefined == null));
log((undefined === null));
log(Object.is(undefined, null));

[실행 결과]
true
false
false

  1. Object.is()는 타입까지 비교

  2. ===에서 =을 수를 세는 것 보다 Object.is()가 가독성이 좋을 수 있다.

  3. 타이핑 실수(==)를 피할 수 있지만 ===에 익숙한 개발자도 있습니다.

  • Object.is()와 === 비교 차이
    -- NaN 비교 [코드 2]
    -- +0과 -0 비교 [코드 3]
// [코드 2] NaN 비교
log((NaN === NaN));
log(Object.is(NaN, NaN));
log((NaN === 0 / 0));
log(Object.is(NaN, 0 / 0));

[실행 결과]
false
true
false
true

// [코드 3] +0과 -0 비교
log((0 === -0));
log(Object.is(0, -0));

[실행 결과]
true
false


  • 활용한 형태 [코드 4]
// [코드 4] 활용 형태
function check(data){
 	if(Object.is(typeof data, "object")) 
     	log(data);  
  	else 
     	log("object 타입이 아님"); 
};
check({value: 10});
check(200);

[실행 결과]
{value: 10}
object 타입이 아님

  1. Object.is(typeof data, "object")

  2. typeof data 결과로 비교



📌 assign()

구분데이터(값)
형태Object.assign()
파라미터열거 가능 오브젝트
파라미터열거 가능 오브젝트opt 다수 작성 가능
반환첫 번째 파라미터 오브젝트
  • 두 번재 파라미터의 오브젝트 프로퍼티를 첫 번째 파라미터의 오브젝트에 복사하고 첫 번째를 반환 [코드 1]
    -- own property만 복사 : 상속받은 property는 복사 X
// [코드 1] assign()
const sports = {
  	event: "축구";
  	player: 11
};
let dup = {};

Object.assign(dup, sports);
log(dup);

[실행 결과]
{event: 축구, player: 11}



📌 첫 번째 파라미터 작성

  • 첫 번째 파라미터는 반드시 작성 [코드 1]
// [코드 1] 첫 번째 파라미터는 필수
try{
 	const obj = Object.assign(null, {}); 
} catch(e) {
 	log("null 작성 불가"); 
};

[실행 결과]
null 작성 불가

  1. 첫 번째 파라미터를 작성하지 않거나 null, undefined를 작성하면 TypeError

  • Number, String, Symbol, Boolean 값 작성 [코드 2]
// [코드 2] Number 값 작성
const obj = Object.assign(100);
log(obj.valueOf());

[실행 결과]
100

  1. 첫 번째 파라미터에 Number를 작성하고 두 번째 파라미터를 작성하지 않았습니다.

  2. Number 인스턴스를 생성하여 파라미터 값 100을 [[PrimitiveValue]]에 설정

  3. 생성한 인스턴스를 반환

  4. Boolean, String, Symbol도 같은 방법으로 처리



📌 두 번째 파라미터 작성

  • 열거 가능 오브젝트 작성 [코드 1]
// [코드 1]
let obj = {};
Object.assign(obj, {ten: 10});
log(obj);

const one = Object.create({}, {
 	book: {value: 100, enumerable: false},
  	sports: {value: 200, enumerable: true}
});
Object.assign(obj, one);
log(obj);

[실행 결과]
{ten: 10}
{ten: 10, sports: 200}


  • 오브젝트 다수 작성 [코드 2]
// [코드 2] 오브젝트 다수 작성
const book = {title: "책"};
const sports = {item: "축구"};
const obj = Object.assign({}, book, sports);
log(obj);

[실행 결과]
{title: 책, item: 축구}

  1. 두 번째 파라미터 이후에 콤마로 구분하여 오브젝트를 작성할 수 있다.

  • 값을 작성 [코드 3]
// [코드 3] 값을 작성
let obj = {ten: 10};
Object.assign(obj, undefined, null, 200);
log(obj);

const one = {un: undefined, nu: null};
Object.assign(obj, one);
log(obj);

[실행 결과]
{ten: 10}
{ten: 10, un: undefined, nu: null}

  1. 값으로 작성한 undefined, null, 200이 복사되지 않음.

  2. 열거 가능한 오브젝트가 아니기 때문


  • 값과 오브젝트를 작성 [코드 4]
    -- 값이 설정된 인스턴스 형태
// [코드 4] 값과 오브젝트 형태
const obj = Object.assign(100, {book: 200});
log(obj.valueOf()); // valueOf : primitiveValue 값 출력
log(obj.book());

[실행 결과]
100
200

  1. 100이므로 Number 인스턴스를 생성

  2. 두 번째 파라미터가 Object이므로 생성한 Number 인스턴스에 복사

  3. Number 인스턴스에 Object를 복사하는 것은 데이터 타입이 맞지 않음.

  4. Object이므로 복사가 된다는 것을 설명하기 위한 것.



📌 Deep Copy

  • Object를 할당하면 프로퍼티 값이 연동됨
    -- 한 쪽 오브젝트의 프로퍼티 값을 바꾸면 다른 오브젝트의 프로퍼티 값도 바뀜 [코드 1]
// [코드 1] 프로퍼티 값 연동()
const sports = {
  	item: "축구";
};
let copy = sports;
sports.item = "농구";
log(copy.item);

[실행 결과]
농구

  1. sports.item = "농구";

  2. copy.item 값도 바뀝니다.


  • assign() 함수로 복사 [코드 2]
// [코드 2] assign() 함수로 복사
const sports = {
  	item: "축구";
};
let copy = {};
Object.assign(copy, sports);
sports.item = "농구";
log(copy.item);

[실행 결과]
축구

  1. 연동되지 않음

  • 그래도 연동되는 형태 [코드 3]
// [코드 3] 그래도 연동되는 형태
const book = {
  	item: {title: "자바스크립트"}
};
let copy = {};
Object.assign(copy, book);
copy.item.title = "책";
log(book.item.title);

[실행 결과]
책

  1. {item: {title: "자바스크립트"}}

  2. Object 안에 Object가 있는 형태
    item.title 값이 연동됨

  3. 이것은 프로퍼티를 복사하지 않고 Object 참조를 복사하기 때문

assign() 함수는 프로퍼티를 복사하지 않고 Object 참조를 복사하기 때문

  • 연동되지 않게 하려면 프로퍼티 단위로 복사 [코드 4]
// [코드 4] 프로퍼티 단위로 복사
const book = {
  	item: {title: "자바스크립트"}
};
let copy = {};
for(let key in book) {
 	let value = book[key];
  	copy[key] = {};
  	for(let name in value) {
      	copy[key][name] = value[name];
    };
};
book.item.title = "책";
log(copy.item.title);

[실행 결과]
자바스크립트

  1. 프로퍼티 단위로 복사하면 연동되지 않지만 단계의 깊이가 유동적이면 코드가 복잡해진다.

  2. 다단계 계층 구조에서 값이 연동되지 않도록 복사하는 것을 deep copy, deep clone이라고 부름.


  • JSON 함수 활용 [코드 5]
// [코드 5] Deep Copy, Deep Clone
const book = {
 	item: {title: "자바스크립트"} 
};
const copy = JSON.parse(JSON.stringify(book));
book.item.title = "책";
log(copy.item.title);

[실행 결과]
자바스크립트

  1. JSON.stringify()로 문자열로 변환한 후 JSON.parse()로 파싱하면 연동되지 않습니다.



📌 entries()

구분데이터(값)
형태Object.entries()
파라미터열거 가능한 오브젝트
반환[[key, value]] 형태
  • 열거 가능한 오브젝트의 {key: value}를 [[key, value]] 형태로 변환 [코드 1]
// [코드 1] entires()
const obj = {music: "음악", book: "책"};
const list = Object.entries(obj);
for(let keyValue of list) {
  	log(keyValue);
};

[실행 결과][music, 음악]
[book, 책]

  1. list는 이터러블 오브젝트이다.
    --> for-of문 사용 가능

  2. [[key, value]] 형태를 Map 형태라고 부른다.
    Map은 Map 오브젝트에서 다룬다.


  • 작성한 순서가 바뀌는 경우 [코드 2]
// [코드 2] 작성한 순서가 바뀌는 경우
const obj = {10: "십", book: "책", 7:"칠"};
const list = Object.entries(obj);
for(let keyValue of list) {
 	log(keyValue); 
};

[실행 결과][7, 칠]
[10, 십][book, 책]


  • 문자열을 문자 하나씩 분리 [코드 3]
// [코드 3] 문자열 분리
const list = Object.entries("ABC");
for(let keyValue of list)
  	log(keyValue);

[실행 결과][0, A]
[1, B][2, C]

  1. 문자열은 문자 하나씩 분리하며
  2. 인덱스를 key 값으로 사용



📌 entries()

구분데이터(값)
형태Object.entries()
파라미터열거 가능한 오브젝트
반환[[key, value]] 형태
  • 열거 가능한 오브젝트의 {key:value}fmf [[key, value]] 형태로 변환 [코드 1]
// [코드 1] entries()
const obj = {music: "음악", book: "책"};
const list = Object.entries(obj);
for(let keyValue of list)
  	log(keyValue);

[실행 결과][music, 음악]
[book, 책]

  1. list는 이터러블 오브젝트

  2. [[key, value]] 형태를 Map 형태라고 부른다.
    Map은 Map 오브젝트에서 다룸.


  • 작성한 순서가 바뀌는 경우 [코드 2]
// [코드 2] 작성한 순서가 바뀌는 경우
const obj = {10:"십", book:"책", 7:"칠"};
const list = Object.entries(obj);
for(let keyValue of list)
  	log(keyValue);

[실행 결과][7, 칠]
[10, 십][book, 책]

  1. 앞의 [코드 1]처럼 key가 영문자일 때는 key 값을 분류하지 않고 작성한 대로 반환

  2. 반면, [코드 2]처럼 숫자와 문자가 섞여 있으면 숫자, 문자 순서로 분류


  • 문자열은 문자 하나씩 분리 [코드 3]
// [코드 3] 문자열 분리
const list = Object.entries("ABC");
for(let keyValue of list) {
  	log(keyValue);
};

[실행 결과][0, A]
[1, B][2, C]

  1. 문자열은 문자 하나씩 분리하며 인덱스를 key 값으로 사용



📌 values()

구분데이터(값)
형태Object.values()
파라미터열거 가능한 오브젝트
반환[value] 형태
  • 열거 가능한 오브젝트의 {key: value}를 값만 [value1, value2] 형태로 변환 [코드 1]
// [코드 1] values()
const obj = {music: "음악", book: "책"};
const list = Object.values(obj);
for(let value of list) 
  	log(value);

[실행 결과]
음악
책


  • 작성한 순서가 바뀌는 경우 [코드 2]
// [정렬하여 반환]
const obj = {10:"십", book:"책", 7:"칠"};
const list = Object.values(obj);
for(let value of list)
  	log(value);

[실행 결과]
칠
십
책

  1. 앞의 [코드 1]처럼 key가 영문자일 때는 key 값을 분류하지 않지만

  2. [코드 2]처럼 숫자와 문자가 섞여 있으면 숫자, 문자 순서로 분류


  • 문자열은 문자 하나씩 분리 [코드 3]
// [코드 3] 문자열 분리
const list = Object.values("ABC");
for(let value of list)
  	log(value);

[실행 결과]
A
B
C

  1. 문자열은 문자 하나씩 분리



📌 fromEntries()

구분데이터(값)
형태Object.fromEntries(), ES2019
파라미터이터러블 오브젝트
반환새로운 오브젝트
  • [[key, value]] 형태를 {key: value}형태로 변환 [코드 1]
// [코드 1] fromEntries()
const list = [["one", 10], ["two", 20]];
const obj = Object.fromEntries(list);
log(obj);

[실행 결과]
{one: 10, two: 20}


  • 프로퍼티 키 값이 같으면 값 대체 [코드 2]
// [코드 2] 프로퍼티 키 값이 같은 경우
const list = [["one", 10], ["one", 20]];
const obj = Object.fromEntries(list);
log(obj);

[실행 결과]
{one: 20}



📌 getOwnPropertyDescriptors()

구분데이터(값)
형태Object.getOwnPropertyDescriptors()
파라미터대상 오브젝트
반환프로퍼티 디스크립터를 포함한 오브젝트
  • Object의 프로퍼티 디스크립터를 반환
    -- 데이터 디스크립터 [코드 1]
    -- 악세서 디스크립터 [코드 2]
    -- 상속받은 오브젝트는 반환하지 않음
// [코드 1]
const obj = {music: "음악"};
const des = Object.getOwnPropertyDescriptors(obj);
for(let name in des.music)
  	log(name + ": " + des.music[name]);

[실행 결과]
value: 음악
writable: true
enumerable: true
configurable: true

  1. {music : "음악"} 프로퍼티 디스크립터 중에서 데이터 디스크립터를 반환

// [코드 2] 악세스 디스크립터
const obj = {
  	get music(){}
};
const des = Object.getOwnPropertyDescriptors(obj);
for(let name in des.music) 
  	log(name + ": " + des.music[name]);

[실행 결과]
get: get music(){}
set: undefined
enumerable: true
configurable: true

HOF :: React Currying
학교 랩실에서 단일노드 Openstack 구축하기 - Neutron(7)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage