클라우딩 어플리케이션 엔지니어링 TIL Day 11 (1)

# 객체

# 객체란?

속성을 가진 독립적인 개체 -> 객체는 속성으로 구성된 집합이다

자바스크립트는 객체 기반의 프로그래밍 언어 -> 자바스크립트를 구성하는 대부분이 객체

const 객체명 = {
         "속성" : 값,
         "속성2" : 값
}

# 객체의 속성 Property

속성은 키와 값 사이의 연결관계 -> key-value

Javascript의 변수와 유사한데, 객체에 속해있다

▶마침표 표기법 : objectName.propertyName

▶대괄호 표기법 : objectName["propertyName"]

속성에는 값 뿐만 아니라 함수도 할당 가능하다

method : 다른 함수와 동일하게 정의하지만 객체 속성에 할당되어있다

const 객체 = {
  //익명함수로 속성값을 정의한다
  속성: function () {
    console.log("apple");
  },
  //ES6에서는 function 키워드를 생략한 짧은 구문으로 작성이 가능하다다
  속성2() {
    console.log("hello im es6");
  },
};

객체.속성();
객체.속성2();

[Running] node "c:\Users\aldls\Desktop\vscode\learn-html-css-javascript\JS\0109_exam\object-practice.js"
apple
hello im es6

 

# 객체 생성방법

# 리터럴 표기

const foo = {name : ' ... ' };
변수명 : 새로운 객체의 이름
콜론 앞 속성 이름 name : 식별자
콜론 뒤 값 ' ...' : 속성에 할당할 표현식

# 생성자 함수

생성자 함수를 사용하면 탬플릿처럼 사용하여 속성이 동일한 객체를 여러개 생성할 수 있다

생성자 함수가 뭐지?

new 키워드와 함께 객체를 생성하고 초기화하는 함수

생성자 함수를 정의한 후 생성자 함수를 활용하여 객체 인스턴스를 생성한다

▶생성자 함수는 대문자로 시작

▶this 키워드로 속성을 정의하여 생성될 인스턴스를 가리키게 한다

▶new 연산자를 활용하여 인스턴스 생성한다

//생성자 함수는 무조건 대문자로 시작한다
function Person(name, age) {
  //this 키워드로 속성을 정의한다
  this.name = name;
  this.age = age;
}
//인스턴스 생성
new Person("jinny", 100);

# Object.create

생성자 함수처럼 동일한 속성값을 갖는 객체를 생성할 수 있다

Object는 자바스크립트에 내장되어 있는 빌트인 객체이며 create는 바로 사용할 수 있는 정적 메소드이다

const Person = {
  name: "jinny",
  age: 100,
  getName: function () {
    console.log(this.name);
  },
};

//getName 메소드를 통해서 제대로 할당된 것 확인
const jieun = Object.create(Person);
jieun.name = 'jieun';
jieun.getName();

 

# Object 객체에 대해서 더 알아보자

▶생성자 : new Object()

▶인스턴스 Method

• hasOwnProperty()
• isPrototypeOf(), propertyIsEnumerable()
• toLocaleString(), toString(), valueOf()

▶ 정적 Method - 객체와 관련

• assign : 객체 복사
• create : 객체 신규 생성
• freeze, preventExtensions, seal : 객체 고정
• isExtensible, isFrozen, isSealed : 객체 상태 확인
• entries, fromEntries : 객체를 배열로 반환
• getOwnPropertyOf, setOwnPropertyOf : 객체 prototype

▶ 정적 Method - 객체 속성 관련

• defineProperty, defineProperties : 객체 속성 추가
• getOwnPropertyDescriptor, getOwnPropertyDescriptors : 객체 속성 서술자
• getOwnPropertyNames, keys, getOwnPropertySymbols : 객체 속성 열거

▶ 정적 Method - 객체 속성의 값 관련

• is : 객체 값 비교
• values : 객체 값 열거

---

# 객체 속성 control

# 객체 속성 조작하기

- 객체는 원시타입과 다르게 변경 가능한 값이다

- 객체는 전달하는 과정에서 참조 형태로 전달된다 -> 객체 변경시 참조된 객체들도 닽이 변경되는 문제점 야기

- 따라서 의도한 동작이 되기 위해서는 적절한 조작이 필요하다

 

1. 객체의 속성 동적 생성

객체에 존재하지 않는 속성을 참조하고 할당문을 통해 값을 할당하면 속성이 동적으로 생성되고 추가된다

//객체 속성 동적 생성
const person = {
  name: "jinny",
  age: 100,
};

//person객체에 없는 속성은 gender를 입력하면 어떻게 될까?
person.gender = "female";
person;

console.dir(person);

//gender 속성이 동적으로 추가되었다

{ name: 'jinny', age: 100, gender: 'female' }

2. 객체의 속성들 나열하기

① for ... in : 모든 열거 가능한 속성 순회

② Object.keys(객체) : 객체 자신의 열거 가능한 속성 이름을 배열로 반환

③ Object.getOwnPropertyNames(객체) : 객체 자신만의 모든 속성을 배열로 반환

//parent 객체 생성
const parent = {
  age: 200,
  gender: "male",
};

function Child(name) {
  this.name = name;
}

//Child의 prototype을 parent 객체로 설정
//child 객체가 parent 객체의 속성 상속 가능
Child.prototype = parent;

const child = new Child("kim");

//child 객체의 속성 이름들 배열로 반환
Object.keys(child);

//child 객체의 모든 속성 이름들을 배열로 반환
Object.getOwnPropertyNames(child);

//for in문으로 나열하니 prototype에 있는 속성까지 나열됨
for (const key in child) {
  console.log(key);
}

3. 객체의 속성 삭제하기

① delete 연산자로 속성 삭제

② delete 속성 이름

③ 반환값 true

delete parent.age;

console.dir(parent);

{ gender: 'male' } //age 속성 삭제됨

---

# 객체 비교와 복사

객체는 참조 타입이다 -> 모든 연산이 참조값(메모리 주소)로 처리

# 객체 비교

객체를 서로 비교하면 객체 속성과 값이 같은 객체여도 참조값이 다르므로 서로 다르다

const a = {
  name: "apple",
};

const b = {
  name: "apple",
};

//같은 글자를 비교했지만 참조값이 달라서 false
console.log(a === b);

 

동일한 객체를 생성해야 할 때 어떻게 하지?

▶ 얕은 복사

복사된 객체의 속성 중 하나라도 같은 참조를 하고 있게 되면, 얕은 복사로 되었다고 한다.

객체의 속성 중 참조타입이 없는 경우에만 권장

//assign을 이용한 얕은 복사
const jina = Object.assign({}, person);

//spread 연산자를 이용한 얕은 복사
const minsu = { ...person };

jina.name = "jina Kim";
minsu.name = "minsu Choi";

//설정한 대로 이름이 변했다
console.log("jina : ", jina);
console.log("minsu : ", minsu);

//jina와 minsu는 얕은 복사이기 때문에 객체 비교시 false
console.log(jina === minsu);
//address 비교시 true, 얕은 복사이기 때문에 내부 참조 타입은 동일하다
console.log(jina.address === minsu.address);

jina.address.country = "America";
//나라를 바꾸고 다시 비교하면 어떻게 될까?
console.log("jina : ", jina);
console.log("minsu : ", minsu);

//minsu의 나라까지 바꼈다!

얕은 복사는 객체를 복사할 때 해당 객체의 속성들을 새로운 객체에 복사한다

속성 값이 참조 타입(객체, 배열 등)인 경우 참조가 복사되어 같은 객체를 참조하게 된다

즉, 얕은 복사로 참조 타입을 변경하면 해당 속성을 참조하고 있는 다른 객체들의 참조 타입도 바뀐다!

# 참조 타입 복습

변수에 직접 값을 저장하는 것이 아니라 값이 위치한 메모리의 주소를 저장하는 것

 

▶ 깊은 복사

복사된 객체의 속성 중 하나라도 같은 참조를 하고 있는 속성이 없다면 깊은 복사이다

객체 또는 배열의 내용물 뿐만 아니라, 내부에 중첩된 객체나 배열까지 모두 복사하는 것

객체 내의 모든 값들을 재귀적으로 복사하여 완전히 새로운 객체를 생성한

재귀함수를 이용한 복사, JSON.stringify 두 가지 방법이 있다

// lodash 라이브러리를 사용한 깊은 복사
import cloneDeep from "lodash/cloneDeep";

const person = {
  name: "jinny",
  address: {
    country: "Korea",
    city: "seoul",
  },
};

// lodash의 cloneDeep을 사용하여 깊은 복사 수행
// human은 persom과 다른 메모리 주소를 가지면서 내용이 동일한 복사본이 된다
const human = cloneDeep(person);

// JSON.stringify를 사용한 부분 수정
// persom 객체를 JSON 형식의 문자열로 변환하고
// JSON.parse 를 사용하여 다시 객체로 변환한다
const personStr = JSON.stringify(person);
const minsu = JSON.parse(personStr); // JSON.parse를 사용하여 문자열을 객체로 변환

// 주소값이 다르다 -> 깊은 복사가 제대로 수행되었다
console.log(person.address === human.address); // false
console.log(person.address === minsu.address); // false

human.address.country = "America";

console.log("person : ", person);
console.log("human : ", human);
console.log("minsu : ", minsu);

---

# 객체의 종류

# 객체의 분류

# 표준 빌트인 객체 ECMAScript

▶ 정적 static : 속성, method

▶ 인스턴스 instance : 속성, method

{{객체.prototype.인스턴스method}}

- 기본적으로 Object 객체의 속성을 상속 받는다

- 함수로써 바로 호출 사용한다

# 기초 객체 : Object, Function, Boolean, Symbol

• 오류 객체 : Error
• 숫자 및 날짜 : Number, BigInt, Math, Date
• 텍스트 처리 : Regex(정규표현식), String(문자열)
• Collection : Array, Map, Set

▶ Number 객체

숫자를 표현하고 다룰 때 사용하는 원시 래퍼 객체

//Number 객체 알아보기

const exam = [
  //Number 타입으로 전환
  Number("1.2"),
  Number("abc"),
  //Number 타입 최댓값
  Number.MAX_VALUE,
  Number.NaN,
  //NaN인지 확인
  Number.isNaN(1),
  //유한한지 확인
  Number.isFinite(Infinity),
  //정수인지 확인
  Number.isInteger(3),
  Number.isInteger(1.23),
];

console.log(exam); //[ 1.2, NaN, 1.7976931348623157e+308, NaN, false, false, true, false ]

변수 또는 객체의 속성이 숫자를 가지고 있으면 Number 객체 인스턴스 생성 없이

Numver의 인스턴스 속성과 메서드가 사용 가능하다

//Number 생성자 함수
const num = 2.3154;

num.toFixed(2);
(123456).toLocaleString("ko");

▶ Math 객체

수학적인 상수와 함수를 위한 속성과 메서드를 가진 빌트인 객체

Math는 생성가자 아니라 정적 속성과 메서드만 지원한다

// Math 객체를 알아보자

Math.PI; //파이값
Math.abs(-25850); //절대값
Math.pow(2, 4); //제곱
Math.sqrt(9); //제곱근
Math.ceil(1.35); //올림
Math.floor(5.36); //내림
Math.round(1.5); //반올림
Math.max(2, 6); //큰값
Math.min(6, 4); //작은값
Math.random(); //랜덤값

▶ Date 객체

1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 빌트인 객체

//Date 객체를 알아보자
const dateExam = [
  Date.now(),
  Date.parse("Nov 27, 2023"),
  Date.UTC(2024, 1, 27),
];

dateExam.forEach((item) => console.log(item)); 
// 1704986925932
// 1701010800000
// 1708992000000

▶ Date 인스턴스 메서드

1. 시간 갖고 오기

• 연, 월, 일, 요일 : getFullYear(), getMonth(), getDate(), getDay()
• 시, 분, 초, 밀리초 : getHoues(), getMinutes(), getSeconds(), getMilliseconds()
• UTC 기준 한국시간은 9시간 차이, getHours와 getUTCHours만 차이

//getMonth 에서 1월은 0부터 시작해서 12월은 11이다
new Date().getMonth();
//getDay 에서 일요일이 0부터 시작해서 토요일이 7이다
new Date().getDay();
//현지에 맞는 요일 문자열 얻기
new Date().toLocaleDateString({ weekday: "long" })

2. 시간 set하기

• 연, 월, 일, 요일 : setFullYear(), setMonth(), setDate(), setDay()
• 시, 분, 초, 밀리초 : setHours(), setMinutes(), setSeconds(), setMilliseconds()
• UTC 기준 한국시간은 9시간 차이나므로 setUTCHours 사용시 유의

3. Object 메서드 오버라이딩

//valueOf() Date 객체
new Date().valueOf();
//toString()
new Date().toString(); //Fri Jan 12 2024 01:28:43 GMT+0900 (대한민국 표준시)

# 구조화된 데이터 : JSON

# 제어 추상화 객체 : Promise, Generator, AsyncFunction

#  호스트 객체(브라우저 기준) DOM API

---

# 새로 알게 된 점

이번 Day 11 의 강의 중 절반 정도만 정리하였는데도 양이 상당하다

익숙하지 않은 개념들을 배우기 시작하면서 조금 어려워진 것 같다

객체 관련된 내용을 공부하면서 가장 기억에 남는 것은 얕은 복사와 깊은 복사이다

얕은 복사와 깊은 복사에 대해 대략적으로만 알고 있었다

이번 강의를 통해서 직접 코드를 작성해보고 객체 간의 데이터가 어떻게 변화하는지, 하나의 객체 속성을 변경하였을 때 다른 객체까지 변하는 것을 보면서 이해할 수 있었다

또한 자바스크립트의 다양한 객체 타입을 배우면서 많이 코드를 작성해보고 여러 타입을 사용해보는 것이 객체에 대한 이해를 높이는 데 도움이 될 것이라 생각한다

남은 강의의 절반은 Day 11 2편에서 마저 정리하겠다