[TIL][JavaScript] 객체, 생성자함수

본 TIL( Today I Learned )은 그날그날의 공부한 내용들을
나중에 보더라도 쉽게 찾을 수 있도록 정리하고 있습니다.

잘못된 부분과 새로 배우는 내용이 있을 경우나
더욱 가독성이 좋아지도록 지속적으로 수정될 예정입니다.

1차 작성일자 : 2021.06.20
2차 수정일자 :
(전체적인 보강 및 ES6에서 추가된 내용 보강 예정)

1. 객체란?

자바스크립트는 객체 기반의 스크립트로
원시타입(string, number, boolean, null, undefined, symbol)
을 제외한 모든 것들(함수, 배열 등)이 객체에 해당한다.

객체는 속성(Property)들을 가지고 있으며
속성은 키(Key)와 값(Value)로 이루어져 있다.

그리고 키의 값이 함수일 경우엔
이를 속성이 아닌 메서드(Method)라고 부른다.

2. 객체 생성 방법

1) 리터럴을 이용한 객체 생성

let person = {
		name: "홍길동",
		age: 23,
		"favorite-food": "파스타",
		printName: function(){
			console.log(this.name);
		}
}

자바스크립트에서 기본적으로 객체를 생성하는 방법으로
객체 리터럴을 이용하는 방법이 있다.

객체 리터럴은 { } (중괄호) 이며
내부에서 키:값 으로 속성들을 정의하면 된다.

값으로는 원시타입, 객체 등 모든 타입들이 올 수 있는데,
함수(Function) 또한 객체에 해당하기 때문에 값으로 올 수 있으며
함수가 값으로 올 경우 속성이 아닌 메서드(메소드)라고 부른다.

각 속성 또는 메서드 사이에 ,(쉼표)를 넣어줘야 하며
키 이름은 중복 불가, 값은 중복이 가능하다.

주의할 점으로 키 이름에 -와 같은 연산자가 들어있을 경우
따옴표( ' ) 또는 쌍따옴표( " )로 키 이름을 감싸서
연산자로써 인식되지 않도록 해야한다.(그렇지 않으면 에러 발생)

let person = {
		name: "홍길동",
		age: 23,
		"favorite-food": "파스타",
		printName(){
			console.log(this.name);
		}
}

ES6 (ECMAScript2015)부터는 간결한 메서드를 지원하여
메서드를 정의할 때, function 키워드 없이
메서드명( ){ 메서드 내용 } 으로 바로 정의할 수도 있다.

2) 생성자함수를 이용한 객체 생성

function Person(name, age, food) = {
		this.name = name;
		this.age = age;
		this.favoriteFood = food;
		this.printName = function(){
			console.log(this.name);
		}
}
let person1 = new Perosn("홍길동", 23, "파스타");
let person2 = new Perosn("홍길은", 25, "김치찌개");
let person3 = new Perosn("홍길금", 21, "계란말이");

만약, 값이 다른 객체를 여러개 생성해야 하는데
1번의 객체 리터럴을 사용한 방법으로 객체를 생성하려면
필요한 객체 수만큼 코드를 반복해야 하기 때문에
비효율적이고 유지보수도 번거로워진다.

그래서 손쉽게 객체를 생성할 수 있도록 템플릿을 만들수 있게 하는 것이
생성자 함수이다.

생성자 함수를 만들고 인자로 원하는 속성값들을 순서에 맞게 넣어
new 연산자로 생성자 함수를 호출할 경우,
인자로 넣은 속성값들을 가진 객체가 생성된다.

생성자 함수에서 this는 생성자 함수로 생성될 객체를 의미하며
this.name = name; 의 의미는
새로 생성될 객체의 name 속성키에
매개변수 name을 속성값으로 설정하는 것이다.

ES6(ECMAScript2015)에서부터 클래스(Class) 개념이 도입되어
객체 생성 방법이 세가지로 늘어났는데,
한번에 정리하기에는 글이 너무 길어질 것 같아
클래스는 다음 글로 분리해서 따로 작성하려고 한다.

3. 객체 속성값 접근

1) 객체의 속성값 접근

let person = {
		name: "홍길동",
		age: 23,
		"favorite-food": "파스타",
		printName: function(){
			console.log(this.name);
		}
}
console.log( person.name );		//출력 홍길동
console.log( person["age"] );		//출력 23
console.log( person.favorite-food );	//에러발생 ReferenceError: food is not defined
console.log( person["favorite-food"] );	//출력 파스타

객체의 속성값에 접근하기 위해선 두가지 방법이 있는데
객체명.키이름 또는 객체명["키이름"] 이다.

주의할 점으로 3번째처럼 객체명.키이름 방식으로 접근할 경우
키 이름이 예약어가 아니고, 연산자가 포함되어 있지 않아야 한다.

만약 키 이름이 예약어이거나 연산자가 포함되어 있을 경우엔
대괄호를 이용해 객체명["키이름"] 방식으로 접근해야 한다.

2) 객체의 속성값 변경

let person = {
		name: "홍길동",
		age: 23,
		"favorite-food": "파스타",
		printName: function(){
			console.log(this.name);
		}
}
person.name = "김철수";
console.log( person.name );		//출력 김철수
person["name"] = "김호준";
console.log( person.name );		//출력 김호준

객체의 속성값을 변경하기 위해선
1번에서 객체에 접근하는 방식과 대입연산자인 = 를 활용해
변경하길 원하는 값을 할당하면 된다.

3) 객체의 속성 추가

let person = {
		name: "홍길동",
		age: 23,
		"favorite-food": "파스타",
		printName: function(){
			console.log(this.name);
		}
}
person.weight = 50;
console.log( person.weight );		//출력 50

객체를 생성할 때 정의하지 않은 속성에 값을 할당할 경우
해당 속성을 추가해줄 수 있다.

4) 객체의 속성 제거

let person = {
		name: "홍길동",
		age: 23,
		"favorite-food": "파스타",
		printName: function(){
			console.log(this.name);
		}
}
delete person.age;
console.log( person.age );		//출력 undefined

객체에 있는 속성을 제거하고 싶다면
delete 키워드를 활용하여
delete 객체명.속성명 을 통해 제거할 수 있다.

제거한 뒤 호출해보면 해당 속성이 존재하지 않아 undefined가 출력된다.

4. 객체의 메서드 호출

객체의 속성값으로 함수가 올 경우,
이는 속성이라 부르지 않고, 메서드라고 부른다.

let person = {
		name: "홍길동",
		age: 23,
		"favorite-food": "파스타",
		printName: function(){
			console.log(this.name);
		}
}
person.printName();	//출력 홍길동

객체에 메서드가 정의되어 있을 경우
객체명.메서드명()을 통해 해당 메서드를 호출할 수 있다.