Javascript/자바스크립트 문제

[Javascript] 객체의 개념과 사용법

isfp_yykkng 2024. 8. 6. 21:56

[Javascript] 객체의 개념과 사용법

객체란 실체화된 "실제의 물체" 라는 뜻으로 우리 눈에 보이는 모든 사물이 객체라고 할 수 있다. 한 사람을 객체라고 한다면 한 사람은 이름, 나이, 성별 등 많은 것들을 가지고 있고 이것을 객체의 속성이라고 부른다. 그리고 객체의 속성은 key와 value 값으로 나뉜다. 

 

이런 객체를 선언 및 생성 방법 3가지왕 객체 속성을 접근하고 다루는 등 객체 사용법에 대해 알아보려 한다.

 

객체 선언 및 생성 방법 1. 객체 리터럴 (Object Literal) 방식

{ } (중괄호) 를 사용하여 선언하는 방식으로 객체 속성을 초기화 하고 생성하는 방식이다.

const Person = {
  name: "홍길동",
  age: 25,
}
console.log(Person);
/*
{ name : "홍길동", age : 25 }
*/

 

객체 선언 및 생성 방법 2. 객체 생성자 (Object Constructor) 방식

리터럴 방식과는 다르게 new Object()를 먼저 선언하고 속성을 나중에 정의하는 방식이다. 객체 속성을 나중에 정의할 수 있다는 점이 차이점이다.

const Person = new Object()
Person.name = "홍길동"
Person["age"] = 25

console.log(Person)
/*
{ name: "홍길동", age: 25 }
 */

 

객체 선언 및 생성 방법 3. 함수생성자 (Function Constructor) 방식  

함수 생성자 방식의 특이한 부분이 this 키워드이다. this 키워드는 자기 자신을 나타내는 키워드이다. 함수 이름이 객체의 이름과 같고 속성을 매개변수로 받아온다. 선언된 함수의 인자로 속성값을 전달하여 하나의 객체를 생성하는 방식이다.

function Person(name, age) {
  this.name = name
  this.age = age
}

const person = new Person("홍길동", 25)

console.log(person)
/*
{ name: "홍길동", age: 25 }
*/

 

객체 사용법 : 객체 속성(Property) 조회, 추가, 수정, 삭제

앞서 설명한 대로 name, age와 같은 것들을 객체 속성, property 라고 하는데 객체를 선언하고 사용할 때 가장 많이 사용하는 부분이다.

 

1) 객체 속성 조회

 

" <객체명> . <속성명> / <객체명>[속성명] " 을 통해서 객체 속성에 접근(조회)할 수 있다. 아래 예시와 같이 해당 속성에 접근하면 해당 속성에 있는 속성값이 반환된다.

const Person = {
  name: "홍길동",
  age: 25,
}
console.log(Person.name) // 홍길동
console.log(Person.age) // 25

 

2) 객체 속성 추가

 

" <객체명> . <추가할 속성명> = 추가할 값 " 을 통해서 객체 속성값을 추가할 수 있다. 아래 예시와 같이 새로운 속성을 추가할 수 있다.

const Person = {
  name: "홍길동",
  age: 25,
}
Person.job = "개발자"
console.log(Person.job) // 개발자
console.log(Person) // { name: '홍길동', age: 25, job: '개발자' }

 

3) 객체 속성 수정

 

객체 속성 추가와 비슷하게 " <객체명> . <수정할 속성명> = 수정값 / <객체명>[ "속성명" ] = 수정값 " 을 통해서 객체 속성값을 수정할 수 있다. 아래 예시와 같이 속성을 수정할 수 있다.

const Person = {
  name: "홍길동",
  age: 25,
}
Person.name = "홍길순"
Person["age"] = 30
console.log(Person.name) // 홍길순
console.log(Person.age) // 30
console.log(Person) // { name: '홍길순', age: 30 }

 

4) 객체 속성 삭제

 

" delete <객체명> . <삭제할 속성명> " 을 통해서 객체 속성값을 삭제할 수 있다. 아래 예시와 같이 속성을 삭제할 수 있다.

const Person = {
  name: "홍길동",
  age: 25,
}
delete Person.age
console.log(Person) // { name: '홍길동' }

 

객체 속성 단축 정의

객체 속성을 미리 선언하고 객체를 생성할 때 속성으로 정의하는 방식을 말한다. 이런 식으로 객체를 생성할 때 축약해서 생성할 수 있다.

const name = "홍길동"
const age = 25

const Person = {
  name,
  age,
}
// name = name 의 축약형

console.log(Person)
/*
{ name : '홍길동', age: 25 }
*/

 

객체 속성 존재 여부 체크

객체 속성 존재 여부를 체크하는 방식은 in 키워드를 사용하면 된다.

const name = "홍길동"
const age = 25

const Person = {
  name,
  age,
}

console.log("name" in Person) // 속성이 존재하기 때문에 true
console.log("job" in Person) // job 속성이 존재하기 때문에 false

 

객체 반복문 (for ... in)

객체에 대한 반복문으로 for in문을 사용하여 객체의 모든 key(속성변수명), value(속성값)에 접근하고 다룰 수 있다.  value에 접근할 때는 Object[key] 로 접근할 수 있다.

const name = "홍길동"
const age = 25

const Person = {
  name,
  age,
}

for(const key in Person) {
    console.log("key : ", key)
    console.log("value : ", Person[key])
}
/*
 key :  name
 value :  홍길동
 key :  age
 value :  25
 */

 

객체 메서드(object method) 선언

우선 메서드는 객체 내부에서 선언이 가능한 함수를 말하는데, 일반적인 Javascript의 함수와 다르게 독립적으로 생성할 수 없다. 

const name = "홍길동"
const age = 25

const Person = {
  name,
  age,
  //메서드 선언
  getName : function(){
    return this.name
  },
  //메서드 축약 선언
  getAge(){
    return this.age
  },
}

//새로운 속성으로 메서드 선언
Person.walking = function() {
	console.log("앞으로 간다.")
}

console.log("이름은 ", Person.getName())
console.log("나이는 ", Person.getAge() + "살")
Person.walking()

/*
앞으로 간다
이름은 홍길동
나이는 25살
*/

 

위 예시와 같이 2가지 방식으로 메서드 선언이 가능하다. ⭐⭐

  1. 객체 리터럴 선언 방식으로 메서드 선언
  2. 새로운 속성값 추가하는 방식으로 메서드 선언

 

저작자표시 (새창열림)