자바스크립트 (7)

Do_Doolly·2022년 7월 23일

JavaScript

자바스크립트 TIL

목록 보기

7/15

글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!

🔜 객체

자바스크립트에는 객체라는 개념의 데이터 타입이 있다. 이전에 데이터 타입에 대해서 포스팅 할 때, 기본형(Primitive-type)과 참조형(Reference-type)이 있다고 했는데 객체는 참조형타입이다.

다른 언어에서 쓰이는 객체의 의미와 조금 다르다!

보통 클래스를 이용해서 생성한 인스턴스를 포괄적으로 객체라고 부르는 반면, 자바스크립트에서는클래스 선언 없이 객체를 만들어서 사용할 수 있다.

말은 객체이나 사용법과 의미는 자바의 Map 컬렉션 클래스, C++의 Map 컨테이너, 파이썬의 Dictionary 타입과 같다.

자바스크립트 객체의 중요한 특징이라하면, 배열에서는 각 요소에 접근할 때 인덱스라는 숫자를 이용해서 접근했지만, 객체는 'Key'라는 문자열을 통해 접근한다.

또한 객체 안에는 특이하게 함수를 넣을 수도 있는데, 객체 내부에 있는 함수를 메소드라고 부른다.

자바에서 쓰이는 메소드(함수)의 의미와 다르다!

🧐 객체의 생성과 사용

객체는 '키 : 값' 의 프로퍼티들로 구성된다.

프로퍼티의 이름인 키는 반드시 문자열로 작성해야 하며, 값에는 원시 데이터 타입, 객체, 배열, 함수 등 어떤 것도 올 수 있다.

객체의 프로퍼티 입력 규칙은 아래와 같다.

프로퍼티의 이름(key)은 반드시 문자열
프로퍼티의 이름은 중복될 수 없음
프로퍼티의 이름과 값은 콜론(:)으로 구분
프로퍼티를 추가할 때는 쉼표(,) 추가
프로퍼티의 값(value)은 어느 데이터 타입이나 들어갈 수 있음

객체를 만드는 방법은 배열과 비슷하게 크게 두 가지가 있다.

1) 객체 리터럴을 통한 생성

배열과 같이 쉽게 객체를 만드는 방법이고, MDN에서도 이 방법을 권장한다.

// 3가지 프로터피를 가진 객체 선언
const obj1 = {
  'key1': 1,
  'key2': 'a',
  'key3': 'hi'
}

console.log(JSON.stringify(obj1));
// { "key1" : 1, "key2" : "a", "key3" : "hi" } 출력

2) 생성자 함수를 통한 생성

생성자 함수를 이용할 때는 주로 객체를 여러개 생성해야 하는 상황일 때 사용하고, 프로퍼티를 처음에 입력하지 않고 나중에 추가하는 스타일로 생성한다.

프로퍼티를 추가할 때는 점 표기법(.)과 대괄호 표기법([])을 사용한다.

물론 객체 리터럴을 이용해도 나중에 프로퍼티를 추가할 수 있다.

// 빈 객체 생성
const obj2 = new Object();

// 프로퍼티 추가 (점 표기법)
obj2.key1 = 5;
obj2.key2 = 'c';
// (대괄호 표기법)
obj2['key3'] = 'hello';

console.log(JSON.stringify(obj2));
// { "key1": 5, "key2": "c", "key3": "hello" } 출력

3) 프로퍼티 추가 및 수정

객체 리터럴을 통해 만든 obj1에 프로퍼티를 추가하고 싶다고 하자.

생성자 함수를 만들 때 사용한 접근 방법처럼 손쉽게 프로퍼티를 추가하거나 수정할 수 있다.

// key1 수정
obj1.key1 = 10;
// key4 추가
obj1.key4 = [1, 2, 3];

console.log(JSON.stringify(obj1));
// { "key1" : 10, "key2" : "a", "key3" : "hi", "key4": [1, 2, 3] } 출력

4) 프로퍼티 삭제

프로퍼티를 삭제하기 위해선 delete 메소드를 이용해야 한다.

delete obj1.key1;
delete obj1.key4;

console.log(JSON.stringify(obj1));
// { "key2": "a", "key3": "hi" } 출력

🔚 객체 메소드

기본적으로 제공되는 객체 메소드도 상당히 많은데, 그 중 일부만 나열한다.

Object.keys()

객체가 가지고 있는 키들의 목록을 배열로 반환

Object.values()

객체의 값으로 이루어진 배열을 반환

for-in 반복문

객체를 순회하기 위한 for 반복문
key값으로 순회

// 객체 생성
const obj1 = {
  'key1': 1,
  'key2': 'a',
  'key3': 'hi'
}

// for-in으로 객체 값 조회 (대괄효 표기법으로 접근)
for (let key in obj1) {
  console.log(obj1[key]);
}
// obj1.key1 = 1
// obj2.key2 = a
// obj2.key3 = hi 출력