[JavaScript ES6]객체(Object)

✨ JavaScript에서 객체(object)란?

객체는 데이터와 함수의 집합입니다.

+) 일반적으로 객체는 여러 데이터와 함수로 이루어지는데,

객체 안에 있을 때는 이들을 프로퍼티와 메소드라고 부릅니다

 

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 대부분의 모든 것은 객체입니다.

 

객체는 서로 연관되어있는 데이터를 담아내기 위한 그릇이라 생각해도되는데

이는 배열과 매우 유사한 모습을 보여준다.

 

🤔 그럼 그들의 차이점을 잠시 들여다보자

객체	배열
원하는 데이터 값(문자,숫자 등)을 지정 할 수 있다.	index 값에 숫자를 저장
key = value의 쌍이 객체 안에서 저장될때 순서가 정해져있지 않다.	index값의 순서가 정해져있다.

추가적으로 알아두면 좋은 정보로

인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용하면 된다.

다른 언어에서는 연관 배열(associative array), 맵(map), 딕셔너리(dicitionary)라는

데이터 타입이 객체에 해당한다.

var grades = {'coding':10,'log':6,'yoonmin':80};
//객체에선 index에 숫자를 사용하는 것이아닌 coding 즉 문자열을 사용한다는 점에서
//배열과 차이점을 가지게된다. key 뒤에 숫자 값들은 index에 할당된 값(value)들을 표현한다.

하나의 코드로 면밀히 살펴보자

var grades={};
//1. {}비어있는 객체(grades)를 생성
grades['coding']= 10;
grades['log']= 6;
grades['yoonmin']= 80;
//대괄호(객체 grades) 사이에 index값(key),(value)을 부여

상단의 객체 grades 안에 

grades[ key ] = value;

 

상단의 코드가 Key와 Value값을 삽입해 주었다.

 

그 결과 값은 하단의 코드와 동일하다.

var grades = {'coding':10,'log':6,'yoonmin':80};

---

🟡객체에서 Literals과 properties

Literal?

  리터럴은 데이터 그 자체를 뜻 한다.

변수에 넣는 변하지 않는 데이터를 의미하는 것이다.

const obj1 = {}; //1.{}를 이용한 기본적인 object literal
const obj2 = new Object(); //2. new(생성자)를 이용한 object constructor

const yoon = { name: "yoon", age: 4 };
console.log(yoon);

propertie?

프로퍼티는 속성이라 생각하면 된다.

yoon.hasJob = true;
console.log(yoon.hasJob);
delete yoon.hasJob;
console.log(yoon.hasJob);

자바스크립트는 다이나믹 타입 언어이다.

즉, 실행(런타임) 중에 스스로 타입을 변환하기 때문에

propertie를 나중에 선언해도 적용을 해버리는 정신 나간 짓을 보여준다.

그래서 상단의 코드가 작동을 한다....🙄

---

🟡Computed properties

propertie는 [ ] 안에 항상 string type을 작성해야 한다.

console.log(yoon.name); //정확하게 원하는 값이 있을때는 ( . )을 사용한다.(거의 . 사용)
console.log(yoon["name"]); //정확하게 어떠한 key를 사용할지 모를때 사용
yoon["hasJob"] = true;
console.log(yoon.hasJob);

function printValue(obj, key) {
  console.log(obj[key]);
}
printValue(yoon, "name");
printValue(yoon, "age");

상단의 주석에서 볼 수 있듯이 두 console.log에서 보여주는 name은

대상이 정확한지 불특정 한 지에 따라서 사용하는 방식을 다르게 한다.

---

🟡Property Value shorthand,  Consrructor Function(생성자 함수)

const person1 = { name: "bob", age: 2 };
const person2 = { name: "steve", age: 3 };
const person3 = { name: "dave", age: 4 };
const person4 = new Person("yoon", 23);
console.log(person4);
//person4를 만들때 하단의Person을 통해 만들 수 있다.

상단의 코드에서 선언한 생성자 Person은 하단의 코드를 통해 만들 수 있다.

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

person4는 생성자 함수(Person)를 통해 손쉽게 유지 보수를 할 수 있게 된다.

---

🟡in operator

in operator은 property가 객체 안에 존재하는지 체크하는 확인하는 작업을 한다.

(key in obj) <- obj안에 key가 들어가 있는지 확인한다.

console.log("name" in yoon);
console.log("age" in yoon);

---

🟡for...in , for... of

해당 문법은 실전 프로젝트를 할 때 많이 활용되는 문법이다.

for... in..

//for(key in obj)
for (key in yoon) {
  console.log(key);
} //yoon 안에있는 key를 모두 확인

for... of..

//for( value of iterable)
const array = [1, 2, 3, 4];
for (value of array) {
  console.log(value);
}

---

🟡Fun cloning

const user = { name: "yoon", age: "20" };
const user2 = user;
user2.name = "coder";
console.log(user);

user2는 user을 받음으로써 메모리에 같은 값이 저장된다.

(user는 메모리 1번을 사용 / user2는 메모리 2번을 사용)

해당 코드와 같이 user2의 name 값을 변경했을 때

user는 use2와 같은 값을 가지고 동작하기 때문에

똑같이 name 요소가 coder로 이름이 바뀌게 된다.

 

다른 방법인 Object.assign구문을 보여주겠다.

const user4 = {};
Object.assign(user4, user); //user값을 user4가 받아온다.

const user4 = Object.assign({}, user); //상단의 두코드를 다른 방식 표현

이런 식으로 Object안에 존재하는 메소드인 assing 사용할 수 있다.

assing을 사용한 다른 예제를 한번 보자.

const fruit1 = { color: "red" };
const fruit2 = { color: "blue", size: "big" };
const mixed = Object.assign({}, fruit1, fruit2); //뒤에있는 함수가 앞에를 덮어쓴다.
console.log(mixed.color); //출력:blue
console.log(mixed.size); //출력:big

해당 코드를 보면 과일(fruit)은 mixed함수를 통해 assign 되었다.

대괄호 안에 과일 1, 과일 2 값이 순차대로 저장되는 것이다.

그래서 출력 값을 낼 때 뒤에 있는함수 fruit2의 값이 호출된다. 

 

해당 글은 드림코딩 엘리님의 객체 영상을 많이 참조해 제작되었습니다.