[자바스크립트] 객체 생성 및 사용 방법 예제

자바스크립트에서도 객체가 존재한다.

 

객체를 어떻게 생성하고 사용하는지 알아보도록 하자.

 

1. 객체 생성 

소스 코드

// 생성자 방식

let personA = new Object();

 

// 리터럴 방식

let personB = {};

생성 방식은 생성자 방식, 리터럴 방식 2가지가 있다. 리터럴 방식이 더 쉽고 많이 사용된다. 

 

2. 객체의 Property 

객체에서 변수로 사용되는 것을 Property라고 한다. Property를 만드는 법과 출력하는 방법을 알아보자.

print 결과

let personD = {

name: "JY",

age: 28

};

personD라는 객체를 생성했다. 해당 객체의 name, age에 관한 property까지 작성했다. 

property를 출력하는 방법은 다양하다. 

소스 코드

/ 객체 출력 방법

console.log(personD);

console.log(personD.name);

console.log(personD["age"]);

결과

그냥 객체를 log로 찍으면, 결과 캡처처럼 중괄호를 통해서 내용이 나타난다.

점을 이용해서 객체의 프로퍼티를 출력할 수 있다. 그리고 대괄호를 이용해서 출력하는 방식 2가지 방식이 존재한다. 

그리고 마지막으로 함수를 만들어서 출력하는 방식도 존재한다. (이거는 뭐 그냥 이런 방법이 있구나 정도로 생각하면 된다.)

소스 코드

// 함수를 만들어서 value값 출력

function getPropertyValue(key) {

return personD[key];

}

console.log(getPropertyValue("name"));

결과

JY

이렇게 객체 내의 프로퍼티를 출력하는 방법들을 알아봤다. 자기가 쓰기 편한 것으로 사용하면된다. 

 

3. 객체의 프로퍼티를 추가 및 수정, 삭제

객체의 프로퍼티를 추가하고 수정하는 방법은 되게 직관적이다. 

소스 코드

// let 이 아니라 const로 해도 property 변경은 가능하다.

let person = {

name: "shoney",

age: 31

};

 

// property 추가하는 방법

person.location = "korea";

person["gender"] = "female";

 

person.name = "shoney92"; // property 변경 방법

console.log(person);

결과

person이라는 객체를 const로 선언하더라도 객체의 프로퍼티는 변경 가능하다. 

 

소스 코드

// property 삭제 방법

delete personC.name;

personC.name = null;

- delete : 키-벨류 묶음 전체를 삭제하는 방법

- null: 밸류에다가 null을 넣는 방법(뭔가 대단한것 처럼 설명했는데, 그냥 null값을 넣는 것이다.)

 

객체에서는 프로퍼티만 사용되는게 아니다. 메서드도 함께 쓰인다 메서드는 어떻게 사용하는지 아래 내용을 통해 알아보자.

 

 

4. 객체의 메서드(함수)

키와 밸류 짝에서 밸류 값에는 함수도 들어갈 수 있다. 객체의 함수를 사용하는 방법을 알아보자.

소스 코드

// const(상수선언)으로 객체를 선언해도 property변경은 가능하다.

const personC = {

name: "JY",

age: 28,

say: function () {

console.log(`hello! My name is ${this.name}`);

}

};

 

// 메서드를 실행하는 법

console.log(personC.say());

console.log(personC["say"]());

결과

hello! My name is jy2

hello! My name is jy2

프로퍼티 처럼 사용하면 되고, 함수를 사용할때 처럼 ()괄호를 붙여주면 된다. 물론, 함수의 인풋 변수를 넣는 것들도 충분히 가능하다.

 

 

5. 객체의 Key, Value를 배열에 담는 방법

소스 코드

let person = {

name: "shoney",

age: 31,

tall: 187,

weight: 81

};

 

const personKeys = Object.keys(person);

const personValues = Object.values(person);

 

for (let i = 0; i < personKeys.length; i++) {

console.log(personKeys[i] + " : " + personValues[i]);

}

결과

name : shoney

age : 31

tall : 187

weight : 81

Object.keys를 통해서 객체의 키를 배열로 담을 수 있다. 그리고 Object.values를 사용하면서 value 값들을 배열에 담을 수 있다.