객체(object)

자바스크립트는 객체 기반의 스크립트 언어로 원시 타입(Primitives)을 제외한 나머지 값들은 모두 객체이다.

 

객체

객체는 key와 value로 구성된 데이터와 함수를 가질 수 있다.

객체 안에 존재하는 데이터를 property, 데이터를 참조하고 조작할 수 있는 함수를 method라고 부른다.

(property들을 합하여 field라고 부른다.)

• 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 '프로토타입(prototype)'이라고 불리는 객체의 property와 method를 상속받을 수 있다. 
  

• 객체의 key는 일반적으로 문자열(빈 문자열 포함)을 지정한다. ([ ] 괄호를 사용한 표현식도 가능하다)
  

• key에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 

2021/02/02 - [개발/Javascript] - prototype(프로토타입)

prototype(프로토타입)

 

---

객체 생성 방법

객체를 생성하는 방법에는 

1. 객체 리터럴
   
2. Object 생성자 함수
   
3. 생성자 함수

3가지가 있다.

//1. 객체 리터럴
let human = {
  "name" : "JJJ",
  "age" : 30,
  "liveIn" : "Seoul",
  "introduce" : function() {
    return `hello my name is ${this.name} I\`m ${this.age} years old and living in ${this.liveIn}!``
  }
}

console.log(human.name);
console.log(human.introduce());
//JJJ
//hello my name is JJJ I`m 30 years old and living in Seoul!


//2. Object 생성자 함수
let human = new Object();
human.name = "JJJ";
human.age = 30;
human.liveIn = "Seoul";
human.introduce = function() {
  return `hello my name is ${this.name} I\`m ${this.age} years old and living in ${this.liveIn}!`
};

console.log(human.name);
console.log(human.introduce());
//JJJ
//hello my name is JJJ I`m 30 years old and living in Seoul!


//3. 생성자 함수
function Human(name, age, liveIn) {
  let num = 21;
  this.name = name;
  this.age = age;
  this.liveIn = liveIn;
  this.introduce = function() {
    return `hello my name is ${this.name} I\`m ${this.age} years old and living in ${this.liveIn}!`
  };
}

let human1 = new Human("JJJ", 30, "Seoul");
let human2 = new Human("WWW", 40, "Busan")

console.log(human1.name);
console.log(human1.introduce());
console.log(human2.name);
console.log(human2.introduce());
console.log(num);

//JJJ
//hello my name is JJJ I`m 30 years old and living in Seoul!
//WWW
//hello my name is WWW I`m 40 years old and living in Busan!
//ReferenceError: num is not defined

위 코드를 보면 알 수 있듯이 생성자 함수 방식으로 객체를 생성하는 것이 코드의 재활 용성면에서 더욱 효율적이다.

 

생성자 함수 참고

• 생성자 함수 이름은 대문자로 시작한다.
  (소문자로 해도 오류가 나진 않지만 생성자 함수임을 인식하도록 도와준다.)

• property 또는 method명 앞에 적힌 this는 생성자 함수가 생성할 instance(human1, human2)를 가리킨다.
  

• this에 바인딩되어있는 property와 method는 외부에서 참조 가능(public)하다.
  

• 생성자 함수 내부에서 선언된 일반 변수(num)는 외부에서 참조 불가능(private)하다.
  

• new 연산자와 함께 함수를 호출하면 일반적인 this의 바인딩과 다르게 동작한다.

2021/01/29 - [개발/Javascript] - this

this

---

객체 맴버(property, method) 접근

객체 맴버에 접근하는 방법은 두 가지가 있다.

• 점 표기법
• 괄호 표기법 ([ ])

이 두가지 방법을 통해 각 멤버의 값에 대해 읽기, 생성, 지우기, 갱신 등의 행동을 할 수 있다.

function Human(name, age, liveIn) {
  this.name = name;
  this.age = age;
  this.liveIn = liveIn;
  this.introduce = function() {
    return `hello my name is ${this.name} I\`m ${this.age} years old and living in ${this.liveIn}!`
  };
}

let human = new Human("JJJ", 30, "Seoul");

//읽기
console.log(human);
console.log(human.name);// 점 표기법
console.log(human["name"]);// 괄호 표기법
//Human { name: 'JJJ', age: 30, liveIn: 'Seoul', introduce: [Function] }
//JJJ
//JJJ

//갱신
human.name = "WWW";
console.log(human.name);
//WWW

//생성
human.gender = "male";
console.log(human.gender);
console.log(human);
//male
//Human { name: 'JJJ', age: 30, liveIn: 'Seoul', introduce: [Function], gender: 'male' }

//지우기
delete human.age;
console.log(human.age);
console.log(human);
//undefined
//Human { name: 'JJJ', liveIn: 'Seoul', introduce: [Function], gender: 'male' }

객체 멤버 접근 시 참고

• key의 이름이 유효한 자바스크립트 이름이 아니거나 예약어인 경우 대괄호 표기법으로 접근해야 한다.

• 괄호 표기법 사용 시 괄호 내에 들어가는 key이름은 반드시 문자열이어야 한다.

• 객체에 존재하지 않는 key값 참조 시 undefined를 반환한다.

• for-in문을 통해 모든 객체 멤버의 key를 순회할 수 있다.
  (순서가 보장되지 않고 배열 요소들만 순회하지 않기 때문에 배열에는 사용하지 않는 것이 좋다.
    ==> ES6에 새로 추가된 for-of를 사용한다.)

• 객체 타입은 동적으로 변경이 가능(mutable) 하기 때문에 pass-by-reference방식으로 전달된다.
  (복사 X)

변수를 통한 객체 맴버 접근

let obj = {
  name : "JJJ",
  age : 29999,
  gender : "M",
}

let n = "name"; 
let plusKey = "job";
let plusValue = "developer";

console.log(obj[n]); //JJJ
console.log(obj.n); //undefined

obj[plusKey] = plusValue;

console.log(obj);
//{ name: 'JJJ', age: 29999, gender: 'M', job: 'developer' }

객체의 맴버에 변수로 접근할 때에는 점표 기법이 아닌 괄호 표기법으로 접근해야 한다.

---

객체 순회

객체에서의 순회를 위해 Object 객체에 존재하는 메서드를 활용할 수 있다.

 

• Object.keys()
• Object.values()
• Object.entries()

let obj = {
  name : "JJJ",
  age : 29999,
  gender : "M",
}

let keyList = Object.keys(obj);
let valueList = Object.values(obj);
let keyValueList = Object.entries(obj);

console.log(keyList);
console.log(valueList);
console.log(keyValueList);

//[ 'name', 'age', 'gender' ]
//[ 'JJJ', 29999, 'M' ]
//[ [ 'name', 'JJJ' ], [ 'age', 29999 ], [ 'gender', 'M' ] ]

세 개의 메서드 모두 배열을 반환하고, entries()의 경우 배열을 요소로 가진 배열을 반환한다.

 

*for-in문을 활용하여 객체의 값에 접근하는 방법도 있다.

let obj = {
  name : "JJJ",
  age : 29999,
  gender : "M",
}

for (let oo in obj){
  console.log(obj[oo]); //oo 또한 변수이기에 괄호 표기법으로 접근
}

//JJJ
//29999
//M

---

 

참고

opentutorials.org/course/743/6570

생성자와 new - 생활코딩

developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

JavaScript 객체 기본 - Web 개발 학습하기 | MDN

poiemaweb.com/js-object

Object | PoiemaWeb