[JS] 자바 스크립트 객체 다루기 + 브라우저 객체 모델

객체란?

자바 스크립트의 자료형 관점에서 객체란 키와 값으로 구성된 속성의 집합

객체를 {}를 이용해서 생성하는 방식
-> 리터럴 방식으로 객체 생성

ex)

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

객체는 모든 자료형의 데이터를 값으로 가짐

const person = {
	name : ["Hong", "Gildong"],
    age : 20,
    isAdult : true
}

객체 안에 또 다른 객체나 함수 또한 들어갈 수 있음

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

보통 객체의 키는 문자열로 작성하며, 따옴표를 사용하지 않지만
-> 키 이름에 공백이 있는 경우에는 따옴표를 꼭 사용해야 함

---

객체 속성에 접근하기

1. 대괄호 연산자로 접근
   이때 키는 반드시 따옴표로 감싼 문자열 형태로 작성해야 함

const person = {
	name:"Hong Gildong",
    age:20
};
console.log(person["name"]); // Hong Gildong
console.log(person["age"])l // 20

-> 따옴표를 붙이지 않고 키를 작성하면 객체에서 키가 아닌 name이라는 변수를 찾게 됨

const person = {
	name:{
    	firstName:"Gildong",
        lastName:"Hong"
    },
    likes:["apple", "samsung"],
    printHello:function(){
    	return "hello";
    }
};

console.log(person["name"]); // { firstName:'Gildong', lastName:'Hong' }

console.log(person["name"]["firstName"]); //Gildong

console.log(person["likes"); // ['apple', 'samsung']

console.log(person["likes"][0]); // apple
console.log(person["likes"][1]); // samsung

console.log(person["printHello"]); // [Function:printHello]

// 함수 호출 시 () 사용
console.log(person["printHello"()); //hello

2. 마침표 연산자( . )

객체명과 객체 속성의 키를 마침표 연산자로 연결

const person = {
	name:{
    	firstName:"Gildong",
        lastName:"Hong"
    },
    age:20;
    likes:["apple", "samsung"],
    printHello:function(){
    	return "hello";
    }
};

console.log(person.name.lastName); //Hong
console.log(person.age); //20
console.log(person.likes[0]); // apple
console.log(person.printHello()); //hello

---

객체 속성 값 변경

ex)

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

person.name == "kim"; // 또는 person["name"] = "kim";
console.log(person.name); // kim

---

객체 속성 동적으로 추가 및 삭제

객체 속성에 키로 접근해 값을 재할당하면 기존 속성값 변경가능
-> 해당 키가 객체에 없다면 해당 키와 값으로 구성된 새로운 속성이 객체에 추가됨

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

const person = {};
person.name = {
  firstName:"GilDong",
  lastName:"Hong"
}
person.likes = ["apple", "samsung"];
person.printHello = function(){
  	return "hello";
}

동적으로 삭제 (delete)

const person = {
	name : "Hong Gildong"
};
delete person.name; // 또는 delete person["name"]
console.log(person); // { } 출력

---

객체의 데이터 관리 방법

위 코드를 보았을 때 상수(const)로 선언된 person의 객체의 속성을 추가하거나 삭제할 수 있음
-> 이는 객체 자료형의 특성인 참조 때문

자료형을 기본 자료형과 참조 자료형으로 나누는 이유는 데이터 관리 방식이 다르기 때문

깊은 복사(기존 자료형)

기본 자료형은 변수에 데이터를 할당할 때 데이터 그 자체가 할당됨

ex)

let num = 10;
let copyNum = num; // 변수 num의 데이터를 변수 copyNum에 할당

변수 num에 할당된 데이터를 변수 copyNum에 다시 할당하면, 기본 자료형에서는 자신의 공간에 담고 있던 데이터를 그대로 복사해 전달
-> 즉 num과 copyNum은 각각 독립적으로 10이라는 값을 가지고 있는 상태

let num = 10;
let copyNum = num;
num = 20; // 변수 num을 재할당
console.log(num); // 20
console.log(copyNum); // 10

위 경우 처럼 변수 num값을 바꾸었지만 copyNum 값은 그대로
-> 두 데이터는 연동되어 있지 않음

이처럼 복사한 값을 재할당 할때 한쪽 데이터가 변경되어도 서로 영향을 미치지 않게 복사되는 것을 깊은 복사 라고 함

얕은 복사

기본 자료형과 다르게 참조 자료형은 변수 공간에 데이터가 할당되는 것이 아니고, 데이터가 위치하고 있는 메모리의 주소 값만 할당됨!!
-> 이를 참조한다고 표현

const person = {
	name:"Hong Gildong"
}

-> 여기서 변수 person은 객체의 데이터가 저장된 메모리 주소만 가지고 있게 됨

const person = {
	name:"Hong Gildong"
}

// 재 할당 -> 오류
person = {
  name:"Sucoding"
}; // TypeError: Assignment to constant variable

// 추가 및 변경은 가능
const person = {
  name:"Hong Gildong"
};
person.name = "Hong"; -> 값을 변경해도 주소 값은 동일

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

위 처럼 데이터를 복사했을 때 한족 데이터가 변경되면 다른 쪽 데이터도 변경되어 서로 영향을 받는 것 -> 얕은 복사

---

표준 내장 객체 사용

자바 스크립트에서 기본으로 내장된 객체를 표준 내장 객체라고 함

ex) 문자열을 다루는 String 객체, 배열 자료형을 다루는 Array 객체, 날짜와 시간을 다루는 Date 객체, 수학 수식을 다루는 Math 객체

String(문자열)

기본 자료형에서 문자열을 다룸

문자열에서 사용할 수 있는 속성과 메서드 정의되어 있음

속성

• length : 문자열의 길이 반환

메서드

• includes() : 메서드의 매개변수에 인자로 전달되는 문자열이 대상 문자열에 포함되면 true, 아님 false
• replace() : 대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 한 부분을 찾아서 다른 데이터로 변경한 새로운 문자열 반환
• replaceAll() : 대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 모든 부분을 찾아서 다른 데이터로 변경한 새로운 문자열 반환
• split() : 메서드의 매개변수에 인자로 전달되는 구분자를 이용해 대상 문자열을 여러 개 문자열로 분리한 후, 분리한 문자열을 새로운 배열로 반환
• toUpperCase() : 대상 문자열을 대문자로 변경해 반환
• trim() : 대상 문자열의 앞뒤 공백을 제거한 값 반환
• indexOf() : 대상 문자열과 일치하는 첫 번 째 문자의 인덱스 반환

const email = "test!naver.com";
if(email.includes("@") === false){
	console.log("올바른 이메일 형식이 아닙니다.");
}

const email = "test!naver.com";
if(email.indexOf("@") === -1){
	console.log("올바른 이메일 형식이 아닙니다.");
}

// 문자열 찾지 못하면 -1 반환

---

Array 객체(배열)

기본 자료형 중 배열을 다룸

속성

• length : 배열의 요소 개수를 반환

파괴적 메서드

• push() : 배열의 맨 뒤에 데이터를 추가
• pop() : 배열의 맨 뒤에서 데이터 추출
• unshift() : 배열의 맨 앞에 데이터를 추가
• shift() : 배열의 맨 앞에서 데이터를 추출
• sort() : 배열의 요소를 정렬
• reverse() : 배열의 요소를 역순으로 정렬

비 파괴적 메서드

• forEach() : 배열의 요소를 하나씩 순회하면서, 요소마다 callback 함수 호출
• filter() : 배열의 요소를 하나씩 순회하면서, 요소마다 콜백 함수를 호출해 true를 반환하는 요소만 추출. 추출한 요소로 새로운 배열 만들고 배열 반환
• find() : 배열의 요소를 탐색하면서 주어진 판별 함수를 만족하는 첫번째 값 반환
• findIndex() : 값 대신 인덱스 숫자를 반환하는 것 빼고 find()와 동일
• includes() : 배열에 특정 값이 포함되었는지 확인하고 true,false
• join() : 배열의 모든 요소를 주어진 구분자로 합침

파괴적 메서드 예시

const arr = [10, 20, 30, 40];
arr.push(50); 
console.log(arr); // 10, 20, 30, 40, 50;
arr.pop();
console.log(arr); // 10, 20, 30, 40
arr.unshift(0);
console.log(arr) // 0, 10, 20, 30, 40
arr.shift();
console.log(arr); // [10,20,30,40]

위 메서드의 경우 원본 데이터가 바뀜

const arr = [10,20,30,40];
arr.forEach(function(v){
	console.log(v);
});
console.log(arr); //10,20,30,40
// 위 경우 원본 데이터를 바꾸지 않음

---

Date 객체(날짜, 시간)

Date 객체를 생성하기 위해서는 new 키워드로 Date 객체의 인스턴스를 생성해야 함

const date = new Date();
// Mon Jan 02 2023 21:06:58 GMT+0900 (Korean Standard Time)

숫자로 데이터를 전달해 생성 가능(월은 1이 아닌 0 부터 시작)

// Sun Dec 25 2022 00:00:00 GMT+0900
const date1 = new Date(2022, 11, 25);

// Sun Dec 25 2022 18:30:50 GMT+0900
const date2 = new Date(2022,11,25,18,30,50);

밑과 같이도 가능

const date1 = new Date("2022-12-25");
const date2 = new Date("2022/12/25/18:30:50");

날짜와 시간 데이터를 Date 객체의 인스턴스로 만들었을 때 가장 불편한 점은 현실에서 사용하는 형식과 다름
-> 우리가 익숙한 시간이 아닌 뒤에 GMT+0900 처럼 표준시 형식이 붙음
-> 메서드들을 통해 날짜와 시간 정보 설정 가능

Date 객체의 메서드

종류	설명
getFullYear()/setFullYear()	연도를 4자리 숫자로 표시
getMonth()/setMonth()	월을 0부터 11까지의 숫자로 표현(1 -> 0, 12 -> 11)
getDate()/setDate()	일을 1부터 31까지의 숫자로 표현
getDay()	요일을 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까지의 숫자로 표시

ex)

const date = new Date(2022, 11, 25, 18, 30, 50);
const dateFormat = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}-${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
console.log(dateFormat); // 2022-12-25 18:30:50

getTime() 메서드를 통해 두 날짜 사이의 간격 구할 수 있음

const date1 = new Date('2022-12-23');
const date2 = new Date('2022-12-25');
const dateDiff = date2.getTime() - date1.getTime();
const interval = dateDiff / (24 * 60 * 60 * 1000);
console.log(`두 날짜의 차이는 ${interval}일입니다. `); 
// 두 날짜의 차이는 2월

---

Math 객체(수학 연산)

Math.floor() : 내림
Math.ceil() : 올림
Math.round() : 반올림
Math.random() : 0~1 사이 난수 반환

ex)

function getMaxRandom(max){
	return Math.floor(Math.random() * max) + 1;
}

const maxRandom = getMaxRandom(20);
console.log(maxRandom); // 0 이상 20 이하의 무작위 정수

난수의 최대 최소 정하기

function getMaxRandom(min,max){
  // 20 제외하고 싶으면 +1 제외
  return Math.floor(Math.random() * (max-min)) + 1 + min;
}
const maxRandom = getMinMaxRandom(10,20);
console.log(maxRandom); // 10 이상 20이하의 무작위 정수

배열 요소 중 가장 큰 수를 출력하는 코드 완성

const arr = [10,120,30,50,20];
let max = -9999;

arr.forEach( x => {
    if(x > max){
        max = x;
    }
});

console.log(max);

---

브라우저 객체 모델 사용하기

자바 스크립트 언어 사양에 포함되지 않고, 웹 브라우저에서 제공하는 객체 존재
-> 이를 브라우저 객체 모델(Browser Object Model : BOM)이라 함

종류	설명
window	웹 브라우저가 열릴때 마다 생성되는 최상위 관리 객체
document	웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체
location	웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
history	웹 브라우저에 저장된 방문 기록이 포함된 객체
window	웹 브라우저가 열릴때 마다 생성되는 최상위 관리 객체
navigator	웹 브라우저 정보가 포함된 객체
screen	웹 브라우저의 화면 정보가 포함된 객체

---

window 객체의 속성과 메서드

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() : 새로운 웹 브라우저 창을 염
• close() : 웹 브라우저 창을 닫습니다
• setTimeout() : 일정시간(ms) 뒤에 콜백 함수를 한번만 실행
• setInterval() : 일정시간(ms)마다 콜백 함수를 반복적으로 실행
• clearInterval : setInterval() 메서드로 반복 실행하는 함수를 중지
• scrollTo() : 웹 브라우저의 스크롤을 위치만큼 이동
• scrollBy() : 웹 브라우저의 스크롤을 현재 위치에서 상대적 위치로 이동

---

widnow 객체의 기본 속성 사용

window 객체의 속성은 주로 웹 브라우저의 창과 관련 있는 속성이 많음

코드예시
-> button 태그에 사용한 onclick 속성은 이벤트 다루는 파트에서 자세히

<body>
	<button onclick="printinfo()">window 객체 속성</button>
    <script>
    	function printInfo(){
        	console.log(`웹 브라우저의 너비 : ${window.innerWidth}`);
            console.log(`웹 브라우저의 높이 : ${window.innerHeight}`);
            console.log(`웹 브라우저 창의 너비 : ${window.outerWidth}`);
            console.log(`웹 브라우저의 창의 높이 : ${window.outerHeight}`);
            console.log(`웹 브라우저의 창 위쪽 면과 모니터와의 간격 : ${window.screenTop}/${window.screenY}`);
            console.log(`웹 브라우저의 창 왼쪽 면과 모니터 사이의 간격 : ${window.screenLeft}/${window.screenX}`);
            console.log(`웹 브라우저의 창의 스크롤 가로 위치 : ${window.scrollX}`);
            console.log(`웹 브라우저의 창의 스크롤 세로 위치 : ${window.scrollY}`);
      }
    </script>
</body>

---

웹 브라우저에서 새창 제어하기

window 객체의 open() 메서드는 웹 브라우저에서 새로운 창을 열때 사용

window.open(경로, 이름, 속성);

button 태그를 클릭했을 때 popup.html 파일이 새창 에서 열리게 하고 싶은 경우

<body>
	<button onclick="popup()">팝업</button>
    <script>
    	function popup(){
        	window.open('popup.html', '팝업', 'width=200, height=100');
        }
    </script>
</body>

팝업 버튼 클릭시 popup() 함수가 호출됨
-> popup.html 파일을 새로운 웹 브라우저 창에서 열라는 의미
-> '팝업'은 새창 이름을 팝업이라고 지정하겠다는 뜻(이는 웹브라우저 탭에 보이는 이름이 아니고 open() 메서드로 열리는 창을 내부적으로 구분)
-> 이러한 이유로 여러번 클릭해도 1개의 창만 열림(' ' 로 지정시엔 다름)
-> 새 창의 속성 width,height를 지정하였음

open() 메서드로 열린 새로운 창, 즉 팝업창을 닫는 용도로 close() 메서드 사용

<body>
	<button onclick="window.close()"> 팝업 닫기</button>
</body>

---

웹 브라우저의 스크롤 이동하기

scrollTo() 메서드 : 웹 브라우저의 스크롤 위치를 특정 좌표로 이동하게 함
scrollBy() 메서드 : 웹 브라우저의 스크롤을 현재 위치에서 상대적인 위치로 이동하게 함

window.scrollTo(x좌표, y좌표);
window.scrollBy(x좌표, y좌표);

window.scrollTo(100, 200);
window.scrollBy(100, 200);

위 경우 scrollTo() 메서드는 몇번을 호출하더라도 가로 100px, 세로 200px의 위치로 스크롤이 이동
-> 반면 scrollBy() 메서드는 웹 브라우저 스크롤의 현재 위치에서 상대적인 위치로 움직이기때문에 호출할 때 마다 가로 방향으로 100px, 세로 방향으로 200px씩 계속 이동

/* 객체 리터럴을 전달 받을 수도 있음 */
window.scrollTo({left:100, top:200});
window.scrollBy({left:100, top:200});

/* behavior 속성을 통해 이동 느낌을 정할수도 있음 */
window.scrollTo({top:4000, behavior:'smooth'});
window.scrollBy({top:600, behavior:'smooth'});

---

코드 예시

사용자의 모니터 화면에 가로 500px, 세로 300px로 구글 팝업창

<body>
	<button onclick="popup()">구글 페이지 버튼</button>
    <script>
    	function popup(){
            const left = (screen.availWidth - 500) / 2 + window.screenX;
            const top = (screen.availHeight - 300) / 2;
        	window.open('https://www.google.com', '구글 창', 
            'width : 500, height = 300, left=' + left + ', top=' + top);
      }
    </script>
</body>

left,top은 화면 중앙에 팝업창을 위치시키기 위한 코드