[JS] 객체 Object

• key : 우리가 접근할 수 있는 property(변수)
• value : 그 property가 가지고 있는 값

object는 프로퍼티(속성), 메서드 데이터로 구성이 되며, 여러 데이터타입이 삽입이 가능하다.

왜 object를 사용할까?

const name = 'hyejin';
const age = 20;
print(name, age);
function print(name, age) {
  console.log(name);
  console.log(age);
}

• 원시 타입은 변수 1개당 값을 1개만 담을 수 있음.
• 원시 타입에 값을 하나씩 할당해서 하면 보기도 불편하고 써야하는 것들이 많아진다.

const hyejin = {
		name: 'hyejin'
		, age:20,
		};

function print(person) {
  console.log(person.name);
  console.log(person.age);
}

print(hyejin);
// hyejin 출력
// 20 출력

• object로 관리하면 한눈에 보기 쉬워진다.
• 객체에는 키(Key)와 값(Value) 이 있다.
• 키와 값을 함께 합쳐서 속성(Property) 이라고 부른다.
• 전달, 호출 할 때 hyejin 객체만 전달하면 되서 간편하게 데이터를 관리할 수 있음

object 생성방법

1. curly brackets({})을 이용해서 만들 수도 있고,
2. new라는 키워드를 이용해서 객체를 생성하는 함수(생성자 함수)를 통해 객체 생성 할 수 있음 ( 자바스크립트에서는 클래스 개념이 없고 이것을 생성자함수가 대신함 )

const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax

객체데이터 접근 / 변경 / 추가 / 삭제

• 접근 객체명.프로퍼티명 / 객체명[”프로퍼티명”]
• 변경 객체명.프로퍼티=”변경데이터”
• 추가 객체명.프로퍼티명=값 / 객체명[”프로퍼티명”]=값
• 삭제 delete 객체명.프로퍼티명 / delete 객체명[”프로퍼티명”]

let student={
	name : "hyejin",
	age : 20,
	skills : ["JS","HTML","CSS"],
	sum : function(num1,num2){
		return num1+num2;
	}
}

console.log(student.name);    //name 프로퍼티 출력
console.log(student['name']); //nam 프로퍼티 출력

student.gender='female'; //gender 프로퍼티 추가
student.name="namkung"; //name 프로퍼티 값 변경

delete student.gender; // gender 프로퍼티 삭제
delete student.['skills'] // skills 프로퍼티 삭제

단축 프로퍼티

name 프로퍼티명과 name 변수이름이 동일하기때문에 축약해서 사용할 수 있다.

예시) 이름과 나이를 받아서 객체를 반환하는 함수

function makeObject(name, age){
  
  return {
    name, // name:name
    age, // age:age
    hobby:'football',
  }
  
}

const Mike = makeObject('Mike',30);
console.log(Mike);

계산된 프로퍼티

[string] : []를 이용해서 name이라는 string -> Object 안에 있는 변수의 이름을 string 형태로 접근이 가능하다.

let n = "name";
let a = "age";

const user = {
  [n]: "Mike",
  [a]: 30,
}
console.log(user[n]) //Mike
console.log(user["name"]) //Mike

프로퍼티 존재여부 확인

• 존재하지 않는 프로퍼티에 접근할 경우 undefined
• in 연산자 사용하여 속성이 있는지 확인할 수 있음
  
  

객체 메소드 :

객체 프로퍼티로 할당된 함수
this는 각 객체인 boy와 girl을 가리킴

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴

>> 메소드를 화살표 함수로 사용할 경우 this는 boy를 가리키지 않음.

객체 메소드는 일반함수로 사용하고 그 내부에서는 this로 변수지정하는것이 좋음
객체와 메소드 / 그 메소드 내부의 this 정도만 우선 간략히 알고 넘어가기
이후에 this에 대해서 다시 제대로 다루기!