23.04.13 / 내장객체

[ 내장객체 ]

- 문자, 날짜, 배열, 수학 개체 등  
- 주로 new 연산자를 활용하여 객체화 한다. 
  ( let 변수 = new 생성자함수(); )
- 브라우저 객체 모델(BOM) : window, screen, location, history, navigator 
- 문서 객체 모델(DOM) : html구조가 저장된 객체, window 객체의 하위에 있다. 
  (각 문서 구조를 컨트롤 및 이벤트를 처리할 때 쓴다. css의 값도 변경 가능)

[ 날짜 객체 ] 
- 날짜 정보를 얻거나, 날짜 정보에 관련된 작업을 할때 쓰인다. 
- 날짜의 정보는 사용자의 컴퓨터의 시간을 참조한다.
- 구문 : let 변수 = new Date();
- 1000의 정수값은 1초이다.


[ 날짜 객체가 지닌 메서드 ]

let date = new Date();

date.setDate(date1.getDate() + 1); // 하루 뒤 날짜를 출력하고싶을 때

const dayArr = ['일', '월', '화', '수', '목', '금', '토'];

date.getFullYear(); // 년
date.getMonth(); // 월은 0부터 시작한다. (+1 해줘야 함) 
date.getDate(); // 일
dayArr[date.getDay()];  // 요일은 숫자로 표시된다. (문자열과 연결해줘야 함)​

const date1 = new Date(); // 오늘 날짜
const date2 = new Date('2023-04-13'); // 특정 년,월,일만 가져오겠다. 
const date3 = new Date('2023-04-13 10:00:00'); // 특정 년,월,일,시간 가져오겠다. 
const date4 = new Date('2023/04/13'); // 특정 년,월,일만 가져오겠다. 
const date5 = new Date(2023, 04, 13);	// 월 +1 돼서 5월 13일로 출력됨
const date6 = new Date(2023, 03, 31);	// 월 +1 돼서 4월 31일 인데 4월은 31일이 없기 때문에 5월 1일로 출력됨

[ 날짜의 차이를 구하기 ]

let date2 = new Date();
let date1 = new Date('2023-04-30');

let diff = date1 - date2;
console.log(diff); //1459932678

let diff2 = (date1 - date2) / 1000 / 60 / 60 / 24;
console.log(Math.ceil(diff2)); //17

[ 오늘 날짜에서 25일 후 날짜 출력하기 ]

let today = new Date();

today.setDate(today.getDate() + 25);

//화살표 함수를 이용하기 (한자리 숫자는 앞에 0을 붙여준다)
const formatNum = num => (num < 10) ? `0${num}` : num;
const formatDate = date => {
    const dayArr1 = ['일', '월', '화', '수', '목', '금', '토', '일'];
    let year2 = today.getFullYear();
    let month2 = formatNum(today.getMonth() + 1); 
    // formatNum 함수 내에서 `0${num}` 을 통해 문자열이 되기 때문에 함수 외에서 연산 불가능
    // let month2 = formatNum(today.getMonth()) + 1; -> '04' + 1 -> 041 되어버림 
    let date20 = formatNum(today.getDate());
    let day2 = dayArr1[today.getDay()];
    let result = `${year2}년 ${month2}월 ${date20}일 (${day2}요일)`;
    // 여기서 ${month2 + 1}월 하면 04월이 아니고 031이 출력된다 (문자열대입연산자) 
    return result;
}

let print = formatDate(today);
console.log(print);

[ 수학 객체 ]

//절대값
console.log(Math.abs(-10)); // 10

//반올림
//반올림은 소수점 첫번째 자리에서만 실행된다.
console.log(Math.round(10.45)); // 10 
console.log(Math.round(10.5)); // 11
//소수점 두번째 자리에서 반올림 실행하고 싶을 때
console.log(Math.round(10.45 * 10) / 10); // 10.5 


//올림 해당 숫자와 같거나 큰 정수를 리턴한다.
console.log(Math.ceil(-10.1)); // -10
console.log(Math.ceil(10.1)); // 11
console.log(Math.ceil(10)); // 10

//내림 Math.floor vs parseInt
//Math.floor 해당 숫자와 같거나 작은 정수를 리턴한다.
console.log(Math.floor(-10.1)); // -11
console.log(Math.floor(10.1)); // 10
console.log(Math.floor(10)); // 10

//parseInt 해당 숫자에서 소수점만 지우고 리턴한다.
console.log(parseInt(-10.1)); // -10
console.log(parseInt(10.1)); // 10

[ 난수 발생시켜서 로또 번호 추첨하기 ]
Math.random() 함수는 0부터 0.99999....까지의 숫자 중 하나를 랜덤으로 리턴한다.
때문에 Math.random() 함수에 45를 곱해주면 0부터 44.99999...까지의 숫자 중 하나를 랜덤으로 리턴한다.
결괏값과 같거나 작은 정수를 리턴하는 Math.floor를 사용하면 0부터 44까지의 숫자 중 하나를 랜덤으로 리턴한다.
거기에 +1을 해주면 0부터 45까지의 숫자 중 하나를 랜덤으로 리턴 받을 수 있다.

// 난수 추출 Math.random() 1~45 1게임 : 번호 6개
// 로또 번호 추출 (중복번호 없이)

const lotto = [];
for (let i = 0; i < 6; i++) {
    let num = Math.floor(Math.random() * 45) + 1; // 1~45 난수 발생
    let isContain = false; // 로또 배열의 요소에 발생한 난수 포함 여부 확인

    // 반복문을 통해서 로또에 담긴 요소와 발생한 난수 일치 여부 확인
    for (let arr of lotto) {
        if (num == arr) {
            i -= 1;				// 숫자 다시 뽑아야하기 때문
            isContain = true;
            break;				// 로또에 담긴 요소는 다 다르기 때문에 일치하는 수가 하나 생기면 더 이상 비교하지 않고 바로 빠져나온다.
        }
    } if (isContain) continue;  // isContain이 true면 lott.push를 하지 않고 바로 반복문으로 돌아간다.
    lotto.push(num);
}
/**
특정 문자열을 포함하는지 확인 
구문 : 해당배열.includes(찾는문자열)
if(lotto.includes(num)){
    i-=1;
    continue;
}
**/

/**
배열 요소 인덱스 반환 
구문 : 해당배열.indesOf(찾으려는 요소값)
요소가 존재하면 요소의 인덱스 반환
없으면 -1 반환
if(lotto.indexOf(num) == -1){ 
    lotto.push(num);
}
**/

console.log(lotto);

 

[ 배열 객체 ]
- 하나의 저장소의 공간을 나누어 데이터를 저장하는 객체
- 배열의 요소의 주소는 index이며, 0번 부터 시작한다.
- 배열객체의 메서드 종류
1) push() -> 인덱스 마지막 부터 데이터 저장과 인덱스 자동 증가
2) unshift() -> 인덱스 0번째에 데이터 저장 (데이터 밀림)
3) pop() - > 배열의 마지막 번째 데이터 제거
4) shift() -> 인덱스 0번째 데이터 제거 (데이터 당김)

const arr1 = new Array(3); //길이가 3인 배열 생성
console.log(arr1); // empty x 3
arr1.push(3);
console.log(arr1); // empty x 3,3
const arr2 = [100, [10, [1, 2], 20], 200, 300, 400];
const arr3 = [...arr2]; // 깊은 복사
const arr4 = arr2 // 얕은 복사
console.log(arr2 == arr3); // false - 깊은 복사하면 주소가 달라진다. (단, 1뎁스 까지만)
console.log(arr3);
console.log(arr2);
arr3.push(1000);    // 똑같이 복사한 상태에서 arr3에만 1000 넣어주면 주소가 다르다는 것을 알 수 있음
console.log(arr3);  // [....,300,400,1000]
console.log(arr2);  // [.....,300,400]
arr3[1][0] = 3;
console.log(arr3);  // [100,[3,[1,2],20],200,300,400,1000]  2뎁스에서 배열을 변경하니 주소가 같다는 것을 알 수 있음
console.log(arr2);  // [100,[3,[1,2],20],200,300,400]

console.log(arr2 == arr4); // true - 얕은 복사하면 주소가 같다.
console.log(arr4);
console.log(arr2);
arr4.push(1000);    // 똑같이 복사한 상태에서 arr3에만 1000 넣어주면 주소가 같다는 것을 알 수 있음
console.log(arr4);  // [....,300,400,1000]
console.log(arr2);  // [....,300,400,1000]

console.log(arr2[1] == arr3[1]); //true
console.log(arr2[1][1] == arr4[1][1]); //true 배열 자체는 전부 복사가 되긴 함 - 하지만 주소는 1뎁스만 달라진다.

console.log(...arr2); // 깊은복사지만 1뎁스 까지만 깊은 복사된다.
console.log(arr3.join(', ')); // 배열의 모든 요소를 연결해 하나의 문자열로 만든다. 100,10,1,2,20,200,300,400,1000

//배열 여부 확인 (배열일 경우 true반환 / 아니면 false)
let result = Array.isArray(arr1);
console.log(`arr1의 배열여부 확인 : ${result}`); //true
result = Array.isArray(date1);
console.log(`date1의 배열여부 확인 : ${result}`); //false

//배열 요소 인덱스 반환 [해당배열].indesOf(찾으려는 요소값)
//요소가 존재하면 요소의 인덱스 반환
//없으면 -1 반환
result = arr2.indexOf(100);
console.log(`arr2 배열에서 100 여부 확인 : ${result}`);  // 0 출력 - arr2 배열의 인덱스 0번에 100이 존재함

result = arr2.indexOf(1500);
console.log(`arr2 배열에서 100 여부 확인 : ${result}`);  // -1 출력 

//push and pop
//stack 자료구조 사용(last in first out)
result = arr2.push(600);
console.log(`arr2 배열에서 600 요소 추가 후 배열의 길이 반환 : ${result}`); // 7출력 배열에 7개 요소 존재
result = arr2.pop();
console.log(`arr2 배열에서 마지막 요소 제거 후 제거한 요소 반환 : ${result}`); // 600 출력 00​

[ 문자열 객체 ]