JS Object 객체는 무엇일까?

Joah·2022년 5월 29일
0

Javascript

목록 보기
2/16
post-thumbnail

Object {key:value}

객체는 다수의 데이터를 표현할 수 있다.

예를 들어, 레스토랑 직원들에 대한 정보를 객체를 사용하지 않고 변수에 할당하자

const chief1Name = "Shannon"
const chief1Age = 29
let isShannonFulltime = false
const chief2Name = "Mike"
const chief2Age = 25
let isMikeFulltime = true
const server1Name = "Ellie"
const server1Age = 32
let isEllieFulltime = false
const managerName = "Jessica"
const managerAge = 31
let isJessicaFulltime = true
  • 변수에는 각각의 string, number, boolean 데이터가 할당되어 있다.
  • 레스토랑 직원들의 정보를 작성했다. let 키워드르 사용한 이유는 근무 스케쥴이 바뀔 가능성도 있기 때문이다.
  • 변수 이름부터 어지럽다....
  • 객체를 사용하지 않는다면 변수 나열이 필요하고 데이터가 늘어나면 코드도 길어지고 관리하기도 힘들어진다.


위의 코드를 객체(Object)를 사용하여 다시 작성해보자

레스토랑 직원의 정보를 Object로 표현하기

const shannon = {
	name: "Shannon",
  	position: ["chief", "supervisor"],
  	age: 29,
  	fulltime: false
}
const mike = {
	name: "Mike",
 	position: ["chief", "line-cook manager"],
  	age: 25,
  	fulltime: true
}
const ellie = {
	name: "Ellie",
  	position: ["server", "busser"],
  	age: 32,
  	fulltime: false
}
const jessica = {
	name: "Jessica",
  	position: ["sever", "hall manager"],
  	age: 31,
  	fulltime: true
}
  • 코드가 명확하게 짧아졌다고 보기는 어렵지만 객체를 사용하니 변수의 수는 줄어들었다.
  • 객체 안에는 다수의 다양한 데이터 타입을 작성할 수 있기 때문이다.
  • 각 레스토랑 직원별로 정리된 객체의 모습으로 깔끔하고 가독성 높은 코드를 구현할 수 있다.


객체의 프로퍼티 {key:value}

객체는 중괄호 안에 key와 value를 표현한다. key와 value의 한 쌍을 '프로퍼티(property)'라고 부른다.

Mike를 소환하자

const mike = {
	name: "Mike",
 	position: ["chief", "line-cook manager"],
  	age: 25,
  	fulltime: true
}

위의 코드로 객체를 만들때 지켜야할 규칙을 알아보자

  • property 이름은 중복될 수 없다.
  • property이름과 property값 사이에 : (콜론)으로 구분한다.
  • property를 추가할 때는 , (쉼표)를 붙여준다.
  • property 값에는 어느 type이나 가능하다(string, number, array, object, function..)

key 작명할 때 주의할 점!

let difficult = {
  'my name': 'boong',
  color: 'silver',: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군'
};
  • 객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있다.
  • color 와 같이 키에 특수문자가 없으면 따옴표를 생략하고 쓸 수 있다.


그래서 object는 뭡니까?

객체(object)는 하나의 변수에 여러가지 데이터를 한 번에 담을 수 있게 하는 데이터 형태이다. 배열과 다르게 객체는 나열되는 순서가 없다. 따라서 객체를 생성하고 console.log로 콘솔창에서 해당 객체를 확인하면 내가 작성한 객체의 순서와 다를 때도 있다. Don't panic!

객체는 {key:value}로 이루어져 있고 이를 '프로퍼티'라 부른다. key 즉, 프로퍼티의 이름은 항상 문자열이어야 한다. value로는 모든 데이터 타입이 올 수 있다. 심지어 함수까지!

객체에서 key 또는 value에 접근하는 방법이 있다. 마치 array배열에서 요소에 접근하기 위해서는 인덱스 넘버를 쓰는 것과 비슷하다. 해당 내용은 다음시간에!

profile
Front-end Developer

0개의 댓글