[SeSACXCodingOn] 웹풀스택과정 2W_06 _01: javascript_표준객체

01. 객체 (object)

객체란 실생활에서 우리가 인식할 수 있는 사물입니다. 예를들어 자바 스크립트에서 '고양이'가 있다면 객체는 고양이 그 자체이며, 이 객체는 이름, 나이등의 속성이 있고 먀옹 하고 우는 메소드라고 할 수 있습니다. 정리하자면 

• 객체 -> 고양이
  • 속성(프로퍼티) -> 이름 :춘식 / 나이 : 3살
  • 메소드 -> 먀옹()

이 구조를 

• const cat = { name : "춘식",
  • age : 3,
  • mew :function(){
  • return "먀옹"
  • };
• } 

이렇게 정의 할 수 있습니다. 
 

01-1 object의 자료형 - 배열

배열은 숫자형과 문자열과 마찬가지로 일반적인 스크립트와 동일합니다. [] 나 new array()를 이용해 생성합니다.

const arr1 = [1, 2, 3, '안녕', '반가워' ];
const arr2 = new array (1, 2, 3, '안녕', '반가워' );

객체 리터럴 처럼 배열 안에는 무엇이든지 다 들어갈 수 있습니다.  배열 안에 객체가 들어가도 되고 배열 안에 배열을 넣을 수 있습니다. 자바스크립트가 다른 언어와 다른점은 배열의 길이를 미리 정할 필요가 없습니다. 보통 new array를 쓰는 것보다 []를 사용하는게 권장사항이기에 []를 더 많이 사용하도록 해요 ^^* 
 

01-1-1 배열 내장 메서드 - push()

push()는 배열의 끝에 요소를 추가하는 메소드 입니다. 우선 우리에게 두가지 배열이 있다고 생각해봅시다. 

let arr1 = [1, 2, 3, 4, 5];
let arr2 = ['quokka', 'rabbit', 'puppy', 'hamster'];

위 배열에 요소를 추가해볼가여 

arr1.push(6);
arr1.push(10);
console.log(arr1);

하게되면 화면에는 arr1 배열에 6과 10 가 추가되어 나오게됩니다. 1/2/3/4/5/6/10 이 출력되겠죠 

01-1-2 배열 내장 메서드 - pop()

pop()메소드는 맨끝 요소를 제거합니다. push()를 위에서 두번 한 후 pop()을 해보겠습니다. 

//pop(): 맨 끝 요소 제거
arr1.pop();
console.log(arr1);

이렇게 되면 콘솔에서 어떻게 출력 될가요? 원래 배열 arr1 = [1, 2, 3, 4, 5, 6, 10] 에서 pop을 한번 해줬기 때문에 맨 끝 요소가 제거된 arr1 = [1, 2, 3, 4, 5, 6]이 출력됩니다. 
 

01-1-3 배열 내장 메서드 - unshift()

난 뒤에서말고 앞에 추가하고 싶은데..? 한다면 어떤 메소드를 사용할가요 바로 unshift를 사용합니다. unshift()메소드는 맨 앞에 요소를 추가합니다. 

//unshift() : 맨 앞에 요소 추가
arr1.unshift('cat');
console.log(arr1);

arr1 = [1, 2, 3, 4, 5, 6] 배열에 위의 코드를 실행하면 콘솔에 arr1 = ["cat", 1, 2, 3, 4, 5, 6] 이 출력되게 됩니다. 
 
 

01-1-4 배열 내장 메서드 - shift()

맨끝의 요소를 제거하는 건 pop() 이고 그렇다면 맨앞의 요소를 제거해야한다면 무엇을 사용해야 할까요. 바로 shift()내장 메소드를 사용합니다. 

//shift() : 맨 앞에 요소 제거
arr1.shift('cat');
console.log(arr1);

이렇게 실행하면 콘솔에 "cat"이 다시 제거되어 arr1 = [1, 2, 3, 4, 5, 6] 배열이 출력됩니다. 
 

01-1-5 배열 내장 메서드 - includes(요소)

includes()는 요소가 배열안에 있는지 없는지 검사하는 메소드로 출력값이 boolean 타입으로 나오게 됩니다. 즉 , true or false로 나오게 됩니다. 

//includes(요소) : 요소 있는지 없는지 검사 (true, false)
console.log(arr2.includes('quokka'));
console.log(arr2.includes('apple'));

실행하여 콘솔의 결과를 확인해보면 arr2 = ['quokka', 'rabbit', 'puppy', 'hamster' ] 에 'quokka'가 있으므로 true가 나오고 'apple'은 없으므로 false 가 출력됩니다. 
 

01-1-6 배열 내장 메서드 - reverse()

reverse()는 배열들의 아이템들을 거꾸로 재배열합니다. 배열을 복사하여 리턴하는 것이 아니고 원본 배열을 뒤집습니다. 별도의 파라미터는 존재하지 않고, 호출만 해주면 됩니다. 
 

//reverse()
console.log(arr1.reverse()); //arr1 = ['6', '5', '4', '3', '2', '1', "cat" ]
console.log(arr1); //원본 배열이 변경된 것

 

01-1-7 배열 내장 메서드 - join()

join()메소드는 배열의 요소들을 연결하여 하나의 값을 만드는 메소드 입니다. 요소들의 구분은 콤마(,)로 하고 요소들의 구분을 다른 문자로 하기 위해서는 원하는 문자를 ()에 넣습니다. 예시로 살펴보겠습니다. 
 

// join(): join 안의 문자열 기준으로 병합
console.log(arr2.join()); // quokka,rabbit,puppy,hamster
console.log(arr2.join('')); //quokkarabbitpuppyhamster
console.log(arr2.join('-')); //quokka-rabbit-puppy-hamster

 

01-1-8 배열 내장 메서드 -기타 (map/filter/find)

map, filter, find 메서드는 매개변수로 익명함수가 들어간다는 공통점이 있습니다. 

const arr4 = [1, 2, 3, 4, 5];

//map() : 배열 내 모든 원소에 대해 연산한 결과를 모아 "새로운 배열" 반환
const map_result = arr4.map(function (e) {
  return e * 2;
});

위에처럼 익명함수를 사용해도 좋고 화살표함수를 더 많이 사용합니다. 화살표함수로 예를 들면 
 

const map_result = arr4.map((e) => e * 2);
console.log(map_result);

//[2,4,6,8,10] 출력

다음 filter()메소드는 주어진 함수의 조건을 통과하는 요소를 모아 "새로운 배열" 로 반환합니다. 새로운배열!!!!!!!
(@@@@@@조건을 통과하면 요소를 유지하고 미통과하면 가차없이 버려버립니다.@@@@@@@ )

const arr4 = [1, 2, 3, 4, 5];
const filter_result = arr4.filter((e) => e > 2);
console.log(filter_result);

//출력 -> [3,4,5]

find() 메소드는 특정 조건을 만족하는 '첫번째 요소(값)"을 반환합니다. 
 

const find_result = arr4.find((e) => e > 2);
console.log(find_result);

//3

 

 

01-2 - 배열에서 반복문 사용하기 (기본 for 문 / for of 문/  forEach() + for in )

const arr3 = [1, 2, 5, 6, 7];

//기본 for 문
for (let a = 0; a < arr3.length; a++) { //1,2,5,6,7
  console.log(arr3[a]);
}

const alphabets = ['a', 'b', 'c', 'd'];
//for of 문
for (let alpha of alphabets) { 
  console.log(alpha);
}
//a
//b
//c
//d

//forEach() 메서드
alphabets.forEach(function (alpha, idx) {
  //alpha:currentValue 를 의미. 반복하고 있는 현재 요소
  //idx : currentValue의 인덱스(위치)
  console.log(alpha, idx);
});

//출력
//a-0
//b-1
//c-2
//d-3

alphabets.forEach(function (alpha, idx, arr) {
  //alpha:currentValue 를 의미. 반복하고 있는 현재 요소
  //idx : currentValue의 인덱스(위치)
  //arr : forEach를 호출한 배열
  console.log(alpha, idx, arr);
});

 
+for in 반복문
for in 반복문은 객체의 key를 반복할 수 있는 반복문입니다. 예를들어 

const me = { name: 'boss', gender: 'f', hobby: 'netflix' };

라는 key(name / gender / hobby )를 가진 객체가 있을 때 객체의 key에 접근하여 반복문을 이용해 출력해 보면
 

for(let key in me){
console.log(key,me[key]);
}

//출력
//name - "boss"
//gender - "f"
//hobby - "netflex"

 

+퀴즈 

//퀴즈
//1. 글자 수가 3개 초과인 단어만 필터링 -> hint) length 속성 이용 
//2. 글자에 'a'문자가 포함되어 있는 단어만 필터링 -> hint) includes() 메소드 이용

const words = ['dog', 'cat', 'rabbit', 'apple','wow'];

한번 맞춰보시고 밑에 확인해 보시죠!!
 
 
 
 
solution)

const q_filter = words.filter((word)=> word.length >3);
console.log(q_filter)
//글자 수가 3 개 초과인 단어만 필터링 

const a_filter = words.filter((e)=>e.includes('a'));
console.log(a_filter);
//글자에 'a'문자가 포함되어 있는 단어만 필터링

근데 퀴즈 두개 중 마지막 문제는 왜 filter를 써야할가요. 저는 처음 배울때 '엥.. map 써도 되는거 아닌가? ' 라고 생각 했습니다. 그리고 리더님께 질문했는데여 ,, 우선. includes는 a가 든 단어가 있다면 우선 true or false로 대답합니다. map()메소드를 사용하게 되면 이 boolean 타입 문구를 그대로 배열로 반환합니다. 위에서도 원소에 대해 연산한 결과를 모아 새로운 배열로 반환하는 것이 map 이고 테스트를 '통과'하는 요소들만 모아 재배열하는것이 filter란 거죠 그래서 골뱅이좀 많이 달아놨습니다. filter 에 .. 하하 제가 헷갈렷던거라 아무튼 위에 퀴즈에 map을 사용하게 되면 [false,true,true,true,false]와 같은 boolean 타입 배열이 콘솔에 출력됩니다. 
 

02. JavaScript 표준 객체

자바스크립트의 표준 객체는 자바스크립트가 기본적으로 가지고 있는 객체를 말합니다. 표준 객체들은 string, Number, array , Date, Math 등이 있습니다. 이중 Date 객체와 Math 객체에 대해서 알아보겠습니다. 
 

02-1. Date 객체 

 

// js 표준 내장 객체
// 1. Date 객체: 시간, 날짜

// 날짜 생성하여 저장
//아무런 인수를 전달하지 않으면 현재 날짜와 시간을 가지는 인스턴스를 리턴한다. 
let now = new Date(); // 현재 일시
console.log(now); // 출력 -> Tue Aug 01 2023 22:02:47 GMT+0900 (대한민국 표준시) 

// 타임스탬프(timestamp)
// : 1970년 1월 1일을 기준으로 흘러간 밀리초(ms)를 나타내는 정수
// new Date(timestamp)
let jan_01_1970 = new Date(0);
console.log(jan_01_1970);

let jan_02_1970 = new Date(24 * 3600 * 1000); //하루 밀리초 
console.log(jan_02_1970);
//Thu Jan 02 1970 09:00:00 GMT+0900 (대한민국 표준시)


// new Date(date_string)
let date1 = new Date('2023-07-17');
console.log(date1);
//Mon Jul 17 2023 09:00:00 GMT+0900 (대한민국 표준시) 

let date2 = new Date('2023', '06', '17'); // MM(0(1월)~11(12월) 주의) 
console.log(date2);
// Mon Jul 17 2023 00:00:00 GMT+0900 (대한민국 표준시)

간단한 date 객체를 코드를 통해 알아 보았으니 Date 메소드를 알아보겠습니다. 
 

// 관련 메서드
let datee = new Date('2023-08-01');
console.log(datee.getFullYear());      //2023
console.log(datee.getMonth()); //7(0~11 주의)
console.log(datee.getDate()); //1
console.log(datee.getHours()); //9
console.log(datee.getMinutes()); //0
console.log(datee.getSeconds()); //0
console.log(datee.getMilliseconds()); //0
console.log(datee.getDay()); // 2(화)-> 0 (일) ~

getMonth()와 getDay()메소드는 모두 0부터 시작하므로 주의해야 합니다. 
 
 

+[퀴즈] 오늘은 평일? 주말?

• Date 객체를 이용해 오늘 요일을 얻고, -> hint) getDay()
• if or switch 구문을 이용하여 평일 / 주말인지 콘솔창에 출력하는 코드 작성 

let today = new Date();
let week = ['월', '화', '수', '목', '금', '토', '일']; //날짜 표시를 위한 배열생성
console.log(week[today.getDay() - 1], '요일');
if (!(today.getDay() === 0 || today.getDay() === 6)) {
  console.log('평일입니당.'); 
} else {
  console.log('주말입니당.'); //0->일요일 6->토요일
}

02-2. Math 객체 

//속성
console.log(Math.E); //자연로그 e
console.log(Math.PI); //파이
console.log(Math.SQRT2); //2의 제곱근

//메서드
console.log(Math.min(100, -2, 0, 5)); //나열된것 중에 최소값 출력
console.log(Math.max(100, -2, 0, 5)); //나열된것 중에 최대값 출력
console.log(Math.round(5.3125)); //반올림
console.log(Math.ceil(5.3125)); //올림
console.log(Math.floor(5.3125)); //내림
console.log(Math.random()); //0이상 1 미만 범위의 난수(랜덤값)

//Math.random() 응용예시
// 0~9
console.log(Math.floor(Math.random() * 10)); //0부터 9사이에 랜덤한 수가 나오게 됨

//0~10
console.log(Math.floor(Math.random() * 11)); //0부터 10사이에 랜덤한 수가 나오게 됨

math 객체의 random 메소드 응용예시입니다. random 메소드는 0이상 1 미만 범위의 랜덤값을 반환하므로 0<=x<1 이라 볼 수 있으므로 9사이의 랜덤의 수가 나오기 위해서는 random메소드에 10 을 곱하여 0<=x<10 의 범위를 만들고 9가 넘는 9.xx 같은 실수를 없애기 위해 내림을 위한 floor 메소드를 사용하여 내려 줍니다. 또한 0이상 10 이하 랜덤값을 반환하기 위해서는 먼저 11 을 곱하고 반내림을 해주면 됩니다. 
 
 

+[퀴즈] Math.random() 이용

//1 ~100
//20~22 범위의 랜덤값 

//1~100
console.log(Math.floor((Math.random()*100)+1));

//20~22
console.log(Math.floor((Math.random()*3)+20));