자바스크립트의 객체

🫠 자바스크립에서 객체란?

• 객체의 고유한 속성을 프로퍼티(property)라고 부르며, 여러 프로퍼티와 값의 쌍으로 표현된다.
• 객체가 호출하는 함수는 ‘메소드’라고 부른다.
• 영역 안에 있으면 메소드, 어떠한 영역 안에도 갇혀 있지 않은 게 일반적 함수이다.

var account = {name : '박희수', number : '110-111-1111', code : '1234'}
account.프로퍼티명; -> 프로퍼티가 존재하면 사용, 없으면 선언, 있으면 수정에 해당
account['프로퍼티명'] -> 맵구조라서 이렇게도 가능

객체 예시

1) account라는 객체를 이용해서 입출금 형태를 알아보자

var account = {
	owner : "희수",
	code : "1234",
	balance : 10000,
	deposit : function(money){
		this.balance += money;
	},
	withdraw : function(money){
		this.balance -= money;
	},
};

account.number = "110-111-11111" // 선언, 프로퍼티 추가 
account.withdraw(3000); // balance = 7000 메소드 호출
with(console){
	log(acount);
	log(acount.owner);
	log(account["balance"]); // account["프로퍼티명"]으로 호출
}

➡️ 실행 결과 
{
	owner : '희수',
	code : '1234'
	balance : 7000,
	deposit : [Function:deposit],
	withdraw : [Function : withdraw],
	number : '110-111-11111'
}
희수
70000


2) user라는 객체를 이용해 사용자 정보를 알아보자

var user = new Object();
⭐ Object(), object 프로토타입, 자바스크립트에서는 자바의 생성자를 프로토타입이라 한다. 
⭐ 처음에는 프로퍼티의 이름도 값도 모르기 때문에 객체로만 선언해 놓는다.

user.userId = 'hs1234'
user.userPW = '1234';
user.userAddress = '서울';
user.userPhoneNumber = '01012341234';
user.userName = "희수";

2-1) user 객체에 메소드 만들어주기

user.info = info; // 여기서 소괄호를 쓰게 되면 info메소의 리턴값을 넣게된다.
function info(){
	console.log(this.userName + "입니다.");
	⭐ 여기서 this가 쓰이는 것은 이 함수가 '함수'가 아닌 '메소드'로 쓰인다는 것을 감지할 수 있다.
}

console.log(user);
user.info();

➡️ 출력 결과 

{
	userId : 'hs1234',
	userPW : '1234',
	userAddress : '서울';
	userPhondeNumber : '01012341234',
	userName : '희수'
	info : [Function : info]
}
희수입니다.


3) 기차에 등급별 좌석을 구현하자!

고객 정보

 [1]
 이름 : 홍길동
 나이 : 20
 등급 : 1

 [2]
 이름 : 이순신
 나이 : 40
 등급 : 2

 [3]
 이름 : 장보고
 나이 : 19
 등급 : 3

 3명은 기차 한 대에 모두 탑승한다.
 기차 객체를 만들고 각 손님들을 프로퍼티로 선언한다.

var train = new Object();

손님들을 각 객체로 만들어준다.
var hong = {name : "홍길동", age : 20, level : 1};
var lee = {name : "이순신", age : 40, level : 2};
var jang = {name : "장보고", age : 19, level : 3};

train 객체에 passenger1,2,3이라는 키를 가진 프로퍼티 3개를 만들고, 
그 안에 값으로 아까 넣은 손님들 객체를 넣어준다.
train.passenger1 = hong;
train.passenger2 = lee;
train.passenger3 = jang;

console.log(train);

➡️ 출력결과 

{
	passenger1 : {name : '홍길동', age : 20, level 1},
	passenger2 : {name : '이순신', age : 40, level 2},
	passenger3 : {name : '장보고', age : 19, level 3},
}

➡️ 이결과를 통해 우리는 객체 안에 또다른 객체가 프로퍼티 값으로 들어갈 수 있음을 알 수 있다. 

---------------------------------------------------------------------

4) new를 이용한 생성자, 프로토타입 예시

⭐ 	자바스크립트에서는 new뒤에 나오는 생성자를 프로토타입이라고 부른다.
	프로토타입은 함수로 선언하여 사용한다. 반드시 대문자로 시작해준다. 
	함수를 쓸 때는 소문자로 쓰고 프로토타입은 반드시 대문자로 시작!

function User(id, pw, name, age){
	this.id = id;   // 여기서 this가 사용되는 건 새로운 프로토타입의 참조 값이라는 뜻
	this.pw = pw;
	this.name = name;
	this.age = age || 1; // 앞에있는 값이 false면 1을 넣는다.
	this.intro = function(){
		with (console){
			log(this.id);
			log(this.pw);
			log(this.name);
			log(this.age);
		}
	};
}

hong = new User("hong1234","1234","홍길동",20);
lee = new User("lee4444","4444","이순신",23);
hong.intro();
lee.intro();
➡️ 이렇게 프로토타입을 이용하여 함수를 생성하면, 고정된 함수에 값을 변경해 가면서 넣어줄 수 있다는 장점이 있다. 또한 원하는 메소드를 가져와 언제든 사용할 수 있다.