ㅇTL

object 본문

html, javascript

object

정노르레기 2021. 6. 14. 19:47

object 만드는 방법

*object = 키와 벨류의 집합체 ! { key:value }

-const obj1 = { name:'ss' , age:4 } ;

 이렇게 가로를 이용해서 만들 수 있음 = object literal

(자바 스크립트는 클래스가 없어도 바로 오브젝트를 만들 수 있다!)

*

obj1.hasJob = true;

delete obj1.hasJob

이렇게 바로바로 아무거나 추가, 삭제가 가능 (자바스크립트가 동적언어라서!)

 

-const obj2 = new Object();

 이렇게 클래스로 만들 수도 있음 =object constructor

 

*자바스크립트는 runtime에 데이터타입 결정되는 동적인 언어

 

computed properties

ellie.hasJob = true;

console.log(ellie['hasJob']);

 

ellie['name']='junnny';

이런식으로 [] 로 접근 가능 ! ( 이 때 키는 스트링타입으로 해야함)

 

-> 코딩하는 그 순간 그 키에 해당하는 값 받아오고 싶을 때 . 씀 (코딩할땐 걍 . 을 쓰는게 맞다)

-> 정확하게 어떤 키가 필요한지모를때, 런타임에서 결정될 때 [ ] 씀

(입력받아오는 느낌. 모르는거)

* . 하면 그 키값 무조건 진짜 키여야함 함수안에서 입력받아서 key 이렇게 쓰면 안됨. 그럼 undefined !!

function a (person, key){

console.log(person.key);

}

-> 노노노 !!! . 뒤에무조건 진짜 키 값 와야함. 이럴때는 [] 써야함!!

 

property value shorthand

오브젝트 틀 미리 짜놓는것

function Person (name, age){

    //this={};

    this.name=name;

    this.age=age;

    //return this; 이거가 생략된거라고볼수잇슴

}

= constuctor function

-> 

이제

const a= new Person('ellie', 3); 

이렇게 가능

const a= {name: 'ellie', age:3 }; 이거랑 같음 !!

 

in operator

'키' in 오브젝트

-> 그 키값이 오브젝트안에 있는지 없는지 ! -> true, false ~

 

*console.clear(); -> 여태 햇던 콘솔 다지워짐

 

for .. in vs for .. of

1. 오브젝트에서는 ? for in

for(key in 오브젝트){

~~

}

이렇게 가능

 

2. 배열처럼 순차적인거 ? for of

const array=[1,2,4,5];

for(let i=0; i<array.length;i++){

~

}

->

for(value of array){

~

}

두개는 same !!

 

cloning

const user = { name: 'ellie', age:4};

const user2=user;

-> = 하면 동일한 레퍼런스를 갖게됨 ! (값 복사가 아니라 같은 레퍼런스 가리키게 됨)

-> user 를 바꿔도 user2가 바뀌고 2바꿔도 user 바뀜 ( 당연 ㄱ-)

그럼 단순 값 복사는

1. old way

const user 3 = {};

for (key in user){

    user3[key]=user[key];

}

이렇게 걍 일일이 값 복사

 

2.new~

const user4 = {};

Object.assign(user4, user);

이렇게 !

or 

const user4 = Object.assign({}, user);

( Object.assign(복사할 곳, 복사대상) 이렇게 )

* Object.assign({}, a, b, c) -> 뒤에 나오는걸로 계속 덮어씌움. 계속 새로고침 !!

'html, javascript' 카테고리의 다른 글

json  (0) 2021.06.19
array  (0) 2021.06.14
자바스크립트 데이터 타입  (0) 2021.06.02
javascript  (0) 2021.05.21
css  (0) 2021.05.18