[새싹x코딩온] JavaScript 표준객체와 내장 함수

 

JavaScript 표준 객체

1. 개념
2. Date 객체
3. Math 객체

JavaScript 내장 함수

1. 문자열 관련 메소드
2. 배열 관련 메소드
3. 메소드 체이닝
4. 배열의 반복문 ⭐️⭐️⭐️

 

📌 JavaScript 표준 객체

1. 개념

JavaScript의 표준 객체는 프로그래밍에 필요한 기본 기능과 데이터를 다룰 수 있도록 미리 정의된 객체의 집합이며, 그 안에 다양한 내장 함수(메서드)가 포함되어 있다. 표준 객체는 내장 함수를 제공하는 객체로 이해하면 된다.

 

JavaScript 표준 객체의 예시

• 기본 자료형 객체: String, Number, Boolean, Symbol, BigInt
• 전역 객체: Math, Date, JSON, RegExp
• 데이터 구조 객체: Array, Object, Map, Set, WeakMap, WeakSet
• 에러 객체: Error, TypeError, SyntaxError, RangeError

 

JavaScript 내장 함수는 이러한 표준 객체의 메서드거나, 별도로 제공되는 전역 함수이다. JavaScript 프로그램에서 기본적으로 제공되는 기능을 구성하는 객체들이다. 

 

JavaScript 내장 함수의 예시

• Math 객체의 내장 함수: Math.random(), Math.floor(), Math.max()
• Array 객체의 내장 함수: Array.push(), Array.pop(), Array.map(), Array.filter()
• String 객체의 내장 함수: String.charAt(), String.toUpperCase(), String.includes()

 

2. Date 객체

// 1. Date 객체
let now = new Date();
console.log(now); //자주 사용
console.log(new Date('September 30, 1990 13:00:00')); //문자열 설정 가능
// 기준일 1970.01.01 00:00:00 초 이후로 몇 초나 지났는 지!
console.log(new Date(60000000));
console.log(new Date(0));
console.log(new Date(2010, 2, 2)); //자주 사용
console.log(new Date(2010, 2, 2, 18, 35, 50)); //Tue Mar 02 2010 18:35:50 GMT+0900 (한국 표준시)
console.log(now.getFullYear(), '년');
console.log(now.getMonth(), '월'); // (0~11) 1월은 0으로, 12월은 11로 출력됨
console.log(now.getDate(), '일'); // 1~
console.log(now.getHours(), '시'); //0~23
console.log(now.getMinutes(), '분'); //0~59
console.log(now.getSeconds(), '초'); //0~59
console.log(now.getMilliseconds(), '밀리초'); //0~999
console.log(now.getDay(), '요일'); //0(일)~6(토)

 

#예제1-오늘이 주말인지 평일인지 출력 (if, 삼항연산자, switch)

//3. 내장 객체 실습(1) 주말과 평일
let today = new Date();
console.log(today);
let day = today.getDay(); //0(일)~6(토)

//-if문
if (day === 0 || day === 6) {
  console.log('주말!!');
}
console.log('평일');

//-삼항연산자
day === 0 || day === 6 ? console.log('주말!!') : console.log('평일');

//-switch
switch (day) {
  case 0:
  case 6:
    console.log('주말!!');
    break;
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log('평일');
    break;
  default:
    console.log('알 수 없음');
}

 

 

3. Math 객체

//2. Math 객체
console.log(Math.E);
console.log(Math.PI);
console.log(Math.SQRT2); //루트2 값
console.log(Math.min(50, 10, 1, 2, 3, 4, 0, -5));
console.log(Math.max(50, 10, 1, 2, 3, 4, 0, -5));
console.log(Math.random()); //인자 없음. 0<= x <1 범위에서 랜덤 출력
console.log(Math.round(5.3)); //5 소수->정수 반올림
console.log(Math.floor(5.3)); // 소수->정수 버림
console.log(Math.ceil(5.3)); //소수->정수 올림

 

`Math.random()`은 0이상 1미만의 소수를 생성한다.

 

#예제-Math.random 응용 난수 구하기

// Math.random 응용!

//문1. 0~9 소수가 아닌 난수
//0<= x <1
console.log('난수1:', Math.floor(Math.random() * 10));

//문2. 0~10 자연수 난수
//0<= x <=9
//ceil도 가능
console.log('난수2:', Math.floor(Math.random() * 10) + 1);

//문3. 20~22까지의 난수
//0<= x <1
//0<= x <3
//20<= x <23
console.log('난수3:', Math.floor(Math.random() * 3)); //0~2 난수, 0<= x <3
console.log('난수3:', Math.floor(Math.random() * 3) + 20); //초기값 20, 20<= x <23

 

`Math.random()*10`은 0이상 10미만의 소수를 생성한다. (예: 0.5*10=5) 여기에 Math.floor를 사용하여 소수점 이하를 버려서 0~9까지의 난수를 생성한다.

 

`Math.random() * 3`은 0이상 3미만의 소수를 생성한다. 즉, 0<=x<3 정수를 생성한다.

여기에 20을 더하면 20<=x<23 범위의 정수를 생성한다.

 

 

📌 JavaScript 내장 함수

1. 문자열 관련 메소드

let str = 'Happy day~!  '
str.length //공백 포함 문자열 길이 (함수 아님) -> 13
str.toUpperCase() // 매개변수가 없는 간단한 함수
str.slice(5, 9) //5번째 인덱스 ~ 9번째 직전까지 잘라서 반환 (매개변수 음수값 가능) -> ' day'
str.slice(2) //-> 'ppy'
str.replace('p','a')//문자열에서 첫번째 p만 찾아서 a로 변경
str.replaceAll('p', 'a') //문자열의 p를 전부 찾아서 a로 바꿈
str.repeat(3)//문자열에 대해 3번 반복

let fruit = 'applemango';
fruit.charAt(0)//0번째 인덱스의 문자 -> a
fruit.indexOf('apple'); //맨 앞에 있는 문자(a) 찾아줌 -> 0
fruit.indexOf('mango'); //5
fruit.indexOf('z'); //없는 문자열을 찾으려고 하면 -1반환

//자주 쓴다~⭐️⭐️⭐️
str.trim();//문자열 양끝 공백 없애기
str.split(''); //매개변수 기준으로 str 쪼개서 배열로 저장 -> 한글자씩
str.split(' '); //공백 기준 str 쪼개서 배열로 저장

 

 

2. 배열 관련 메소드

• 기존 배열을 수정하는 메서드: `push`, `pop`, `shift`, `reverse`, `sort`
• 기존 배열을 수정하지 않고 정보만 반환하는 메서드: `includes`, `length`, `indexOf`, `find`
• 기존 배열을 수정하지 않고 새로운 배열을 반환하는 메서드: `map`, `filter`, `slice`, `concat`

코드를 통해 살펴보자.

push();// 배열 끝 추가
pop();// 배열 끝 요소 반환 및 삭제
shift, unshift();// 배열 앞에 제거(shift), 추가(unshift)

arr = [1, 2, 3, 4, 5];
arr.includes(el);
arr.length;
arr.indexOf(4);//매개변수에 해당하는 배열의 인덱스 반환(4가 몇번째 인덱스에 있는지)-> 3
arr.reverse();//배열 순서 뒤집어서 반환 -> [5, 4, 3, 2, 1]

// join('') , 배열->문자열 병합 (<-> split)
//- join의 인자로 아무것도 전달이 되지 않으면
//- 배열 안의 컴마까지 같이 문자열로 반환⭐️
arr.join();//join 안의 문자열 기준으로 문자열 병합 -> 5,4,3,2,1
str1 = arr1.join('');
console.log(str1); //54321 (빈 문자열 있음. 우리 눈으로 안 보일 뿐)

 

`join` 함수는 기본적으로 쉼표`,`가 구분자로 사용돼서, 아무것도 전달하지 않으면 배열 안의 쉼표까지 문자열로 반환한다는 점이 참....재밌었다. 공백 없이 이어진 하나의 문자열로 만들고 싶다면 빈문자열을 구분자로 넣어주자. 그리고 헷갈리기 쉬운데 `join`함수는 원본 배열은 변하지 않고, 새로운 문자열을 반환한다.

 

let str2 = "5,4,3,2,1";
let arr2 = str2.split(",");
console.log(arr2); // ["5", "4", "3", "2", "1"]

 

`split` 함수는 `join` 함수와 반대로 구분자를 기준으로 문자열을 분리하여 배열로 바꿔준다. 

 

다음으로 `map` `filter` `find` 함수는 모두 매개변수로 익명함수가 들어가는데, 특히 `filter`와 `map`은 조건에 부합하는 요소를 찾아서 기존 배열을 수정하지 않고 새로운 배열로 반환해준다.

// filter, map, find
// 매개변수로 들어가는 함수의 리턴값이 필수
console.log('------filter------');
arr2 = ['quakka', 'rabbit', 'puppy', 'hamster']; //재할당
// return 이후의 조건에 만족하는 요소를 찾아서
// '새로운 배열'로 반환
let six = arr2.filter(function (el) {
  return el.length === 6;
});
console.log(six); //['quakka', 'rabbit']


console.log('------find------');
// 조건을 만족하는 첫번째 요소 찾아서 '값'으로 반환
// 조건을 만족하는 요소가 없는 경우 undefined 반환
let six2 = arr2.find(function (word) {
  return word.length === 6;
});
console.log(six2); //quakka


console.log('------map------');
// 익명함수의 연산 결과를 '새로운 배열'로 반환
let arr4 = [1, 2, 3, 4, 5];
let multiArray = arr4.map(function (number) {
  return number * 3;
});
console.log(multiArray); //[3, 6, 9, 12, 15]

// - 화살표 함수 function 키워드, 중괄호, return 생략 가능
multiArray = arr4.map((number) => number * 3);
console.log(multiArray); //[3, 6, 9, 12, 15]

 

3. 메소드 체이닝

사용한 메소드가 반환값을 가진 경우 각각의 메소드를 연결해서 사용할 수 있다.

// 메소드 체이닝
'hello'.split('').reverse();// ['o', 'l', 'l', 'e', 'h']
'hello'.split('').reverse().join('');// 'olleh'

 

4. 배열에서의 반복문

지난 시간 배운 기본적인 반복문(for문, while)문에 이어 배열에서의 반복문이다.

 

먼저 `for..in`문은 주로 객체의 키(key)를 순회할 때 사용하지만, 배열에서도 사용 가능하다.

• `console.log(area)` 현재 순회 중인 key(지역명)가 문자열로 저장된다.
• `console.log(areaNum['Jeju'])` 객체의 값에 접근할 때 대괄호 접근법으로만 사용 가능한 점을 유의하자. 
• `console.log(areaNum.area)`와 같이 점 표기법으로 접근하면, area는 key의 이름을 나타내는 변수이기 때문에 `undefined`가 출력된다. `areaNum`객체에 정확한 속성 이름이 있을 때만 값을 반환한다.

// for...in
const areaNum = {
  Seoul: '02',
  Incheon: '032',
  Daejeon: '042',
  Busan: '051',
  Ulsan: '052',
  Daegu: '053',
  Gwangju: '062',
  Jeju: '064',
};

for (let area in areaNum) {
  console.log(area); // key-> 문자열로 반환 중
  //값에 접근? -> 대괄호 접근법으로만 사용 가능
  //   console.log(areaNum.area); //undefined
  console.log(areaNum['Jeju']);
}

 

 

다음으로 `for...of`문은 반복 가능한 객체(배열, 문자열, Map, Set)의 요소(value)를 하나씩 순회하는 반복문이다. `break`나 `continue`를 사용해서 조기 종료/건너뛰기가 가능하다. `for...in`과 달리 객체에서는 사용 불가능하다.

 

`forEach(element, index, array)`는 배열의 각 요소에 대해 주어진 익명함수를 호출하는 배열 전용 메소드이다. `for..of`문과 달리, 배열의 길이만큼 반복이 실행되며, 중간에 반복을 종료(`break`)하거나 건너뛰기(`continue`)를 할 수 없다!!

 

//for...of, forEach
let arr3 = [1, 5, 3, 4, 5];
let alphabets = ['a', 'b', 'c', 'd', 'e', 'f'];

//- 기본 for문
for (let i = 0; i < arr3.length; i++) {
  console.log(arr3[i]); // 1 5 3 4 5 가 차례로 찍힘
}

//- for...of 문
for (let el of arr3) {
  console.log(el); //1 5 3 4 5 가 차례로 찍힘
}

//- forEach(익명함수) : forEach(function(a[,b,c]))
// 요소, 인덱스, 배열 순서
arr3.forEach(function (num, i, arr) {
  console.log('요소', num);
  console.log('배열의 인덱스', i);
  console.log('arr3', arr);
  console.log('--------');
});
arr3.forEach((el) => {
  console.log(el);
});

 

형태를 봐도 배열 전용 메서드 forEach는 배열에 직접 호출해서, 호출대상인 배열이 forEach 앞에 나온다. 

 

출처 : chatGPT

 

차이점이 궁금해서 물어봤더니 미지의 영역까지 함께 설명해주는 나의 AI 친구. 다음에 봤을 때는 표에 있는 모든 내용이 다 이해가길 바란다. ...화이팅

 

#과제-배열의 합 구하는 3가지 방법 (for, for...of, forEach)

출처: 새싹x코딩온

 

//1. 배열과 반복문

let numbers = [];

for (let i = 1; i <= 100; i++) {
  numbers.push(i);
}
console.log(numbers);

let sum1 = 0;
for (let i = 0; i < numbers.length; i++) {
  sum1 += numbers[i];
}

let sum2 = 0;
for (let i of numbers) {
  sum2 += i;
}

let sum3 = 0;
//forEach의 콜백함수는 배열의 각 요소를 하나씩 받아옴
//i는 현재 순회 중인 요소의 값
numbers.forEach(function (i) {
  sum3 += i;
});

//화살표함수1 (위의 forEach와 동일)
numbers.forEach((i) => {
  sum3 += i;
});

//화살표함수2 (위의 forEach와 동일)
numbers.forEach((i) => (sum3 += i));

console.log(sum1, sum2, sum3);