[JavaScript] Object 객체

철밍·2022년 1월 16일
0

JavaScript

목록 보기
1/3
post-thumbnail

공부하는 내용을 정리하는 용도로 지금까지 네이버 블로그를 사용하다가 최근에 velog를 알게 되었다. 개발자를 위한 블로그라는 점도 그렇고 깔끔한 UI에 푹 빠졌다.🙂 앞으로는 이곳에 공부한 것들을 올릴 것 같다.

Object 객체는 자바스크립트의 내장 객체 중 하나이다. Object를 알기 전에 내장 객체가 무엇인지부터 살펴봐야 한다.

1. 자바스크립트 내장 객체란?

내장 객체(Built-in Object)는 브라우저의 자바스크립트 엔진에 내장된 객체를 말한다. 내장 객체들은 다양한 함수 기능을 가지고 있다. 필요한 함수를 적절하게 사용할 수 있도록 각 함수의 기능을 정확히 이해하는 것이 중요하다.


2. Object 객체

Object 객체는 다른 모든 자바스크립트 객체의 기본이 되는 객체로, 데이터 관점에서 많이 사용한다. Object 객체를 생성하는 방법은 크게 두 가지가 있다.

Object() 생성자를 이용하는 방법
객체 리터럴 구문으로 생성하는 방법


2.1 Object() 생성자로 생성하기

생성자 함수를 이용해 먼저 빈 객체를 생성한다.

let person = new Object();

위 코드와 같이 let Object명 = new Object() 의 형태로 생성한다.
멤버를 설정해보자.

person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.getFullName = function() {
    return this.firstName + " " + this.lastName;
};
console.log(person.getFullName()); // John Doe

위와 같이 값으로 함수를 지정할 수도 있다.


2.2 객체 리터럴 구문으로 생성하기

객체 리터럴이란, 중괄호 {...}를 이용하여 객체를 생성하는 방법을 말한다. 중괄호 안에 키(key)-값(value) 쌍을 넣어 데이터를 저장하게 된다.

const person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

위 코드에서 firstName, lastName, age, eyeColor가 키(key)가 된다. 키를 이용해서 값을 바꾸거나 가져올 수 있다.

값을 바꿔보자.

person["age"] = 51;
person.age = 51;

Object명[키(key)] 또는 Object명.키(key)의 형태로 데이터를 바꿀 수 있다.

이번에는 값을 가져오자.

console.log(person["firstName"]);
console.log(person.firstName);

값을 바꿀 때와 같은 형태로 값을 가져올 수 있다.
Object의 값(value)으로는 문자형, 숫자형 뿐 아니라 자바스크립트의 모든 객체가 올 수 있다.


2.3 키-값 쌍 추가하기

리터럴 구문으로 키-값 쌍을 정의한 뒤에 데이터를 추가해야 한다면 생성자를 이용한 방법의 멤버 설정 방법으로 하면 된다.

let person = {
    firstName: "John",
    lastName : "Doe",
    age : 50
};
person.eyeColor = "blue";
person.getFullName = function(){
    this.firstName + " " + this.lastName;
};
console.log(person);

person 객체를 출력하면 다음과 같이 나온다.

{ firstName: 'john',
  lastName: 'doe',
  age: 50,
  eyeColor: 'blue',
  getFullName: [Function] }

키와 값이 잘 추가된 것을 알 수 있다.


3. 참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

profile
개발자 지망생

0개의 댓글