lessons 10. 객체

2023.02.05

자바스크립트 스터디 3회차

공부 사이트: https://poiemaweb.com/

 

10. 객체

1) 객체(Object)

- 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등..)은 모두 객체

- 키(key)와 값(value)으로 구성된 프로퍼티(property)의 집합

- 객체 = 데이터를 의미하는 프로퍼티 + 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드

- 상속을 구현하기 위해 프로토타입이라고 부르는 객체의 프로퍼티와 메소드를 상속받을 수 있다.

 

① 프로퍼티

- 프로퍼티 키와 프로퍼티 값으로 구성

- 프로퍼티 키로 유일하게 식별 가능

- 프로퍼티 키에 문자열/Symbol 값 이외의 값을 지정하면 암시적 형변환되어 문자열이 된다.

- 프로퍼티 키 중복 선언 시 나중에 선언한 프로퍼티가 덮어쓴다.

 

② 메소드

- 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라고 부른다.

 

 

 

2) 객체 생성 방법

- 자바스크립트는 프로토타입 기반 객체 지향 언어로서, 클래스 개념이 없고 별도의 객체 생성 방법이 존재

- ES6부터 클래스 도입.

 

① 객체 리터럴

- 가장 일반적인 자바스크립트 객체 생성 방식

- 중괄호 사용하여 객체 생성

// 빈 객체 생성
var Obj1 = {};

var Obj2 = {
	name: "홍길동",
	age: "12",
	sayHello: function(){
		console.log('hello. my name is ' + this.name);
	}
};

Obj1.sayHello();   //메소드 사용

 

② Object 생성자 함수

- new 연산자와 Object 생성자 함수를 호출하면 빈 객체 생성 가능

- 빈 객체 생성 이후 프로퍼티/메소드를 추가하여 객체 완성

- 생성자 함수: new 키워드와 함께 객체를 생성하고 초기화하는 함수. 이를 통해 생성된 객체를 인스턴스라고 함.

- 객체가 소유하고 있지 않은 프로퍼티 키에 값 할당 시, 해당 객체에 프로퍼티 추가/값 할당 

- 존재하는 프로퍼티 키에 새로운 값 할당 시 변경

//빈 객체 생성
var Obj = new Object();

Obj.name = "홍길동";
Obj.age = "12";
Obj.sayHello = function() {
     console.log('hello. my name is ' + this.name);
};

Obj.sayHello();

 

객체 리터럴 방식으로 생성된 객체는 빌트인 함수인 Object 생성자 함수로 객체를 생성하는 것을 단순화 시킨 축약 표현이다. 개발자가 일부러 Object 생성자 함수를 사용해서 객체 사용할 일은 없다.

 

 

③ 생성자 함수

- 생성자 함수를 사용하면 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러개를 간단하게 만들 수 있다.

function Person(name,age){
    var married = true;     //private
	this.name = name;       //public
	this.age = age;         //public
	this.sayHello = function(){     //public
		console.log('hello. my name is ' + this.name);
	};
}

var person1 = new Person("홍길동", "12");
var person2 = new Person("황진이", "51");

person1.sayHello();  
person2.sayHello();

- 생성자 함수 이름은 보통 대문자로 시작. (생성자 함수임을 인식하도록)

- this: 생성자 함수가 생성할 인스턴스를 의미

- this에 바인딩되어있는 프로퍼티와 메소드는 public(외부에서 참조 가능)

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

 

 

 

3) 객체 프로퍼티 접근

① 프로퍼티 키

- 따옴표 사용

- 자바스크립트에서 사용 가능한 유효한 이름일 경우, 따옴표 생략 가능 (연산자, 예약어 등이 아니면)

 

② 프로퍼티 값

- 객체의 프로퍼티 값에 접근하기 위한 방법은 마침표, 대괄호를 이용할 수 있다.

var person = {
	name: "홍길동",
	age: "12",
	sayHello: function(){
		console.log('hello. my name is ' + this.name);
	}
};

console.log(person.name);
console.log(person[name]);     // 참조 에러. not defined
console.log(person['name']);
console.log(person['address']); // 존재하지 않는 프로퍼티 참조 시 undefined

- 대괄호로 접근하는 경우, 대괄호 내 프로퍼티 이름은 반드시 문자열('')이어야 함.

 

③ 프로퍼티 삭제

- delete 연산자: 객체의 프로퍼티 삭제 가능. 이 떄, 피연산자는 프로퍼티 키

var person = {
	name: "홍길동",
	age: "12",
	sayHello: function(){
		console.log('hello. my name is ' + this.name);
	}
};

console.log(person);
delete person.age;
console.log(person)

 

④ for-in문

- 객체에 포함된 모든 프로퍼티 루프 수행 가능

- 객체의 문자열 키를 순회하기 위한 문법.

var person = {
	name: "홍길동",
	age: "12",
    address: "the street"
};

for(var prop in person){
    console.log(prop + ': ' + person[prop]);
}

console.log('---------------------');

var arr = ['1','2','3','4','5'];
arr.name = 'my array';

for(var idx in arr){
	console.log(idx + ': ' + arr[idx]);
}

객체 대상/배열 대상

그러나 for-in문을 배열 대상으로 사용하는 것은 추천하지 않는다

- 객체의 경우 프로퍼티 순서가 존재하지 않지만, 배열은 순서를 보장하는 데이터 구조이기 때문이다.

- 배열의 요소만 순회하는 것이 아니다.

 

배열 대상으로 사용 시 for-in문 대신 ES6에서 등장한 for-of문을 사용할 것.

var arr = ['1','2','3','4','5'];
arr.name = 'my array';

for(const value of arr){
	console.log(value);
}
console.log('---------');

// entries: 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 배열을 반환
for (const [index, value] of arr.entries()) {
  console.log(index, value);
}

 

 

 

4) 참조에 의한 전달(Pass-by-reference)

- 객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리된다는 의미.

- 원시 타입은 값이 한번 정해지면 변경 불가능하나, 객체 타입은 프로퍼티를 변경/추가/삭제가 가능하므로 변경 가능한 값이다.

- 즉, 프로퍼티는 동적으로 변화할 수 있으므로, 메모리 공간을 얼마나 확보해야할지 예측할 수 없다.

- 런타임 시 메모리 공간을 확보하고, 메모리의 힙 영역에 저장된다.

＃런타임: 변수 할당 시점

＃힙 영역: 동적 메모리 할당 영역

var person = {
    name : "홍길동",
    age : "12",
    address : "Seoul"
};     //person 변수는 객체 자체를 저장하고 있는 것이 아니라, 객체의 참조값(주소)을 저장

var tmp = person;     //tmp에도 객체의 참조값을 저장하는 것

위 코드에서 tmp와 person 변수는 동일한 참조값을 저장하고 있다. 동일한 객체를 가리키고 있는 것이다.

tmp.name 통해 값 변경 시 당연히 person의 name 값도 변경된다.

 

 

5) 값에 의한 전달(Pass-by-value)

- 값으로 전달. 즉, 값이 복사되어 전달된다.

- 런타임 시 메모리의 스택 영역에 고정된 메모리 영역을 점유하고 저장된다.

＃스택 영역: 정적 메모리 할당 영역

var num1 = 1;
var num2 = num1;

위 코드에서 num1의 값이 num2에 복사되어 저장된다. 참조 타입으로 저장되는 것이 아니라 값 자체가 복사되어 저장되는 것이다.

 

 

6) 객체의 분류

내장 객체 (Built-in Object)	- 웹페이지 등을 표현하기 위한 공통 기능 제공.  - 웹페이지 로드 시 별다른 행위 없이 바로 사용 가능 ① Standard Built-in Object - 표준 내장 객체 ② Naive Object - BOM(Browser Object Model) - DOM(Document Object Model)
호스트 객체 (Host Object)	- 실행 환경에서 제공하는 객체.  - 내장 객체(Bulit-in Object)와 Native Object가 구성된 이후에 구성.