2023 - 05 - 16 객체, 객체 메서드, 생성자함수, 문자열화, 객체병합 (중요)

오늘 할일

자바스크립트 1주차 강의 듣기

 

오늘 배운 것

객체, 객체 메서드, 생성자함수, 문자열화, 객체병합

 

객체 key - value pair
하나의 변수에 여러 값을 넣을 수 있다.
value에 해당하는 값에 어떠한 타입도 넣을수 있다.(문자열, 숫자열 등)
심지어 value에 해당하는 값에 함수, 또다른 객체, 배열도 넣을 수 있다.

기본적인 객체 생성방법

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

생성자함수를 이용한 객체 생성방법 (this, class 사용)

function Person (name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person ("홍길동", 30, "남자");
let person2 = new Person ("홍길순", 20, "여자");
let person3 = new Person ("이상우", 32, "남자");
.
.
.

이런식으로 생성자 함수를 사용하여 수많은 객체를 한꺼번에 만들 수있다.

2. 객체 접근방법 (점 . 씩고 해당 객체의 key값을 입력하면 프로퍼티(속성)에 접근할 수 있음)

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

console.log("1.", person.name);
console.log("2.", person.age);
console.log("3.", person.gender);


// 1. 홍길동 
// 2. 30  
// 3. 남자

3 객체 메소드 (객체가 가진 여러가지 기능 :Object.~~) 중요!

1. Object.keys() : key값을 가져오는 메서드

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

let keys = Object.keys(person)
console.log("keys=>", keys);


keys=> [ 'name', 'age', 'gender' ]

2. Object.values() : value값을 가져오는 메서드

 

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

let values = Object.values(person);
console.log("values=>", values)


// values=> [ '홍길동', 30, '남자' ]

3. Object.entries() : key와 value를 묶어서 가져오는 배열 (2차원 배열)

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

let entries = Object.entries(person);
console.log("entries =>", entries)


// entries => [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

4. Object.assign(a, b) 메서드 (객체를 복사한다)

첫번째 매개변수 a : target (어디에 복사할건지),

두번째 매개변수 b : source (무엇을 복사할건지. (어떠한 데이터타입도 입력가능))

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

let newPerson = {};
Object.assign(newPerson, person);
console.log("newPerson =>", newPerson)

// newPerson => { name: '홍길동', age: 30, gender: '남자' }

객체의 요소를 변경하고 싶을 때 ( ex) age 요소를 변경하고 싶을 때)

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

let newPerson = {};
Object.assign(newPerson, person, {age : 31});
console.log("newPerson =>", newPerson)


// newPerson => { name: '홍길동', age: 31, gender: '남자' }

 

객체의 요소를 변경하고 싶을 때 ( ex) gender 요소를 변경하고 싶을 때)

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

let newPerson = {};
Object.assign(newPerson, person, {gender : "여자"});
console.log("newPerson =>", newPerson)


// newPerson => { name: '홍길동', age: 30, gender: '여자' }

객체를 비교하기

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

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


console.log(person1===person2) // false

이 경우 객체 person1 과 person2는 똑같음
객체 1과 2가 같은지 비교하면 아무리 값이 똑같더라도, false로 나옴.
person1과 person2가 각각 저장하고 있는 주소가 다르기 때문이다.



그럼 person1와 person2를 내용이 동일함을 비교하기 위해서는
JSON에서 제공하는 stringfy (문자열화) 기능 사용하기.
JSON.stringify()

 

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

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


console.log(JSON.stringify(person1)===JSON.stringify(person2)) // true

객체 병합  (...명령어) : spread operator

person1 과 person2를 합쳐야 완벽한 값이 나옴.

let person1 = {
    name: "홍길동",
    age : 30,
}

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

let perfectMan = {...person1, ...person2};
console.log(perfectMan)


// { name: '홍길동', age: 30, gender: '남자' }