자바스크립트 객체

  

객체

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다.

 
배열에서는 데이터의 순서가 중요한데
객체는 그렇지 않다.
 
키-값 쌍 프로퍼티로 데이터가 저장된다.
어디에 있던 키를 써서 값을 가져올 수 있다.
 
그리고 저장된 데이터가 무엇인지 표현되기 때문에 무슨 데이터 인지알기도 쉽다.
 

객체 생성

배열처럼 객체도 참조 타입이다.
생성 하는 법은 배열과 같다.

const object = {}

이러면 빈 객체가 생성 된다.
 
키-값 쌍을 이용해 생성하려면

const person = {firstName : 'Tom', lastName: 'Mason'}

키, 콜론(:) , 값 으로 구성하고 각 쌍은 쉼표(,)로 구분한다
 
객체에는 서로 다른 타입들도 넣을 수 있어서 다양한 표현이 가능하다.
 

데이터 엑세스

이제 객체에 생성한 값에 접근하는 법을 알아보자.
 
위에 만들어둔 person에 Tom 이라는 값을 가져오려면
두가지 방법이 있다.
 
#1

object["key"]

person["firstName"] // "Tom"

#2

object.key

person.firstName // "Tom"

이 두 가지에는 차이점이 있다.
 
일단 객체가 어떻게 생성되는지 과정을 알아야 한다.
객체가 만들어 질때 키값에 숫자가 오든, 불리언이 오든, 문자열이 오든간에
모두 문자열로 변환된다.
 
그래서 #1 에 [ ] 안에는 " 문자열 " 을 넣어줘야 한다.
그렇지 않으면 변수로 인식되서 찾을수 없다는 에러가 나온다.
 
그것이 바로 차이점이다.
 
변수로 인식이 된다는 말은 변수를 넣을 수 있다는 뜻이다.
 
#2 에는 무조건 key 값과 같은 표현만 넣어야 값을 얻을 수 있지만.
 
 

const person = {firstName : 'Tom', lastName: 'Mason'}

const name = "firstName";

person[name] // "Tom"

위처럼
#1 은 변수로 지정된 키를 넣어도 값에 접근 할 수 있다.
유동적인 상황에는 #1 을 이용해 해결하자
 

객체 수정

이제 생성, 접근에 대해 알았으니
수정하는 법에서 알아보자
 
학생들이 시험 본 상황이 있다.

const midTerm = {sujin : 94, minsu:34, jinho:55}

 
채점을 잘못해서 학생들의 점수를 업데이트 하려고한다.
 
minsu 는 사실 100점인데 채점이 밀려서 34점으로 나왔다.

midTerm.minsu = 100;
// midTerm["minsu"] = 100;

둘다 같은 결과로 minsu의 점수가 반영된다.
 
이제 미나라는 학생의 점수를 새로 반영해야한다.

midTerm.mina = 80;
// midTerm["mina"] = 80;

console.log(midTerm) // {sujin : 94, minsu:100, jinho:55, mina:80}

미나라는 학생의 점수도 추가 되었다.
 
같은 타입이 아니여도 변경이 가능하다.
배열 수정과 굉장히 유사하다
 

배열과 객체 네스트

객체를 배열안에 넣어서 좀더 많은 데이터를 효율적으로 관리할 수 있다.
json 파일을 보다보면 객체안에 배열안에 객체가 있고 또있고
여러번 중첩되어있는 데이터들을 볼 수 있다.
 
접근하는 법은 객체에 접근하는 법과 배열의 접근하는 법을 응용하면 다 할 수 있다,
https://jjaong34.tistory.com/16

자바스크립트 배열

배열의 접근하는 법은 배열 포스팅글에서 확인 가능하다