[JS] 객체(Object) 알아보기

세상의 대부분의 정보는 하나의 데이터로 이루어지지 않고 

많은 데이터들이 모여 만들어진다.

 

예를 들어 사람에 대한 정보를 얻을 때에도

이름이라는 하나의 데이터만 알아도 좋지만

이름, 성별, 나이, 출신 등 많은 데이터를  알면 더 자세한 정보를 얻을 수 있다.

이런 관련있는 데이터들을 모두 묶어서 하나의 정보로 나타내는 것이 객체(Object)이다.

---

그렇다면 객체는 어떻게 사용하는 것일까? 

let information = {}

우선 변수를 하나 만들어 주고 변수 안에 들어 갈 내용을 { }안에 넣어준다.  (배열[ ] 와 헷갈리지 않기)

 

예를 들어 이름, 나이, 성별이라는 데이터를 가진 객체를 만들고 싶다면

let information = {
  name: "James",
  age: 18,
  gender: "man"
}

{ } 안에 이름, 나이, 성별을 각각 넣어 주면 된다 

또한 각각의 데이터들 사이에는 ,을 작성해 데이터들을 구분해 준다.

---

이 정보를 어떻게 꺼낼까?

 

let information = {
  name: "James",
  age: 18,
  gender: "man"
}

console.log(information)

정보에 대한 모든 내용을 알고 싶다면 

console.log(변수명)을 작성하면 된다.

---

만약 모든 데이터를 알고 싶은 것이 하니라 

하나의 데이터만 보고 싶을 수도 있다.

그럴 때는 console.log(변수명.키값)

예시)

console.log(information.name)

console.log(information.age)

console.log(information.gender)

let information = {
  name: "James",
  age: 18,
  gender: "man"
}

console.log(information.name)

 

다른 방법으로는 배열과 비슷하게 접근하는 것이다.

변수명["키값"]을 작성하므로써 배열과 비슷하다.

예시)

console.log(information["name"])

console.log(information["age"])

console.log(information["gender"])

let information = {
  name: "James",
  age: 18,
  gender: "man"
}

console.log(information["name"])

---

정보의 값을 바꾸고 싶다면?

let information = {
  name: "James",
  age: 18,
  gender: "man"
}

information.name = "Mike"
console.log(information.name)

중간에 객체 안에 있는 데이터의 값을 바꾸고 싶을때가 있을 것이다.

그럴 때는 위의 information.name = "Mike" 코드처럼 바꿔 주면 된다.

물론 information["name"] = "Mike" 도 가능하다.

---

많은 양의 정보를 담아야 할 때는 어떻게?

위의 예시들 처럼 한 사람의 정보가 아니라 많은 사람의 정보를

가지고 있으려면 어떻게 해야할까?

바로 배열을 사용하는 것이다.

let information = [
  {name: "James", age: "24", gender:"M" },
  {name: "Mike", age: "30", gender:"M" },
  {name: "Jackson", age: "21", gender:"M" },
  {name: "Ann", age: "15", gender:"W" },
  {name: "Aria", age: "31", gender:"W" },
  {name: "Amy", age: "25", gender:"W" },
]

console.log(information)

변수를 선언하고 여러개의 객체를 배열 [ ]에 묶어 준다.

다시 말해 변수 = [{객체1}, {객체2}, {객체3}, {객체4}....] 

이렇게 한 후 console.log(information)를 작성해 결과를 보면 모든 사람의

정보가 출력된다.

만약 여기서도 한 사람의 정보만 보고 싶다면

let information = [
  {name: "James", age: "24", gender:"M" },
  {name: "Mike", age: "30", gender:"M" },
  {name: "Jackson", age: "21", gender:"M" },
  {name: "Ann", age: "15", gender:"W" },
  {name: "Aria", age: "31", gender:"W" },
  {name: "Amy", age: "25", gender:"W" },
]

console.log(information[0])

찾고 싶은 사람의 인덱스 번호를 적어주면 된다.

console.log(information[0])라고 적었으면 이름이 James인 사람의 정보가 출력될 것이다.

 

또 여기서 그 사람의 나이만 알고 싶다면

let information = [
  {name: "James", age: "24", gender:"M" },
  {name: "Mike", age: "30", gender:"M" },
  {name: "Jackson", age: "21", gender:"M" },
  {name: "Ann", age: "15", gender:"W" },
  {name: "Aria", age: "31", gender:"W" },
  {name: "Amy", age: "25", gender:"W" },
]

console.log(information[0].age)

console.log(information[0].age)만 작성하면 나이만 알 수 있다.

물론 앞에서 본 console.log(information[0]["age"])도 가능하다.