자바스크립트 - 객체 메소드 정리

 

 

자바스크립트에서 객체를 어떻게 선언하고, 사용할 수 있는지 알아보자.

 

먼저 객체는 {}(중괄호)로 감싸져 있고, :(클론)으로 구분된 이름/값 쌍들이 , (쉼표)로 분리된 목록의 형태이다.

다시 말하면 객체는 이름과 값으로 구성된 프로퍼티의 집합이라고 할 수 있다.

위에서 propertyName1,2로 나누었는데, 프로퍼티 이름은 중복이 되면 안 되기 때문에 숫자로 구분해 놓았다.

 

객체를 만들때는 규칙

1. property 이름은 중복될 수 없다.

2. property이름과 property값 사이에 :(콜론)으로 구분한다.

3. property를 추가할 때는 , (쉼표)를 붙여준다.

4. property 값에는 어느 type이나 가능하다.(string, numberm array, object, function..)

 

해당 객체의 property값을 접근방법

객체이름.프로퍼티이름 or 객체 이름["프로퍼티 이름"]형식으로 접근한다.

대괄호 표현은 변수를 사용할 때 쓰는 것이 좋다.

변수로 접근할 때는 항상 대괄호로 접근해야 한다.

단, 스페이스가 포함된 키와 숫자로 된 키는 대괄호로 접근해야 한다.

console.log(difficult.my name); // 오류
console.log(difficult.33); // 오류

console.log(difficult['my name']); // 접근 성공
console.log(difficult['33']); // 접근 성공

 

객체의 특징

1. 객체는 순서가 없는 데이터 모음이다.

2. 객체는 키(key)-값(value) 쌍으로된 데이터의 모음으로써 순서가 뒤 바뀌어도 아무 상관없다.

3. 배열처럼 순서대로 index로 접근하는게 아니라 키로 접근하기 때문이다.

4. 키의 값(value)에는 텍스트, 숫자 뿐만 아니라 함수, 객체도 넣을 수 있다.

5. 객체의 키(key)에는 스페이스, 한글, 특수문자 등이 들어갈 수 있다.

let difficult = {
  'my name': 'boong',
  color: 'silver',
  키: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군'
};

단, color와 같이 키에 특수문자가 없으면 따옴표를 생략하고 쓸 수 있습니다.

 

프로퍼티(property) 할당

객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)된다.

아직 없던 키에 접근하면 프로퍼티를 추가할 준비는 되어있지만, 값이 없다.

이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가된다.

 

객체의 Method(메서드)

객체에 저장된 값이 함수일 때, 메서드라고 부른다.

예를 들어, console.log();의 형태를 보면 console도 객체의 형태를 가진다.

console 다음에 dot(.)으로 프로퍼티를 접근했고, log라는 키의 값은 함수인 것을 알 수 있다.

즉, log는 console이라는 객체의 메서드이다.

객체에 메서드 정의 방법 

// 객체의 메서드 정의
let methodObj = {
  do: function() {
    console.log('메서드 정의는 이렇게');
  }
}

// 호출 방법
methodObj.do();

 

객체는 reference로 저장된다

객체를 변수에 저장하면 객체 리터럴 자체가 저장되는 것이 아니라 reference 즉, 메모리의 주소가 저장된다.

결과가 왜 false일까?

그 이유는 객체를 변수에 저장할 때, 객체 자체를 그대로 저장하는 것이 아니라 객체가 담긴 어느 메모리의 reference를 저장하기 때문이다.

하지만, 객체 안에 담겨있는 프로퍼티의 값은 reference의 값이 저장된 것이 아니기 때문에 수정이나 비교가 가능하다.

왜냐하면, reference가 바뀌는 것이 아니라 객체 내부의 프로퍼티 값이 수정되는 것이기 때문이다.

 

객체가 가진 메서드(Method)

Object.keys()

Object.keys 메서드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메서드이다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

 

Object.values()

Object.values()는 객체의 키가 아닌 값으로 이루어진 배열을 리턴합니다.

 

Object.entries()

Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴합니다.

각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 됩니다.

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

 

객체를 순회하는 방법 for-in

객체를 순회하는 방법은 for-in 문이다.

반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6에서 추가된 문법이다.

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할 수 있게 만든 ES6 문법이다.

이 for-in 문은 인덱스의 값으로 무엇을 할당하고, 반복문이 몇 번 돌아야 할지를 자바스크립트 엔진 내부에서 자동으로 결정하게 된다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
}

이렇게 객체를 가지고 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가,

숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 된다.