JavaScript 기초 - 객체(object)

🌈 객체(object)

🔥 객체 기본

🔥 객체 복사

🔥 매서드와 this

1.객체 기본

1) 객체란?

• 객체는 원시형 데이터 타입과과 달리 다양한 데이터를 뿐 아니라, 메서드(함수) 또한 담을 수도 있음
• 이때 객체에 담는 원시형 데이터들은 attribuute(속성)이라하고, 함수를 methods(메서드)라 함
• 객체는 몇가지 특수한 기능을 가진 연관 배열(associative array)임
• 객체 형태 : 🔍 {key1 : "value1", key2 : "value2", key3 : "value3", ... keyN : "valueN"}
• {} 안에는 키(key)와 값(value)쌍으로 구성된 프로퍼티를 여러개 넣을 수 있음
• 키(key)는 문자형, 값(value)에는 모든 자료형을 담을 수 있음
• 키(key)를 다룰 때, 점 표기법 대신 []를 사용할 때가 있는데, 이는 복수의 단어로 이뤄진 키값은 점 표기법으로 다룰 수 없기 때문임
• 키(key) 이름으로 예약어를 사용 가능
• JavaScript 객체 생성 방법
  🔍
  🔍 객체 리터럴 방식 : JSON, Python에 Dict와 유사
  🔍 생성자 함수로 생성하는 방식

// 객체 생성 방법1 : 객체 생성자 방식
const user = new Object(); // '객체 생성자' 문법
// 객체 생성 방법2 : 객체 리터럴 방식 -> 주로 이 방법으로 객체 생성
const user = {}; // '객체 리터럴' 문법
// 객체 생성 방법3  : 생성자 함수로 생성하는 방식
function User(age, name){
  this.age = age;
  this.name = name;
}
const info = new User(10, 'Jaewon');
console.log(typeof info); // object
console.log(info.age, info.name); // 10 'Jaewon'
// 매서드 및 속성 추가 : prototype
User.prototype.message = function(){
  return 'Hello';
};
User.prototype.hobby = 'coding'
const info2 = new User(20, 'Jaewon');
console.log(info2.age, info2.name); // 20 'Jaewon'
console.log(info2.message()); // Hello
console.log(info2.hobby) // coding

// 객체 예시(객체 리터럴 방식) : 속성
const user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};
console.log(user) // {name: "John", age: 30}
console.log(user.name) // John
console.log(user.age) // age
// 프로퍼티(property) 추가 : ojbectName.key = value
user.isAdmin = "true";  // user객체 안에 프로퍼티 추가
console.log(user.isAdmin) // true
// 프로퍼티(property) 삭제 : delete ojbectName.key;
delete user.age;

// 객체 예시(객체 리터럴 방식) : 매서드
const calcurate = {
  name : 'jaewon',
  plus : function(a,b){
    return a + b;
  },
  minus : function(a,b){
    return a - b;
  },
  hello : function(){
    return 'Hello ' + this.name + '!'
  },
  bye : function(name){
    return 'Bye ' + name + '!'
  }
};
console.log(calcurate.name) // jaewon
console.log(calcurate.plus(2,8)) // 10
console.log(calcurate.minus(10,5)) // 5
console.log(calcurate.hello()) // Hello jaewon!
console.log(calcurate.bye('haezin')) // Bye haezin!

// 키의 이름이 복수의 단어일 때에는 ""으로 감싸줘야 함
// 마지막 프로퍼티는 쉼표로 끝날 수 있음
const userInfo = {     
  name: "Jaewon",
  age: 20,
  "favorite fodd": "kimche",
};
console.log(userInfo) // {name: "Jaewon", age: 20, favorite food: "kimche"}
userInfo["soul food"] = pizza  // 대괄호 표기법:key이름이 단어의 조합일 때는 점표기법 대신 대괄호 표기법 사용
console.log(userInfo["soul food"]) // pizze

2) getter & setter

• 메서드를 포함해서 전체를 프로퍼티라고 할 때, 일반적인 프로퍼티를 데이터 프로퍼티라 하고 getter와 setter를 접근자 프로퍼티라고 함
• getter는 프로퍼티 값을 접근할 때(읽을 때) 호출되는 메서드
• setter는 프로퍼티 값을 수정할 때(설정 때) 호출되는 메서드

const user = {
  age : 10,
  name : 'JJ',
  get get_age(){
    return this.age;
  },
  set set_age(value){
    this.age = value // 위에 age 값을 수정하기 때문에 value를 받고, return은 없음
  }
};
console.log(user.get_age); // 10
user.set_age = 33; // set_age는 return하는게 아니기 때문에 바로 접근하여 수정
console.log(user.get_age); // 33

3) 단축 프로퍼티

• 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우 단축 프로퍼티 사용

// 단축 프로퍼티
function userInfo(name, age, sex){
	return {
		name : name,
        	age : age,
        	sex : sex,
        // ...등등
	};
}
let user = userInfo("jaewon", 20, "male");
console.log(user.name) // jaewon
console.log(user.age) // 20
// 아래처럼 단축하여 사용할 수 있음(아래object와 위object는 같음)
function userInfo(name, age, sex){
	return {
		name,
       		age,
        	sex,
        // ...등등
	};
}

4) 프로퍼티 존재 여부 확인 방법

• 프로퍼티가 너무 많을 경우, 간단한 방법으로 존재하는지 확인할 수 있음
• 프로퍼티 존재 여부 확인 방법 : 🔍 "key이름" in 객체명
• 존재할 경우 -> true, 존재하지 않을 경우 -> false 반환함

// 프로퍼티 존재 여부 확인 방법 : "key이름" in Object이름
const user = {
    name : "jaewon",
    age : 20,
    location : "seoul"
}
console.log("location" in user) // true -> 있음
console.log("sex" in user) // false -> 없음

4) 'for ... in' 반복문

• 'for...in' 반복문을 사용하면 객체의 모든 키를 순회할 수 있음.

// for ...in 반복문
for(key in object){
	// 각 프로퍼티 키를 이용하여 본문을 실행
}
// 예시
let user = {
  name: "Jaewon",
  age: 30,
  isAdmin: true,
  location : "seoul"
};
for (let key in user) { // key 부분은 다른 단어를 넣어도 됨
  console.log( key );  // name, age, isAdmin, location
  console.log( user[key] ); // Jaewon, 30, true, seoul
}

3.객체 복사

1) 객체 복사의 개념

• 객체 복사의 개념 : 메모리가 할당된 위치를 가르키는 참조값(주소)를 복사
• 원시 데이터는 값 그대로 저장,할당,복사되는 반면 오브젝트는 참조값이 복사됨
• 즉, 객체는 값 자체를 복사하는게 아니라 값을 가르키는 메모리 주소(참조값)을 복사함
• 이를 참조 복사 또는 얕은 복사라 함
• 이에 복사된 다른 객체에서 조작(수정 등)을 가하면, 참조에 의해 원본도 함께 변경됨
• 또한 원본과 복사(얕은 복사)된 객체 비교 시, 동등 연산자(==)와 일치 연산자(===)는 동일하게 동작됨
• 다만, 객체는 참조값(메모리가 저장된 주소)을 담고 있기 때문에 똑같은 데이터를 담은 다른 두 객체를 비교하면 일치하지 않음
  👉🏻 객체의 데이터들을 비교하는 것이 아니라, 참조값(주소)을 비교하기 때문!

// 복사된 객체 조작
let info = {name : "jaewon", age : 20}
let admin = info // 객체 복사(얕은 복사)
console.log(info) // {name: "jaewon", age: 20}
console.log(admin) // {name: "jaewon", age: 20}
admin.location = "seoul" // 복사된 객체를 수정하면 원본 객체도 함게 수정됨
console.log(info) // {name: "jaewon", age: 20, location: "seoul"}
console.log(admin) // {name: "jaewon", age: 20, location: "seoul"}

// 복사된 객체 비교
let a = {};
let b = a;
console.log(a == b); // true
console.log(a === b); // true
// 프로퍼티는 같지만 참조값이 다른 두 객체 비교
// 객체의 비교는 객체에 담긴 데이터를 비교하는 것이 아닌, 객체의 참조값(데이터를 가르키는 주소)가 비교됨
let c = {name:"jaewon", age:10}
let d = {name:"jaewon", age:10}
let e = c // 얕은 복사
console.log(c == d) // false
console.log(c == e) // true

2) 깊은 복사

• 깊은 복사 : 객체를 복사하고 싶은데 참조값이 다른 독립된 객체로 복사하고 싶을 때는 사용
• 객체 내에 데이터를 통채로 다른 오브젝트의 값으로 넣는 것이 깊은 복사임
• 즉, 객체 내에 포함된 데이터(key & value)는 동일하지만, 다른 참조값을 가진 복사본을 생성

// 객체 내 데이터는 같으나, 참조값이 다른 독립된 객체로 복사하기 : 깊은 복사
let originObject = {
	name : "jaewon",
    age : 20,
    location : "seoul",
    sex : "male",
    ishappy : true
};
let copyObject = {};
for(let key in originObject){
	copyObject[key] = originObject[key]
};
console.log(originObject); // {name: "jaewon", age: 20, location: "seoul", sex: "male", ishappy: true}
console.log(copyObject); // {name: "jaewon", age: 20, location: "seoul", sex: "male", ishappy: true}

3) 객체 할당(Object.assign)

// 객체 합치기
let user = { name: "John" };
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };
Object.assign(user, permissions1, permissions2); // 복사(할당)
console.log(user) // {name: "John", canView: true, canEdit: true}
// 단, 목표 객체에 동일한 이름을 가진 프로퍼티가 이미 존재하다면 기존 값이 덮어씌워짐
Object.assign(user, { name: "Pete" }); // user에 name 프로퍼티가 이미 있으나 할당 시도
// {name: "Pete", canView: true, canEdit: true} // 덮어 씌어짐
// 반복문 없이 간단히 복사하기
let user1 = {
  name: "John",
  age: 30
};
let user2 = Object.assign({}, user1); // 빈객체{}에 user1객체를 복사한 뒤 user2에 담음
console.log(user2) // {name: "John", age: 30}

4) 중첩 객체 복사

• 중첩된 객체 또한 참조값으로 복사됨

// 중첩 객체 복사
let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};
let clone = Object.assign({}, user);
alert( user.sizes === clone.sizes ); // true, 같은 객체(참조값을 복사)
// 따라서 한쪽을 수정하면 다른쪽도 수정됨
user.sizes.width++;       // 한 객체에서 프로퍼티를 변경
alert(clone.sizes.width); // 51, 다른 객체도 바뀜

4. 매서드와 this

1) 매서드 만들기

• 객체 안에는 데이터도 들어가지만, 메서드(어떤 기능을 수행하는 함수)도 추가할 수 있음

//메서드 추가 방법1 : 메서드(함수)를 객체에 프로퍼티 추가하듯이 추가
let user = {
  name: "John",
  age: 30
};
user.sayHi = function() {
  console.log("안녕하세요!");
}; // user객체에 sayHi라는 키값으로 메서드(함수)를 추가함
user.sayHi(); // 안녕하세요!
console.log(user) // {name: "John", age: 30, sayHi: ƒ}
// 메서드 추가 방법2 : 함수를 별도로 선언하고, 선언된 함수를 메서드로 추가
// 객체 생성
let color = {
  value1: "red",
  value1: "blue",
  value1: "yellow",
};
// 함수 선언
function colorSay(){
	console.log("Hello color")
}
// 함수를 객체에 추가
color.colorSay = colorSay;
// 호출
color.ColorSay(); // Hello color
console.log(color); // {value1: "yellow", colorSay: ƒ}
// 메서드 추가 방법3 : 단축 문법 / function 생략
user = {
  sayHi: function() {
    consol.elog("Hello");
  }
};
console.log(user.sayHi()) // Hello
// 위에 객체를 단축 문법으로 만들기
user = {
  sayHi() { 
    console.log("Hello");
  }
};
console.log(user.sayHi()) // Hello

2) 매서드와 'this'

• JavaScript에서 this는 다른 프로그래밍언어의 this와 동작 방식이 다름
• 자바스크립트에서는 모든 함수에 this를 사용 가능
• this는 현재 객체(자신이 속한 객체)를 나타냄.

let user = {
  name: "John",
  age: 30,
  sayHi() {
    console.log("Hello, " + this.name);  // 'this'는 '현재 객체'를 나타냅니다.
  }
};
console.log(user.sayHi()) // Hello, John

// user과 admin 객체가 존재
let user = { name: "John" };
let admin = { name: "Admin" };
// sayHi 함수 선언
function sayHi() {
  console.log( this.name );
}
// 각 객체에 f라는 key값으로 함수 추가
user.f = sayHi;
admin.f = sayHi;
// 호출
console.log(user) // {name: "John", f: ƒ} -> 2개의 프로퍼티를 가짐(데이터와 메서드)
console.log(admin) // {name: "John", f: ƒ} -> 2개의 프로퍼티를 가짐(데이터와 메서드)
// 'this'는 현재 속한 객체를 참조하기 때문에 this값이 다름
user.f(); // John  this는 user객체
admin.f(); // Admin  this는 admin객체
admin['f'](); // Admin (점 표기법과 대괄호 표기법는 동일하게 동작함)