• Home
  • About
    • ming photo

      ming

      studying

    • Learn More
    • Twitter
    • Facebook
    • Instagram
    • Github
    • Steam
  • Archive
    • All Posts
    • All Tags
    • All categories
  • categories
    • HTML+CSS+JavaScript
    • JAVA
    • Algorithm
    • DB
    • JSP
    • 정보처리기사
    • Spring
    • Thymeleaf
    • 기술면접
  • Projects

JS-ellie-object

01 Feb 2021

* object

1.Literals and properties

- one of the JavaScript's data types.
- a collection of related data and/or functionality
- Nearly all objects in JavaScript are instances of object
- object - { key : value}; => object는 key 와 value의 집합체 이다

** object 사용방법

```JavaScript
const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax
```

```JavaScript
// object 미사용 코드
const name = 'mingki';
const age = 4;
print(mane, age);
function print(name, age){
    console.log(name);
    console.log(age);
}

// object 사용 코드
const mingki = {name:'mingki',age: 4 };

function print(person){
    console.log(person.name);
    console.log(person.age);
}

print(mingki)

```

2.Computed properties ( 계산된 properties) - key should be always string

```JavaScript
console.log(ellie.name); // . 을 통해 데이터(property)에 접근 => key에 해당하는 값을 가져오고 싶을 때 사용
console.log(ellie['name']); // []를 이용해 데이터(property)에 접근 => 정확하게 어떤 key가 필요한 지 모를때 사용

```

3.Property value shorthand

```JavaScript
const person1 = { name: 'bob', age:2};
const person2 = { name: 'steve', age:3};
const person3 = { name: 'dave', age:4};

// Property value shorthand
const person4 = new Person('mingki', 30); // 함수를 이용해 값만 전달 
console.log(person4)
```

4.Constructor function

```JavaScript
function Person(name, age){ // 첫글자를 대문자로 시작 하도록 한다
    // this = {}; => 생략
    this.name = name; // this 를 사용
    this.age = age;
    // return this; => 생략
}

```

5.in operator : property existence check (key in obj) : 해당하는 obj 안에 key의 유무 확인

```JavaScript
console.log('name' in mingki); // true 출력
console.log('random' in mingki); // false 출력

```

6.for..in vs for..of

```JavaScript
// for (key in obj)

for(key in ellie){ // ellie가 가지고 있는 key들이 블럭을 돌 때마다 값이 key라는 지역변수에 할당이 된다
    console.log(key); // ellie 안에 있는 모든 key들이 출력된다
}

// for ( value of iterable) : obj 를 쓰는것이 아니라 배열, 리스트 와 같이 순차적으로 반복적인 것들을 사용한다
const array = [1,2,3,4];
for(value of array){ // array 에 있는 모든 값들이 value에 할당 되면서 블럭 안에서 순차적으로 출력 OR 계산
    console.log(value);
}
```

7.cloning

  • Object.assign(dest, [obj1, obj2, obj3…])

          const user = { name: 'ellie', age: '20'};
          const user2 = user; // user가 가지고 있는 값들이 user2에도 똑같이 할당된다
          user2.name = 'coder'; // user2 의 name 변경
          console.log(user); // user 의 name 도 coder로 바뀐다
    
          // old way ( obj 복제 )
          const user3 = {}; // 빈 obj 생성
          for (key in user) { // obj 반복하면서 수동적으로 값을 할당 
              user3[key] = user[key]; // user3 의[key]에는 = user에 있던 [key] 를 할당 해준다
          }
          console.log(user3); // 값들이 복사되어 있다
    
          Object.assign() // assign 은 복사하고자 하는 target 과 복사 하려고 하는 source 를 같이 전달해주고 return 값은 target 과 source 가 혼합된 값이 리턴된다
          const user4 = {};
          Object.assign(user4, user); // target : user4 , source : user
          console.log(user4); // 복사된 value
    


Share Tweet +1