객체

켄·2023년 7월 1일

자바스크립트는 객체 기반 프로그래밍 언어입니다,
객체를 구성하는 요소로는

속성 Property
기능 Method

이 있습니다.

🖥️ TV는 객체(Object)
🔊 켜기, 끄기, 볼륨조절 등의 기능은 메서드(Method)
🎨 너비, 높이, 색상, 무게 등은 속성(Property)

<script>
document.write()
document는 문서 객체이며
문서 출력 메서드인 write()를 사용하면 데이터를 문서에 출력할 수 있습니다.
</script>

TV의 기능은 다음과 같이 사용해야 합니다.

<script>
TV.켜다();
TV.끄다();
TV.음소거();
</script>

TV의 너비와 색상, 속성 정보와 속성값 바꾸기.

<script>
  TV.width;
  TV.color; // TV의 속성값을 가져옵니다.
  
  TV.color = black; // TV의 속성값을 바꿉니다.
</script>

객체의 종류

객체는 크게

1. 내장 객체 (Bulit-in Object)
2. 브라우저 객체 모델 (BOM, Browser Object Model)
3. 문서 객체 모델 (DOM, Document Object Model)

이 있습니다.

1. 내장 객체
자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용할 수 있습니다.
내장 객체로는
- 문자(String)
- 날짜(Date)
- 배열(Array)
- 수학(Math)
등이 있습니다.

2. 브라우저 객체 모델
브라우저에 계층 구조로 내장되어 있는 객체를 말합니다.
- window
- screen
- location
- history
- navigator
등이 있습니다.

3. 문서 객체 모델
HTML 문서 구조를 말합니다.
<html>
<head>
<body>
등이 있습니다.
자바스크립트를 이용해 이미지의 src 속성을 바꾸고 싶다면
지정된 <img>를 선택해 src 속성을 바꿔야 합니다.

내장 객체

1. 내장 객체 생성하기

객체 리터럴 문법. 이 방법을 주로 사용합니다
- 장점: 직관적이고 간편하게 사용된다.
- 단점: 단 하나의 객체만 생성되기 때문에 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우에는 비효율 적이다.

<script>
let tv = {};
  
// 객체 리터럴 예시
let tv = { // 간단하지용? 중괄호를 이용해 생성합니다. 키: 값, 으로 구성합니다.
  color: "white", // 쉼표로 구분
  price: 300000
  };
  
// 값 불러오는 법
alert(tv.color); // 'white'
alert(tv.price); // 300000

// 대괄호 표기법을 이용해 값 불러오는 법
alert(tv[color]); // 'white'
  
  
//값 추가
tv.new = true;
  
// 대괄호 표기법을 이용해 값 추가
tv["new"] = true;

  
//값 삭제
delete tv.color;

//대괄호 표기법을 이용해 값 삭제
delete tv[color];
  
  
// 프로퍼티 이름. 띄어쓰기나 여러 단어를 조합해 만든 키는 따옴표로 묶어야함.
let tv = { 
	"tv user": null;
}
  
  
// 대괄호 표기법 을 사용하면 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.
let bird = "likes birds"; // 평가 결과 likes birds

// user["likes birds"] = true; 와 같습니다.
user[bird] = true;
</script>

책에는 생성자 함수 사용법 밖에 없네요(옛날 책이라 그런가)
제가 전에 정리해놓은 글이 있으니 자세한건 링크 참고 바랍니다.

생성자 함수 사용법.
- 장점: 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우 템플릿 역할을 하기 때문에 효율적이다.
- 단점: new 연산자를 붙히지 않고 호출을 하게 되면 일반함수를 호출하는 것이 된다.(일반 함수와 차이가 없다.)

<script>
  let tv = new Object(); // 생성자 함수 사용
  
// 생성자 함수 예시
let tv = new Object();
  tv.color = "white";
  tv.price = 300000;
  tv.info = function(){
	document.write("tv 색상: " + this.color, "<br>"); 
  	document.write("tv 가격: " + this.price, "<br>");
    // this는 메서드의 객체를 가르킵니다.(tv)
  }

  document.write("tv 객체 메서드 호출")
  tv.info();

// 결과
  tv 객체 메서드 호출
  tv 색상: white
  tv 가격: 300000
</script>

2. 날짜 정보 객체 생성하기

날짜나 시간 관련 정보가 필요할 땐 날짜 객체를 생성합니다.

<script>
  참조 변수 = new Date();
  let birthDay = new Date();
</script>

현재 날짜가 아닌 특정 날짜의 정보가 필요할 땐 이렇게 작성합니다.

<script>
  참조 변수 = new Date("년/월/일");
  참조 변수 = new Date(년,월-1,일); // 월 빼기 1
  
  let birthDay= new Date("1997/8/24");
  let birthDay= new Date(1997,7,24);
</script>

Date 객체의 메서드. 날짜 정보 객체는 정보를 가져오는 메서드와 수정하는 메서드로 나뉩니다.

정보를 가져올 때(GET)	기능	정보를 수정할 때(SET)	기능
getFullYear()	연도	setFullYear()	연도만 수정
getMonth()	월(현재 월 -1)	setMonth()	월만 수정(현재 월 -1)
getDate()	일	setDate()	일만 수정
getDay()	요일(일: 0 ~ 토:6)	X	요일은 날짜를 바꾸면 자동으로 바뀝니다.
getHours()	시	setHours()	시만 수정
getMinutes()	분	setMinutes()	분만 수정
getSeconds()	초	setSeconds()	초만 수정
getMilliseconds()	밀리초	setMilliseconds()	밀리초만 수정
getTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 표기	setTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 수정

예시1 : 현재 날짜 정보와 내가 태어난 날의 요일을 알아내기.

//** 월-1으로 6이 출력되기 때문에,
의도적으로 1을 더해주었습니다. (오늘은 7월입니다.)
Day(요일)는 일0 ~ 토6 으로 출력되기 때문에,
제가 태어난 요일은 수요일이었네요. 처음 알았습니다.

<script>
let today = new Date();
let nowMonth = today.getMonth() + 1, //**
  nowDate = today.getDate(),
  nowDay = today.getDay();

console.log("오늘 날짜 정보");
console.log("현재 월" + nowMonth);
console.log("현재 일" + nowDate);
console.log("현재 요일" + nowDay);

let birthDay = new Date(1997, 7, 24);
let BDmonth = birthDay.getMonth() + 1, //**
  BDdate = birthDay.getDate(),
  BDday = birthDay.getDay();

console.log("내 생일");
console.log("내 생일 월" + BDmonth);
console.log("내 생일 일" + BDdate);
console.log("내 생일 요일" + BDday);
</script>
결과:
오늘 날짜 정보
현재 월7
현재 일1
현재 요일6
내 생일
내 생일 월8
내 생일 일24
내 생일 요일3

예시2: 연말까지 남은 날 구하기(D-day)
계산법은

남은 일 수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체

밀리초로 계산한 시간값

1초: 1,000(msc)
1분(60초): 1,000 * 60 = 60,000(msc)
1시간(60분): = 1,000 * 60 * 60 = 3,600,000v(msc)
1일(60분*24): 1,000 *60 *60 *24 = 86,400,000(msc)

<script>
let today = new Date(); // 날짜 객체 생성
let nowYear = today.getFullYear(); // 오늘 날짜

let theDate = new Date(nowYear, 11, 31); // 연말 날짜. 12월-1
let diffDate = theDate.getTime() - today.getTime(); // 연말 날짜에서 현재 날짜를 뺍니다.

let result = Math.ceil(diffDate / (60 * 1000 * 60 * 24)); // 계산한 값을 1일 단위로 계산, 오늘 날짜까지 포함시키기 위해 Mate.ceil() 메서드를 사용해 반올림 합니다.

console.log("연말 D-day: " + result + "일 남았습니다.");
</script>
결과:
연말 D-day: 183일 남았습니다.

3. 수학 객체

산술 연산자로는 구할 수 없는 최댓값, 최솟값, 반올림값 등의 수학과 관련된 일련의 작업들을 처리할 수 있습니다.

수학 객체의 메서드 및 상수

종류	설명
Math.abs(숫자)	숫자의 절댓값 반환 0 혹은 양수
Math.max(숫자 1, 숫자 2, 숫자 3, 숫자 4)	숫자 중 가장 큰 값 반환
Math..min(숫자 1, 숫자 2, 숫자 3, 숫자 4)	숫자 중 가장 작은 값 반환
Math.sqrt(숫자)	숫자의 제곱근값을 반환
Math.pow(숫자, 제곱값)	숫자의 거듭제곱값 반환
Math.random()	0~1 사이의 난수를 반환. 0은 포함되나 1은 포함되지 않음
Math.round(숫자)	소수점 첫째 자리에서 반올림 후 정수를 반환
Math.ceil(숫자)	소수점 첫째 자리에서 무조건 올림하여 정수를 반환
Math.trunc(숫자)	소수점 이하 삭제하고 정수를 반환
Math.floor(숫자)	소수점 첫째 자리에서 무조건 내림하여 정수를 반환
Math.PI	원주율 상수를 반환(파이 3.14)
.toFixed(숫자)	소수점 자리수 제어 후 출력
isNaN(값)	NaN이면 true, NaN이 아니면 false로 반환.

Math.random( ) 메서드를 사용하여 지정한 숫자 구간에서 난수(임의의 정수)를 반환하는 법

<script>
  Math.random()*10 // 0부터 10까지 실수로 난수를 반환합니다.
  Math.random()*10 + 1 // 10도 포함시키려면 +1을 해줍니다.
</script>

Math.random( )을 이용해 0~10까지 정수로만 난수를 반환하려면 Math.trunc( )도 사용해야 합니다.

<script>
  Math.trunc(Math.random() * 10 + 1) // 10도 포함시키려 +1을 했습니다.
</script>

Math.random( )을 이용해 원하는 구간의 난수를 정수로만 발생하게 하려면?

<script>
  Math.trunc(Math.random() * (최댓값 - 최솟값 + 1)) + 최솟값;
  // 좀 복잡하네요 ^^;
  
  Math.trunc(Math.random() * (150 - 120 + 1)) + 120;
  //120~150(포함) 사이의 난수를 정수로 반환
</script>

예시: 가위 바위 보 맞추기 게임!

<script>
      document.write("<h1>가위 바위 보 맞추기</h1>");

      let game = prompt("가위, 바위, 보 중에 선택하세요!", "가위"); 
      let gameNum; // 일단 선언해 줍니다.

      switch (game) { // game에 입력한 문자열에 따라 gameNum에 1, 2, 3이 저장됩니다.
        case "가위":
          gameNum = 1;
          break;

        case "바위":
          gameNum = 2;
          break;

        case "보":
          gameNum = 3;
          break;

        default:
          alert("바르게 입력하세요^^");
          location.reload();
      }

      let com = Math.ceil(Math.random() * 3); 
  	  // ceil은 무조건 올림이기 때문에 원래는 0~2지만 1~3이 됩니다.

      if (gameNum == com) { // 사용자가 입력한 gameNum과 랜덤 수 com이 일치하는지 검사.
        document.write("맞췄습니다! 히히");
      } else {
        document.write("틀렸습니다. 뿌앵");
      }
</script>

4. 배열 객체(Array Object)

변수를 이용해 데이터를 저장하려면 5개의 변수가 필요합니다.
배열 객체를 사용하면 하나의 배열 객체로 5개의 데이터를 저장할 수 있습니다. 오우!

배열 선언은 대부분 대괄호 방법으로 선언하기 때문에,
new Array()는 설명하지 않겠습니다.

<script>
let fruits = []; // 대괄호
let fruits = new Array();  
</script>

요소를 넣어주면 인덱스 번호가 부여됩니다. 0 부터요.
저장된 데이터를 불러올 때는 인덱스 번호를 사용합니다.

<script>
let fruits = ["사과", "오렌지", "자두"]; 
  
alert( fruits[0] ); // 사과
alert( fruits[1] ); // 오렌지
alert( fruits[2] ); // 자두
  
// 배열 전용 맛도리가 있습니다. for of를 사용하면 배열을 순회할 수 있습니다.
let fruits = ['사과', '오렌지', '자두']

for (let i of fruits){// 배열 fruits의 인덱스만큼 순회하여 변수 i에 저장
    console.log(i);// 값으로 반환
}
결과: 사과 오렌지 자두

</script>

배열 객체에서 사용할 수 있는 메서드와 속성

요소를 더하거나 지우기

종류	설명	비고
push(new data)	맨 끝에 요소를 추가합니다.	배열 자체를 조작
pop()	맨 끝에 요소를 삭제합니다.	배열 자체를 조작
shift()	제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 밀어줍니다.	배열 자체를 조작
unshift()	제일 앞에 요소를 추가합니다.	배열 자체를 조작
concat()	기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가할 때, 배열 객체를 결합할 때	기존 배열은 건드리지 않고 조건을 적용한 새로운 배열을 반환
splice()	요소 추가, 삭제, 교체가 모두 가능합니다.	배열 자체를 조작
slice()	원하는 인덱스 구간만큼 잘라서 배열 객체로 반환.	기존 배열은 건드리지 않고 조건을 적용한 새로운 배열을 반환

배열 변형하기

종류	설명	비고
map(func)	모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦	기존 배열은 건드리지 않고 조건을 적용한 새로운 배열을 반환
sort(func)	배열을 정렬하고 정렬된 배열을 반환함	배열 자체를 조작
reverse()	배열을 뒤집어 반환함	배열 자체를 조작
split/join	문자열을 배열로, 배열을 문자열로 변환함

원하는 요소 찾기

종류	설명	비고
indexOf/lastIndexOf(item, pos)	pos부터 원하는 item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면 -1을 반환함
includes(value)	배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함
find/filter(func)	func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함
findIndex()	find와 유사함. 다만 요소 대신 인덱스를 반환함

기타

종류	설명
length()	배열에 저장된 총 데이터의 개수를 반환.
Array.isArray(arr)	arr이 배열인지 여부를 판단함

배열 순회하기

종류	설명
forEach	다음 매개변수(parameter)와 함께 배열의 각 요소에 적용하게 될 콜백 함수(callback function)를 전달합니다.
for of	배열의 인덱스만큼 순회하여 변수에 저장

정리 글

splice, slice, concat, forEach, indexOf, lastIndexOf, includes, find, findIndex, filter

map, sort, reverse, Array.isArray

pop, push, shift, unshift, length, toStirng

4. 문자열 객체

String Object는 문자영 데이터를 객체로 취급하는 것으로,
자바 스크립트에서 가장 많이 사용합니다.

<script>
  let str = "문자형 데이터";
</script>

문자열 객체의 메서드 및 속성

종류	설명	비고
indexOf("찾을 문자")	왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환. 일치하는 문자가 없으면 -1 반환	문자열에서 문자 또는 문자열의 위치를 검색
str[n]	문자열 내 특정 위치인 n에 있는 글자에 접근하려면 [n]같이 대괄호를 이용합니다.	특정 글자에 접근하기.
slice(시작번호, 끝번호)	문자열의 start부터 end까지(end는 미포함)를 반환합니다. 두 번째 인수가 생략된 경우엔, 명시한 위치부터 문자열 끝까지를 반환합니다. 음수가 될 수도 있습니다. 음수를 넘기면 문자열 끝에서부터 카운팅을 시작합니다.	부분 문자열 추출
substring(시작번호, 끝번호)	slice와 유사하지만 start가 end보다 커도 괜찮다는 데 차이가 있습니다. 음수 인수가 허용되지 않습니다. 음수는 0으로 처리됩니다.	부분 문자열 추출
substr시작 번호, 반환할 글자의 개수)	길이를 기준으로 문자열을 추출합니다. 첫 번째 인수가 음수면 뒤에서부터 개수를 셉니다. slice가 substring보다 좀 더 유연합니다. (음수 인수를 허용하기 때문)	부분 문자열 추출
split("기준문자", 최대분할숫자)	기준문자를 기준으로 분할 숫자만큼 나눠 배열 반환	배열 반환
charAt(인덱스)	지정한 인덱스 문자 추출. 문자 반환	문자열 추출
toLowerCase()	소문자로 케이스 변경
toUpperCase()	대문자로 케이스 변경
.length	문자열의 길이가 저장됩니다.
trim()	문자열 양끝 공백 제거 후 반환. 스페이스, 탭, 줄바꿈 공백 제거
str.repeat(n)	문자열을 n번 반복합니다.