[2주차] 자바스크립트 문법 종합반 : 객체, 객체 메소드

자바스크립트 문법 종합반 

-객체

(1) 객체 생성

// 객체
// 자바스크립트에서는 객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있습니다. 

// 1. 객체 생성
// 1-1. 기본적인 객체 생성
// 아래 예제에서 객체 person을 생성합니다. 객체를 만들 때는 중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성합니다. 각 속성과 값은 쉼표(,)로 구분합니다.
let person = { // 중괄호, key - value pair, ','
  name: "홍길동",
  age: 30,
  gender: "남자" 
  // key 에 들어가는 value는 어떤값도 들어올 수 있다. // boolean, 숫자, 문자열, 함수, 배열[], 객체{}
};

// 1-2. 생성자 함수를 사용한 객체 생성
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");
// 이것의 장점은 굉장히 많은 객체를 한꺼번에 여러개 생성할 수 있다.

 

 

 

(2) 객체 속성 접근

// 2. 객체 속성 접근
// 객체 속성에 접근하는 방법
// 객체의 속성에 접근할 때는 점(.)을 사용하여 속성 이름(key)을 입력합니다.
let person = {
  name: "홍길동", //person이라는 객체에서 name이라는 속성에 접근
  age: 30,
  gender: "남자"
};

console.log(person.name);   // 홍길동
console.log(person.age);    // 30
console.log(person.gender); // 남자

console.log("1", person.name);   // 1 홍길동
console.log("2", person.age);    // 2 30
console.log("3", person.gender); // 3 남자

 

 

 

 

(3) 객체 메소드

// 3. 객체 메소드
// 객체가 가진 여러가지 기능(=메소드)들에 접근하는 방법

// 3-1. Object.keys() 메소드
// key를 가져오는 메소드 (예시. name, age, gender...)
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let keys = Object.keys(person); // 키들을 모두 가져와서 넣은 변수 선언 // (매개변수자리에는 객체를 넣어준다)

console.log(keys);   // ["name", "age", "gender"] // 배열형태로 담아져서 나온다(=return).


// 3-2. Object.values() 메소드
// value를 가져오는 메소드 (예시. 홍길동, 남자, 30...)
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let values = Object.values(person);

console.log(values);   // ["홍길동", 30, "남자"] // 배열형태로 담아져서 나온다.


// 3-3. Object.entries() 메소드
// Object.entries() 메소드는 객체의 속성 이름과 속성 값들을 2차원 배열로 반환한다.
// key와 value를 묶어서 배열로 만든 큰 배열
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let entries = Object.entries(person);

console.log(entries); // [ ['name', '홍길동], ['age', '30'], ['gender', '남자']  ]



// 3-4. Object.assign() 메소드
// 객체를 복사한다
let newPerson = {}; // 기존 Person(객체)을 복사해 넣어줄 새로운 객체를 생성한다
Object.assign(newPerson, Person); // Object.assign(매개변수 1 = target. 어디에다가 복사할래, 매개변수 2 = source. 뭘 복사할래)
console.log("newPerson => ", newPerson); // newPerson => { name : '홍길동', age: 30, gender: '남자'}

// 만약 객체를 복사하는데 하나의 value 값을 수정하고 싶다면?
let newPerson = {};
Object.assign(newPerson, Person, {age: 31});
console.log(newPerson); // { name : '홍길동', age: 31, gender: '남자'}


// 3-5. 객체 비교
let person1 = { // 서로 다른객체인데 key의 value 값이 모두 같다면?
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let str1 = "aaa";
let str2 = "aaa";

console.log(person1 === person2);   // false
console.log(str1 === str2); // true
// 왜 이런 차이가 날까?
// 객체라는 건 크기가 크다. 다른데이터 타입에 비해 크기가 크기때문에, 메모리에 저장할 때 별도이 공간에 저장한다.
// 객체는 직접적인 값을 가지고 있는 것이 아니라, 공간에 대한 주소를 가지고 있는 것이다.
// 그러므로 person1 과 person2 는 서로 다르다.

// JSON 이라는 것에서 제공하는 stringify(=문자열화시키다)라는 기능이 있는데, 
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true



// 3-6. 객체 병합
// 객체 병합을 할 때는 전개 연산자(...)를 사용합니다.
let person1 = {
  name: "홍길동",
  age: 30
};

let person2 = {
  gender: "남자"
};

// let mergedPerson = {}; // 해체시켜서 합쳐놓을 객체 저장소 선언(만들기)
// ... : spread operator // 객체 안에 있는 key, value를 모두 다 풀어줘라
let mergefPerson = {...person1, ...person2};
console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }