[JS] 자바스크립트 객체(Object)와 객체 속성 추가 및 제거하기

1. 객체

 

객체란 '실제로 존재하는 사물'을 의미합니다. 이름(name)과 값(value)으로 구성된 속성(property)을 가진 자바스크립트의 기본 데이터 타입입니다.

 

객체는 키(key)를 사용합니다. 중괄호 {...}로 생성하며, 키: 값 같은 형태의 자료를 쉼표로 연결해 입력합니다.

const person = {

name: ["seung", "hyun"],

age: 23,

gender: "female",

interests: ["javascript", "design"],

bio: function () {

alert(

this.name[0] +

" " +

this.name[1] +

" is " +

this.age +

" years old. She likes " +

this.interests[0] +

" and " +

this.interests[1] +

".",

);

},

greeting: function () {

alert("Hi! I'm " + this.name[0] + this.name[1] + ".");

},

};

 

이렇게 객체를 생성했습니다. 객체에 접근하는 방법은 객체 뒤에 [...] 대괄호를 사용하고 키를 입력하면 객체의 요소에 접근할 수 있습니다. 또한, 대괄호 이외에 온점(.)을 사용하여 접근할 수도 있습니다. 다음과 같은 코드를 콘솔에 입력하여 확인해보겠습니다.

console.log(person.name)

console.log(person.age)

console.log(person.gender)

console.log(person.interests)

 

 

콘솔에 객체 요소가 나타납니다. 그리고 객체 요소 중 함수인 bio와 greeting을 호출해보겠습니다.

person.bio()

person.greeting()

 

 

alert() 함수가 실행되는 것을 볼 수 있습니다. 이렇게 객체의 속성 중 함수 자료형인 속성을 특별히 메소드(method)라고 부릅니다. 또한 위 코드에서 this 키워드가 사용됐는데, 메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 합니다. 자기 자신이 가진 속성이라는 것을 표시할 때에는 this 키워드를 사용합니다.

 

---

 

2. 동적으로 객체 속성 추가/제거하기

 

객체를 처음 생성한 후, 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다'고 표현합니다. 

// 객체 선언하기

const student = {}

// 동적으로 객체 속성 추가하기

student.name = "hyun"

student.hobby = "javascript"

student.hope = "Frontend"

// 출력하기

console.log(JSON.stringify(student, null, 2))

 

{ "name": "hyun", "hobby": "javascript", "hope": "Frontend" }

 

이렇게 객체를 생성한 후 속성을 지정하고 값을 입력하면 됩니다.

 

출력하기에서 사용된 JSON.stringify() 메소드는 자바스크립트의 객체처럼 자료를 표현하는 방식 중 하나로, 내장 객체의 메소드입니다. 대부분 프로그래밍 언어는 JSON 형식의 문자열을 읽어들이는 기능이 있습니다. 네트워크를 통해 각각 프로그래밍 언어로 만든 애플리케이션들이 데이터를 교환할 때 활용합니다. 자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드를 사용합니다.

 

객체의 속성을 제거할 때는 delete 키워드를 사용합니다. 다음과 같은 형태로 사용합니다.

delete 객체.속성

 

// 객체 선언하기

const student = {}

// 동적으로 객체 속성 추가하기

student.name = "hyun"

student.hobby = "javascript"

student.hope = "Frontend"

// 동적으로 객체 속성 제거하기

delete student.hope

// 출력하기

console.log(JSON.stringify(student, null, 2))

 

{ "name": "hyun", "hobby": "javascript" }