JavaScript 객체 기초 다루기

객체

• JS는 객체 기반 언어. 객체를 만들어 사용할 수 있다는 말.
• 전통적인 OOP랑은 다르나, 점점 닮아가는 중. Java와 점점 닮아가고 있다.
• 객체 : 여러 가지 자료 형태의 데이터를 복합적으로 모아서 정의하는 데이터 타입. 숫자, 배열, String 등등등

객체 분류

• 내장 객체 : 언어 자체가 제공하는 객체. 브라우저 환경에 관계 없이 일관된 결과 기대할 수 있음.
• ex. String, Date, RegExp, Math
• BOM 객체 : 브라우저에 내장된 객체 ?
• DOM 객체 : 문서의 구조를 읽기 위한 객체 ?
• 사용자 정의 객체 : 사용자가 직접 정의해 사용하는 객체.

원시형 vs 객체형

• 원시형 : 오직 하나의 데이터만 담을 수 있다. ex. int i = 0;
• 객체형 : 여러 가지 형태의 데이터를 담을 수 있다.
  • JavaScript에서 객체 내부는 key와 value 한 쌍으로 이뤄진다.
  • 객체 안에 여러 데이터타입이 있어도 괜찮다.
  • 객체 안에 여러 프로퍼티를 둘 경우, 객체 하나로 여러 변수를 관리할 수 있다.
  • 얼마든지 객체에 추가적인 멤버(key)를 붙일 수 있다.
  • 단, key는 중복될 수 없다.
  • 이러한 객체를 만들어 레고 조립하듯이 프로그램을 만듦 →객체지향프로그래밍(OOP)
• 객체만들기

**객체 선언하기** 
const person = {
	key1 : value1,
	name : "킴킴", 
	age : 15, //마지막 콤마 넣어도 되고, 안 넣어도 된다. 
	female : true,
};

**객체 사용하기** 
console.log(peson.name); //"킴킴"
console.log(`person객체 이름은 ${pesron.name}`);
- ${}는 뭐지? 

**객체 프로퍼티 변경하기**
person.name = "연콩";

객체 참조하기

• 점(.) 연산자, 대괄호([ ])연산자

let cat = {
	name : "뚜디",
	age : 2,
	personality : "새침",
	"별명은" : "공주" //한글 등 string을 key로 설정하는 건 권장하지 않음. 
									 //하더라도 점연산자는 사용하기 어려움 
};

**객체에서 값 가져오기** 
cat.name; //뚜디
cat["name"] // 뚜디  //따옴표를 꼭 써줘야 한다. 따옴표 때문에 번거로워서 점 연산자를 많이 씀.
cat[name] // 에러 
cat["별명은"] // 공주 

연관배열

• 어떤 키와 값 하나가 연관돼 있으면, 키를 통해 연관된 값을 찾는 거
• key , 멤버 이름 : 내부적으로 문자열 형태로 처리. key로 문자열 조립도 가능.
• 실행 중에 문자열을 조립해 멤버를 참조할 수 있다.

const keys  ={
	name1 : "a",
  name2 : "b"
}

포문 돌리면서 name + i로 값을 찾을 수도 있음.
for(let i = 0; i < 4; i++){
	console.log(keys["name"+i]);
}

값의 복사와 참조

원시 타입

• 오직 하나의 값만 할당한다.
• 변수끼리 할당(대입)한다.
• 값을 복사해 넣는다. → 원본이 손상되지 않는다.
• 예시 : 작은 물고기라서 어부가 그냥 주는 느낌적인 느낌

let a = 100;
let b = a;
b의 값을 수정한다고 a값이 바뀌지 않고, a 값을 수정한다고 해서 b값이 변하지 않음  

객체 타입

• 객체의 위치(원본의 주소)를 참조한다.
• 같은 객체를 가리킨다. 이 때문에 객체 수정 시 원본도 영향을 받는다.
• let a = {a : 1, b : 2 } let b = a; 일 때, 같은 객체(a)를 가리키는 또 다른 변수를 만드는 것과 같다.
• 객체를 함수의 인자로 전달할 때도, 값의 주소를 보낸다.(=함수에 참조로 전달한다) 값을 직접 전달하지 않는다.
• 예시: 바닷가에 떠내려온 고래를 직접 옮겨오는 대신, 고래가 있는 위치를 종이에 적어오는 것처럼. 어부a가 어부b에게 고래 위치 주소를 알려주고, 고래고기를 떼오라고 하면, 고래의 상태는 수정된다. 둘 다 같은 위치의, 같은 고래를 참조하고 있다.

let person = {
  name : "홍길동",
	age : 20,
}

let person2 = person; //person 객체를 person2에 할당 

person.name = "이순신"

console.log(person2.name); //이순신

함수에 객체 전달하기

객체와 문자열, 숫자 등 원시타입을 활용할 때, 원시형은 원본이 영향을 받지 않고, 객체형은 영향을 받는다는 걸 까먹지 말기. 원시타입은 함수에 값을 복사해서 사용함.

• 객체를 함수의 인자로 전달하기

let person = {
	name : "홍길동"
}

function replaceName(obj){
	obj.name = "을지문덕"
}

replaceName(person); 
console.log(person.name)//홍길동이 을지문덕으로 바뀜

• 값을 함수의 인자로 전달

let person = "홍길동";

function replaceName(str){
	str = "을지문덕"
}

replaceName(person); //person이 을지문덕으로바뀜
let person2 = replaceName(person); // 을지문덕을 새로운 변수에 할당
console.log(person); // 여전히 홍길동. 원시타입은 원본이바뀌지 않음.
사본을 갖고 작업한 것이기 때문에 원본은 변하지 않는다. 

객체 내 객체 만들기

const person = {
	name:"홍길동",
	credits:{
		english: 90,
		math : 50,
	}
}

//부르기
console.log(person.credits.english)

객체의 주요 구성요소

• 속성(property) : 객체의 주요 특성을 정의. person 안의 name 같은.....
• 메서드 : 객체 내의 함수

객체 내 함수 만들기

• 객체에 다양한 함수를 넣을 수 있다.
• 아래 코드 직접 테스트해봐야 할거 같음

const person = {
  name:"홍길동",
	credits:{
		english: 90,
		math : 50,
	},
	showMessage: function(){
		alert(`안녕하세요 제 이름은 ${person.name}입니다.`);
	},
};

person.showMessage();

//객체끼리 할당 후 person 객체에 null 주면
let manKind = person;
manKind.showMessage(); // 함수 사용 가능

person = null;
person.showMessage(); //에러

mankind.showMessage(); function을 ${mankind.name}이라고 하면 에러 안 남

근본적인 해결책은 함수 안에서 ${this.name} 이라고 선언을 해주는 게 맞음

this.name 이라고 하면

person.showMessage(); 했을 때, person의 name이 대입되고

mankind.showMessage()라고 했을 때 mankind의 name이 대입된다. 호출을 누가 하느냐에 따라서 객체가 변하는 것을 말한다.

this는 호출하는 객체 그 자체다.