자바스크립트 객체: 객체 생성, 접근, 변경, 추가, 삭제 방법

자바스크립트에서 객체는 변수에 데이터를 저장하는 것뿐만 아니라 변수의 속성을 저장하는 데에도 사용됩니다. 객체는 속성의 이름과 값으로 구성되고 속성은 문자열뿐만 아니라 배열, 숫자, 논리 데이터도 가능합니다. 객체를 이용하면 연관된 데이터와 함수를 묶어서 관리할 수 있어서 코드의 가독성과 유지보수성이 높아집니다.

그럼 예제를 통해서 자바스크립트에서 객체를 생성하고 다루는 방법에 대해서 알아보겠습니다.

▼ 목차

객체 생성 방법
객체 속성 접근 방법
2-1. 대괄호 연산자로 접근하기
2-2. 마침표 연산자로 접근하기
객체 속성 값 변경하기
객체 속성 동적으로 추가하기
객체 속성 동적으로 삭제하기

1. 객체 생성 방법

객체는 모든 종류의 자료형을 데이터의 값으로 지정할 수 있습니다.

▼ 예제코드: 객체를 생성하는 방법

<script>
    
// 예제1: 객체는 속성의 이름과 값으로 구성되어 있습니다.
let person = {
     name: "BlueShare",  // 문자
     age: 20,   // 숫자
     isAdult: true   // 논리
};


// 예제2: 객체는 다른 객체, 배열, 메서드(함수)도 추가할 수 있습니다.
let person2 = {
     name: 'BlueShare',   // 문자
     age: 20,   // 숫자
     colors: ['red', 'blue', 'white'],   // 배열
     job: {   // 객체
          title: 'Developer',
          salary: 10000
     },
     print: function() {   // 메서드(함수)
          return "안녕하세요.";
     }
};

</script>

2. 객체 속성 접근 방법

객체의 속성에 접근하기 위해서는 대괄호 또는 마침표 연산자를 사용할 수 있습니다.

2-1. 대괄호 연산자로 접근하기

▼ 예제코드: 대괄호 연산자를 사용하여 속성에 접근하는 방법

<script>

let person = {
     name: 'BlueShare',   // 문자
     age: 20,   // 숫자
     colors: ['red', 'blue', 'white'],   // 배열
     job: {   // 객체
          title: 'Developer',
          salary: 10000
     },
     print: function() {   // 메서드(함수)
          return "안녕하세요.";
     }
};

// 대괄호 연산자를 사용하여 속성에 접근하는 방법
console.log(person["name"]);           // 출력값: BlueShare
console.log(person["age"]);            // 출력값: 20
console.log(person["colors"][0]);      // 출력값: red
console.log(person["job"]["title"]);   // 출력값: Developer
console.log(person["print"]());        // 출력값: 안녕하세요.

</script>

2-2. 마침표 연산자로 접근하기

▼ 예제코드: 마침표 연산자를 사용하여 속성에 접근하는 방법

<script>
    
let person = {
     name: 'BlueShare',   // 문자
     age: 20,   // 숫자
     colors: ['red', 'blue', 'white'],   // 배열
     job: {   // 객체
          title: 'Developer',
          salary: 10000
     },
     print: function() {   // 메서드(함수)
          return "안녕하세요.";
     }
};

// 마침표 연산자를 사용하여 속성에 접근하는 방법
console.log(person.name);           // 출력값: BlueShare
console.log(person.age);            // 출력값: 20
console.log(person.colors[0]);      // 출력값: red
console.log(person.job.title);      // 출력값: Developer
console.log(person.print());        // 출력값: 안녕하세요.

</script>

3. 객체 속성 값 변경하기

▼ 예제코드: 객체의 속성 값을 변경하는 방법

<script>

let person = {
     name: 'BlueShare',   // 문자
     age: 20,   // 숫자
     colors: ['red', 'blue', 'white'],   // 배열
     job: {   // 객체
          title: 'Developer',
          salary: 10000
     },
     print: function() {   // 메서드(함수)
          return "안녕하세요.";
     }
};

// 객체의 속성 값을 변경하는 방법
person.name = 'RedShare';
person.colors[0] = 'black';
person.job.title = 'Design';

// 마침표 연산자를 사용하여 속성에 접근하는 방법
console.log(person.name);           // 출력값: RedShare
console.log(person.colors[0]);      // 출력값: black
console.log(person.job.title);      // 출력값: Design

</script>

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

▼ 예제코드: 객체의 속성을 동적으로 추가하는 방법

<script>

let person = {
     name: 'BlueShare',
     age: 20
};

console.log(person);   // 출력값: {name: 'BlueShare', age: 20}

// 객체에 속성을 추가하는 방법
person.gender = 'Male';
person.job = 'Developer';

console.log(person);   // 출력값: {name: 'BlueShare', age: 20, gender: 'Male', job: 'Developer'}

</script>

5. 객체 속성 삭제하기

▼ 예제코드: 객체의 속성을 동적으로 삭제하는 방법

<script>

let person = {
     name: 'BlueShare',
     age: 20,
     gender: 'Male',
     job: 'Developer'
};

console.log(person);   // 출력값: {name: 'BlueShare', age: 20, gender: 'Male', job: 'Developer'}


// 객체에서 속성을 삭제하는 방법
delete person.age;
delete person.job;

console.log(person); // 출력값: {name: 'BlueShare', gender: 'Male'}

</script>

자바스크립트 기초 이전 게시물

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!