[코딩 자율학습 HTML + CSS + 자바스크립트] Part3. 자바스크립트로 웹 동작 구현하기/ 11장 자바스크립트 객체 다루기

1. 객체

• 데이터를 저장하고 처리하는 기본 단위
• 키(key)와 값(value)으로 구성된 속성의 집합
  • 키: 공백 들어갈 경우 따옴표 사용
• 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있음
  
  • 또 다른 객체 or 함수 들어갈 수 있음
    • 메서드(method): 객체에 정의된 함수
  • ex. 배열, 숫자, 논리 데이터-> 한 객체의 속성으로 추가 

const person = {
	name: ["Hong", "Gildong"],
    age: 20,
    isAdult = true
    printInfo: function() {
    	console.log('printInfo');
    }
};

• {} 이용해 생성 => 리터럴(literal) 방식으로 객체 생성
• 빈 객체: 속성 한 개도 없는 객체
  • const person = {};

속성 = 멤버 변수 = 프로퍼티

---

2. 객체 속성(프로퍼티)

객체 속성에 접근/ 객체 속성 값 변경/ 객체 속성 동적으로 추가/ 객체 속성 동적으로 삭제/ 데이터 관리 방법 이해

객체 속성에 접근

• 대괄호 연산자로 접근
  • []를 사용해 객체의 속성에 접근
  • 배열에서도 사용할 수 있음
  • 키: 큰따옴표나 작은따옴표로 감싼 문자열 형태로 작성 
• 마침표 연산자로 접근
  • .를 이용해 객체 속성에 접근
  • 키: 따옴표 X -> 키 식별자에 공백 O => 대괄호 연산자만 접근

const person = {
	name: { // 객체 리터럴
    	firstNmae: "Gildong", 
        lastName: "Hong"
    },
    age: 20,
    likes: ["apple", "samsung"], // 배열
    printHello: function() { // 함수
    	return "hello";
    }
};

// 대괄호 연산자
console.log(person["name"]); // { firstName:'Gildong', lastName:'Hong' }
console.log(person["name"]["firstName"]); // Gildong
console.log(person["age"]); // 20
console.log(person["likes"]); // [ 'apple', 'samsung' ]
console.log(person["printHello"]); // [Function: printHello]
console.log(person["printHello"]()); // hello

// 마침표 연산자
console.log(person.name.lastName); // Hong
console.log(person.age); // 20 
console.log(person.likes[0]); // apple
console.log(person.printHello()); // hello

---

// do it html+css+자바스크립트 웹 표준의 정석

빈 객체 만들기

// ver 1
let book2 = {}

// ver 2
let book2 = new Object()

중첩 함수

let student = {
	name: "Doremi",
    score: {
    	history: 85, 
        science: 94,
        average: function() {
        	return (this.history + this.science) / 2
        }
    }
}

student.score.history // 85
// 멤버 함수 접근
student.score.average() // 89.5
// average -> 주소 값

객체 메서드 정의

메서드(method)

• 객체의 프로퍼티 중 객체의 동작을 지정하는 함수
• 선언 방법은 일반적인 함수 선언하는 것과 비슷

메서드명: function() {
...
}

let book3 = {
	title: "점프 투 파이썬",
    pages : 360,
    buy : function() { // 익명 함수
    	console.log("이 책을 구입");
    }
}

---

객체 속성 값 변경

키로 속성에 접근 -> 값을 재할당

const person = {
	name: "Hong Gildong"
};
person.name = "Kim"; // or person["name"] = "Kim";
console.log(person.name); // Kim

---

객체 속성 동적으로 추가

객체에 X 속성 -> 해당 키와 값으로 구성된 새로운 속성이 객체에 추가

1. 객체 리터럴 방식으로 빈 객체 생성, 변수에 할당
2. 키에 값을 할당(= 객체 속성에 접근해 값 변경) 

const person = {};
console.log(person); // {}
person.name = "Hong Gildong";
console.log(person); // { name: 'Hong Gildong' }

 

=> 객체 속성에 값을 할당해 접근 -> 해당 속성이 있는지 확인, 속성 X => 새로운 속성을 객체에 추가    

1. 객체 식별자와 키에 마침표 연산자 사용 -> 객체 속성에 접근
2. 할당 연산자로 값을 할당 -> 값 변경 or 새로운 속성 추가  

=> 속성을 동적으로 추가한다: 이미 만들어진 객체에 나중에 속성을 추가하는 것

---

객체 속성 동적으로 삭제

delete 키워드 명시

const person = {
  name:"Hong Gildong"
};

delete person.name; // or delete person["name"]
console.log(person); // {}

---

객체의 데이터 관리 방법 이해

const 키워드로 선언한 상수 변수 -> 재할당 X

But, const 키워드로 선언한 상수 변수에 할당한 객체에 속성 추가 or 삭제 O

=> 참조(reference)

 

데이터 관리 방식 -> 자료형: 기본 자료형/ 참조 자료형

• 깊은 복사(deep copy) - 기본 자료형
  • 복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향 미치지 X 복사
  • 변수에 데이터 할당할 때 데이터 그 자체 할당
    -> 할당된 데이터 다른 변수에 다시 할당 -> 데이터 그대로 복사해 전달
    • 독립적으로 값 가진 상태(연동 X)
• 얕은 복사(shallow copy) - 참조 자료형
  • 데이터 복사했을 때 한쪽 데이터 변경 -> 다른 쪽 데이터도 변경 => 서로 영향 받음
  • 참조한다: 변수 공간에 데이터 할당(기본 자료형) X, 데이터가 위치하고 있는 메모리 주소 값 할당
  • 객체 데이터: 별도의 메모리에 저장, 변수는 객체의 데이터가 저장된 메모리 주소 가짐
    -> 변수에 객체 재할당 => const 키워드 재할당 X -> 오류
  • But, 속성 추가 or 값 변경 O
    
    • 변수에 할당된 객체의 주소 값 그대로, 주소 값이 참조하는 원본 객체 데이터 변경  

// 깊은 복사
let num = 10;
let copyNum = num;
num = 20; // 변수 num 재할당
console.log(num); // 20
console.log(copyNum); // 10

// 얕은 복사
const person = {
  name:"Hong Gildong"
};
const copyPerson = person; // 변수 person에 할당된 객체 -> 변수 copyPerson에 복사
person.name = "Hong"; // 변수 person에 할당된 객체의 값 변경
console.log(person.name); // Hong
console.log(copyPerson.name); // Hong

---

3. 표준 내장 객체 사용

문자열 다루는 String 객체/ 배열 다루는 Array 객체/ 날짜와 시간 다루는 Date 객체, 수학 연산 다루는 Math 객체

 

표준 내장 객체(standard built-in object)

• 자바스크립트에 기본으로 내장된 객체
• 스코프의 위치 따지지 X 모든 영역에서 공통으로 사용 O

문자열: String 객체

속성	length	문자열 길이 반환 (최소 글자 수, 최대 글자 수 확인)
메서드	includes()	메서드의 매개변수에 인자로 전달되는 문자열이 대상 문자열에 포함 O -> true/ X -> false 반환 (특정 문자열이 포함되어 있는지 확인)
	replace()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 한 부분을 찾아 -> 다른 데이터로 변경한 새로운 문자열을 반환
	replaceAll()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 모든 부분 찾아 -> 다른 데이터로 변경한 새로운 문자열을 반환
	split()	메서드의 매개변수에 인자로 전달되는 구분자를 이용 -> 대상 문자열을 여러 개의 문자열로 분리, 분리한 문자열을 새로운 배열로 반환
	toUpperCase()	대상 문자열 -> 대문자로 변경해 반환
	trim()	대상 문자열의 앞뒤 공백을 제거한 값 반환
	indexOf()	대상 문자열과 일치하는 첫 번째 문자의 인덱스 반환 (특정 문자열이 포함되어 있는지 확인, 찾지 X -> -1)

---

배열: Array 객체

• 파괴적 메서드: 메서드 사용했을 때 원본 데이터 변경하는 메서드
  • 배열에 데이터 추가, 추출(제거하고 반환): push(), pop(), unshift(), shift()
• 비파괴적 메서드: 원본을 변경 X 메서드

속성	length	배열의 요소 개수 반환 (배열의 길이)
파괴적 메서드	push()	배열의 맨 뒤에 데이터 추가
	pop()	배열의 맨 뒤에서 데이터 추출
	unshift()	배열의 맨 앞에 데이터 추가
	shift()	배열의 맨 앞에서 데이터 추출
	sort()	배열의 요소 정렬
	reverse()	배열의 요소 역순으로 정렬
비파괴적 메서드	forEach()	배열의 요소를 하나씩 순회하면서 요소마다 콜백(callback) 함수 호출
	filter()	배열의 요소를 하나씩 순회하면서 요소마다 콜백 함수 호출 -> true를 반환하는 요소만 추출 추출한 요소로 새로운 배열을 만들고 만들어진 배열 반환
비파괴적 메서드	find()	배열의 요소를 탐색하면서 주어진 판별 함수를 만족하는 첫 번째 값 반환
	findIndex()	= find() 메서드 But,  값 대신 인덱스 숫자를 반환
	includes()	배열에 특정 값이 포함되어 있는지 확인해 포함 O -> true/ X -> false 반환
	join()	배열의 모든 요소 -> 주어진 구분자로 합침

---

날짜와 시간: Date 객체

• 인스턴스(instance) 만들기
  • Date 객체 호출 -> 날짜와 시간 데이터 생성, 생성되는 데이터: 인스턴스
    => date 변수에 할당된 데이터: Date 객체의 인스턴스
  • 연(year), 월(month), 일(date), 시(hour), 분(minute), 초(second) 정보 -> 숫자로 전달해 생성하는 방법
    • 월: 0부터 시작(1월: 0/ 12월: 11)
  • 문자열로 원하는 날짜와 시간 데이터 생성
    • 월: 그대로 전달 

const date = new Date();

const date1 = new Date(2022, 11, 25); // Sun Dec 25 2022 00:00:00 GMT+0900 (한국 표준시)
const date2 = new Date(2022, 11, 25, 18, 30, 50);  // Sun Dec 25 2022 18:30:50 GMT+0900 (한국 표준시)

const date1 = new Date("2022-12-25"); // Sun Dec 25 2022 09:00:00 GMT+0900 (한국 표준시)
const date2 = new Date("2022/12/25/18:30:50"); // Sun Dec 25 2022 18:30:50 GMT+0900 (한국 표준시)

• Date 객체의 인스턴스에 할당된 날짜와 시간 -> 일반적인 형식으로 가공
  
  • get 메서드: 날짜와 시간 정보 가져
  • set 메서드: 날짜와 시간 정보 설정 

getFullYear()/ setFullYear()	연도) 4자리 숫자로 표시
getMonth()/ setMonth()	월) 0 ~ 11까지 숫자로 표시(1월 → 0/ 12월 → 11).
getDate()/ setDate()	일) 1 ~ 31까지 숫자로 표시
getDay()	요일) 0 ~ 6까지 숫자로 표시(일요일 → 0/ 토요일 → 6).
getTime()/ setTime()	1970년 1월 1일 12:00 이후의 시간 -> 밀리초(1/1000초) 단위로 표시
getHours()/ setHours()	시) 0 ~ 23까지 숫자로 표시합니다.
getMinutes()/ setMinutes()	분) 0 ~ 59까지 숫자로 표시
getSeconds()/ setSeconds()	초) 0 ~ 59까지 숫자로 표시
getMilliseconds()/ setMilliseconds()	밀리초) 0 ~ 999까지 숫자로 표시

• 날짜 간격 계산
  • getTime() 메서드: 1970년 1월 1일 12:00 이후의 시간 -> 밀리초 단위로 반환
  • 두날짜 사이의 간격 -> 일수로 환산: (미래 날짜 - 과거 날짜) / (24 * 60 * 60 * 1000) 

const date = new Date().getTime;

---

수학 연산: Math 객체

• Math.floor(): 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수 반환(내림)
• Math.ceil(): 주어진 숫자와 같거나 큰 정수 중에서 가장 작은 수 반환(올림)
• Math.round(): 주어진 숫자를 반올림한 수와 가장 가까운 정수 반환(반올림)
• Math.random(): 0 이상 1 미만의 난수 반환

// 난수 최솟값 
function getMinMaxRandom(min, max){
  return Math.floor(Math.random() * (max - min)) + 1 + min; // 20 제외하고 싶으면 + 1 삭제
}

console.log(getMinMaxRandom(10, 20)); // 10 이상 20 이하의 무작위 정수

---

4. 브라우저 객체 모델 사용

window 객체의 속성과 메서드/ 웹 브라우저에서 새 창 제어/ 웹 브라우저의 스크롤 이동

 

브라우저 객체 모델(BOM; Browser Object Model)

• 자바스크립트 언어 사양에 포함 X 웹 브라우저에 제공하는 객체

• window 객체: 웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
• document 객체: 웹 문서와 관련 있는 기능, HTML 문서 정보
• location 객체: 현재 URL 정보  
• history 객체: 방문 기록 정보
• navigator 객체: 웹 브라우저의 정보
• screen 객체: 방문자의 화면 정보

window 객체의 속성과 메서드

속성	innerWidth	웹 브라우저 화면의 너비 -> px(픽셀) 단위로 나타냄
	innerHeight	웹 브라우저 화면의 높이 -> px 단위로 나타냄
	outerWidth	웹 브라우저 창의 너비 -> px 단위로 나타냄
	outerHeight	웹 브라우저 창의 높이 -> px 단위로 나타냄
	screenTop/ screenY	웹 브라우저 위쪽 면과 모니터의 간격 -> px 단위로 나타냄
속성	screenLeft/ screenX	웹 브라우저 왼쪽 면과 모니터의 간격 -> px 단위로 나타냄
	pageXOffset/ scrollX	웹 브라우저의 수평 스크롤 위치 -> px 단위로 나타냄
	pageYOffset/ scrollY	웹 브라우저의 수직 스크롤 위치 -> px 단위로 나타냄
메서드	alert()	알림창 표시
	confirm()	확인창 표시
	prompt()	입력창 표시
	open()	새로운 웹 브라우저 창 열기 window.open(경로, 이름, 속성);/ 속성 -> width/ height/ left/ top
	close()	웹 브라우저 창 닫기 window.close();
	setTimeout()	일정 시간(ms) 뒤에 콜백 함수를 한 번만 실행
	setInterval()	일정 시간(ms)마다 콜백 함수를 반복적으로 실행
	clearInterval	setInterval() 메서드로 반복 실행되는 함수 중지
	scrollTo()	웹 브라우저의 스크롤 -> 특정 위치만큼 이동 window.scrollTo(x좌표, y좌표); window.scrollTo({left: 100, top: 200}); // 객체 리터럴 전달
	scrollBy()	웹 브라우저의 스크롤 -> 현재 위치에서 상대적 위치로 이동 window.scrollBy(x좌표, y좌표) window.scrollBy({top: 600, behavior: 'smooth'}); // *behavior 속성 전달

*smooth: 웹 브라우저 스크롤이 해당 위치로 마우스 휠 굴리듯이 부드럽게 이동

---

출처

코딩 자율학습 HTML + CSS + 자바스크립트