[JS] javascript 에서 객체 (object) 사용하기 - 객체 리터럴, 생성자

java나 c# 등 객체지향 언어를 공부해본 사람이라면 객체가 무엇인지 잘 알고 있을 것이다.

 

javascript도 객체(Object)를 생성하여 사용할 수 있다.

 

 

Object - 접근 , 추가, 삭제

 

아래 코드는 person이라는 Object를 생성하는 소스 코드이다.

const person = {
  name : 'bboya',
  age : 10,
  gender : 'F',
}

{ } 안에서 name, age, gender라는 key 에 각각 'bboya', 10, 'F' 라는 value가 들어가 있다.

마지막에 , 는 없어도 상관은 없지만, 보통 수정/삭제에 용이하게 하기위해 붙여주곤 한다.

이를 객체 리터럴 이라한다.

 

객체에 접근, 추가, 삭제하는 방법은 아래와 같다.

 

Object 속성에 접근

 

객체 속성 접근할 때는

 

객체명.키

혹은

객체명['키'] 

 

이렇게 접근 해주면 된다.

console.log(person.name);
console.log(person['age']);

 

 

Object 속성 값 추가

 

객체 속성 값을 추가할 수도 있는데 

 

객체명.키 = 값

혹은

객체명['키'] = 값

 

이런 식으로 값을 추가해주면 된다.

person.height = 150;
person['weight'] = 45;

 

Object의 속성 값 삭제

 

객체의 속성값을 삭제해줄 때는 delete 키워드를 사용한다.

 

delete 객체.키

 

delete person.height;

 

Object - 단축 프로퍼티

만약에 이미 존재하는 변수라면 아래와 같이 별도의 할당 없이 단축하여 객체를 생성할 수 있다.

let name = 'bboya';
const age = 10;
const gender = 'F';

const person = {
  name,
  age,
  gender,
}

여기서 let 변수는 변경될 수 가 있는데, let 변수가 바뀐다고

객체의 속성 값이 바뀌거나 하진 않는다.

name = 'haru';
console.log(person.name);

 

Object - 속성 존재 여부 확인

만약 존재하지 않는 변수를 출력하면 undefined가 출력이 된다.

 

console.log(person.ssn);

 

이런 상황을 피하기 위해, 미리 프로퍼티값이 존재하는지 유무를 in 키워드를 통해 파악할 수 있다.

 

존재한다면 true를 없다면 false를 리턴한다.

console.log('name' in person);
console.log('ssn' in person);

 

보통 javascript 단에서는 외부에서 개발된 api를 호출해서 사용하는 경우가 많은데, 이때 정상적으로 프로퍼티 값이 들어왔는지 체크하기위해 사용된다.

 

그리고 for ~ in 문을 활용할 수 있는데, 객체 내 key 값이나  value 값을 순차적으로 접근하는 방식으로 많이 활용된다.

for(let key in person) {
  console.log(key + " : " + person[key]);
}

 

Object - 메서드

Objet내에서 함수와 비슷하게 메서드를 작성하여 사용할 수 있다. 

const person = {
  name : 'bboya',
  age : 10,
  gender : 'F',
  introduce : function() {
    console.log('my name is ' + this.name);
  }
}

person.introduce();

만약에 메서드 내에서 속성에 접근하기를 원한다면 this 키워드를 사용하여 접근하면 된다.

 

그리고 함수 자체를 메서드로 활용할 수도 있다. 아래의 코드를 보자.

introduce = function() {
    console.log('my name is ' + this.name);
}

let female = {
  name : 'bboya',
  age : 10,
  gender : 'F',
  introduce,  
}

let male = {
  name : 'haru',
  age : 10,
  gender : 'M',
  introduce, 
}

female.introduce();
male.introduce();

위의 결과 처럼 함수에 있는 this 키워드는 각 Object의 해당 속성값을 찾아서 결과를 주는걸 확인할 수 있다.

 

그런데 여기서 주의할 점은 함수를 화살표 함수로 작성하면 결과가 완전히 달라진다.

 

화살표 함수의 경우 일반 함수와는 다르게 자신만의 this를 가지지 않는다. 그래서 만약 화살표 함수 내부에 this를 사용해버리면, this값을 외부에서 가져와 원하지 않는 결과를 만든다. (브라우저 환경에서는 window, nodejs global)

 

주의하자.

 

생성자 함수를 통해 객체 생성하기

여느 객체지향 언어처럼 생성자를 통해 객체를 생성할수도 있다.

함수를 통해 생성자를 만들고, new 키워드를 활용해 객체를 생성한다.

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.run = function() {
    console.log(this.name + '이 달린다');
  }
}

let person1 = new Person('Kang', 33, 'M');
let person2= new Person('Kim', 29, 'F');

person1.run();
person2.run();

 

위에서 run 함수처럼 메서드를 추가해 사용할 수 있다.

 

 

간단하게 javascript에서 객체를 사용하는 방법을 알아봤다.

아주 기본적인 내용이니 잘 숙지하도록 하자.

 

끝