JavaScript (ES6) - Object

글을 작성하기에 앞서 이 게시글의 지식은 유튜브 드림코딩 by 엘리님의 동영상이 출처임을 알려드립니다.

https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7

 

 

Object 생성하는 방법

 

const obj1 = {name: 'song' , age: 25};

 

이런 식으로 만들 수도 있다

이 방법을 'object literal' 이라고 하며

 

const obj2 = new Object();

 

클래스를 이용하여 new 키워드로 생성하는 방법도 있다

이 방법을 'object constructor' 이라고 한다.

​

자바스크립트에서는 클래스가 없어도 괄호 {} 를 사용하여 오브젝트를 생성할 수 있다.

​

​

자바스크립트에서는 이미 아래와 같이 name과 age를 정의했음에도 불구하고 또 다른 프로퍼티를 생성할 수 있다

 

const song = {name: 'song' , age: 25};

song.hasjob = true;

 

이렇게 동적으로 생성하게 되면 유지 보수가 힘들다

그러므로 가능하면 이것을 피해서 코딩할 것 !

 

 

추가로 프로퍼티의 삭제도 가능하다

 

delete song.hasjob;

 

짚고 넘어가야 할 부분은

Object는 key와 value의 집합체이다

​

여기서 key는 object로 접근할 수 있는 변수, 즉 프로퍼티와

그 프로퍼티가 가지고 있는 값인 value로 이루어져 있다

 

 

---

 

Object ['key'] / Computed properties

 

 

지금까지 오브젝트 안의 프로퍼티에 접근하는 방법은

 

console.log(song.name);

 

위와 같이 . 으로 접근하는 방법이 있었는데

또 다른 방법이 존재한다

 

console.log(song['name']);

 

오브젝트 안에 name 이라는 변수의 이름을 string 형태로 접근이 가능하다

( 꼭 'name' 과같이 따옴표 사이에 존재해야 한다 )

​

이렇게 두 가지로 접근이 가능하다 !

​

아래와 같은 방법을 Computed properties 라고 한다

​

이 방법을 쓰는 경우는

 

function printValue(obj, key) {
  console.log(obj.key);
}

printValue(song,'name');

 

위와 같이 obj.key 라는 것은 song 오브젝트에 key라는 값이 있냐고 물은 것이나 다름없다 그래서 결과값은

​

undefined

​

여기서 song 오브젝트의 key를 불렀을 때 name이 호출하는 방법은

Computed properties 를 사용하면 된다

 

function printValue(obj, key) {
  console.log(obj[key]);
}

printValue(song,'name');

 

위와 같이 [] 안에 key를 호출하면 song 오브젝트 안에 name을 호출하게 되어서 정상적인 값인 song이 출력된다

​

동적으로 키에 관련된 value 를 받아와야 할 때 유용하게 쓸 수 있다.

 

 

---

 

 

Property value shorthand

 

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

 

위와 같이 person이라는 오브젝트를 3가지 만들어 놓았다

여기서 4번째 person을 만들려고 할 때 또 위와 같이 번거롭게 이름과 나이를 일일이 작성해야 한다

​

이를 더 편하게 하기 위하여 함수를 사용한다

 

function makePerson(name, age) {
  return{ 
    name: name,
    age : age,
  };
}

const person4 = makePerson('song', 25);

 

위와 같이 makePerson이라는 함수를 생성하고 매개변수로 name 과 age를 받아

프로퍼티로서 오브젝트에 포함되게 한다

​

여기서 자바스크립트에서는 Property value shorthand 라는 기능이 있어서 아래와 같이 사용한다

 

function makePerson(name, age) {
  return{ 
    name,
    age,
  };
}

 

key와 value의 이름이 동일하다면 name : name 과같이 할당을 생략할 수 있다

​

위와 같이 해준다면 정상적으로 오브젝트가 생성이 된다 !

​

 

 

---

 

 

Constructor function

 

 

위에서 살펴본 makePerson 이라는 함수는 클래스와 비슷한 개념이라고 보면 된다

​

그래서 클래스가 존재하지 않던 자바스크립트에서는 위에서 알아본 방식으로 오브젝트를 생성하곤 했다

​

이제 제대로 살펴보자

 

function Person(name, age) {
  this.name = name;
  this.age = age;
}

 

위와 같이 오브젝트를 생성하는 함수의 경우 이름이 대문자로 시작한다 'Person'

​

그리고 return 을 사용하지 않고 this 를 사용하여 value를 key에 할당한다

​

결국 this에 새로운 프로퍼티를 넣고 this 를 return 해주는 함수이다

​

이를 Constructor function 이라고 한다

 

 

---

 

in operator

 

 

in operator는 해당하는 오브젝트 안에 key가 있는지 확인하는 것이다

 

console.log('name' in song);

 

name이라는 key가 song이라는 오브젝트 안에 존재하는지 확인하는 것

결과는 true 또는 false가 출력된다

​

 

---

 

 

for.. in vs for.. of

 

 

for .. in 은 프로젝트를 할 때 아주 유용하게 쓰인다

 

 

for(key in song) {
  console.log(key);
}

 

위와 같이 for .. in 을 사용하면 for 문안에서 song에 있는 값이 key에 배열로 할당되어 출력하면

song 오브젝트에 존재하는 모든 key가 출력된다

​

모든 키들을 받아와서 쓸 때 for .. in 을 사용하면 좋다

​

 

 

다음은 for .. of 

 

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

for( let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

 

보통 위와 같이 array 라는 배열의 값을 for 문을 이용하여 array의 값을 출력하지만

​

이렇게 사용하면 코드가 길어져 좋지 않다

​

for(value of array) {
  console.log(value);
}

 

위와 같이 for .. of를 사용하게 되면 array에 있는 값이 value에 할당되면서 순차적으로 출력이 된다

​

기능은 같지만 더욱 편리한 기능이다

​

 

 

---

 

 

cloning

 

cloning에 대해 예시를 통해 알아보자

 

const user = { name: 'song', age: '25' };
const user2 = user;

 

위와 같이 user라는 오브젝트를 생성하고 user2에 user 오브젝트를 넣어주었다

​

이 경우에는 user2가 user가 가리키는 값을 동일하게 가리킨다는 말이 된다

​

그럼 user2에 value를 다른 값으로 변경한다면 어떻게 되는지 알아보자

 

user2.name = 'coder';
console.log(user);

 

위와 같이 user2의 name 을 coder로 변경해 주고

user 객체를 출력하면

 

{name: "coder", age: "25"}

 

위와 같이 name이 coder로 바뀌어 있는 것을 확인할 수 있다