[JS] 표준 내장 객체

 

 

📍

 

표준내장객체 강의를 듣고 

복습도 하고 필요할때 마다 꺼내 볼 수 있게 간단하게 정리해두려고 합니다.

자바스크립트를 공부하다보면 적재적소에 메서드 사용하는게 정말 어려운데 

제대로 정리해두고 익숙해져서 잘 활용할 수 있었으면 좋겠습니다!

 

---

 

 

표준 내장 객체 - JavaScript | MDN

 

 

1. 문자(String)

 

메서드	내용
length	문자의 길이(숫자)를 반환
includes()	대상 문자에 주어진 문자가 포함되어 있는지 불리언 값으로 확인
indexOf()	대상 문자에서 주어진 문자와 일치하는 첫 번째 인덱스(숫자)를 반환 ( 일치하는 문자가 없으면  -1 반환)
padEnd()	대상 문자의 길이(length)가 지정된 길이보다 작으면,  주어진 문자를 지정된 길이까지 끝에 붙여 새로운 문자를 반환
padStart()	대상 문자의 길이(length)가 지정된 길이보다 작으면, 주어진 문자를 지정된 길이까지 앞에 붙여 새로운 문자를 반환
replace()	대상 문자에서 패턴(문자, 정규식)과 일치하는 부분을 새로운 문자로 변경하여 반환
slice()	대상 문자의 일부를 추출해 새로운 문자를 반환
split()	대상 문자를 주어진 구분자로 나눠 배열로 반환
toLowerCase()	대상 문자를 영어 소문자로 반환
toUpperCase()	대상 문자를 영어 대문자로 반환
trim()	대상 문자의 앞뒤 공백 문자(space, tab등)를 제거한 새로운 문자를 반환

 

 

2. 숫자(Number)

 

메서드	내용
toFixed()	소수점을 인수로 들어간 숫자 자릿수까지 표기하여 문자로 반환
toLocalString()	숫자를 현지 언어 형식의 문자로 반환
Number.isInteger()	숫자가 정수(integer)인지 불리언값으로 확인
Number.isNaN()	주어진 값이 'NaN' 인지 불리언값으로 확인
Number.parseInt() parseInt()	주어진 값(숫자, 문자)을 파싱해 특정 진수(radix)의 정수로 반환
Number.parseFloat() parseFloat()	주어진 값(숫자, 문자)을 파싱해 부동소수점 실수로 반환(숫자)

 

 

3. 수학(Math)

 

메서드	내용
Math.abs()	주어진 숫자의 절댓값 반환
Math.ceil()	주어진 숫자를 올림해 정수 반환
Math.floor()	주어진 숫자를 내림해 정수 반환
Math.max()	주어진 숫자 중 가장 큰 숫자 반환
Math.min()	주어진 숫자 중 가장 작은 숫자 반환
Math.pow()	주어진 숫자의 거듭제곱한 값 반환
Math.random()	숫자 0 이상, 1 미만의 난수를 랜덤으로 반환
Math.round()	주어진 숫자를 반올림해 정수 반환

 

 

📌 특정 범위의 랜덤 정수를 얻는 함수

 

function random(min = 0, max = 10) {
  return Math.floor(Math.random() * (max - min)) + min
}

console.log(random()) 
// 아무것도 적어주지 않았기 때문에 기본값인 0-10 사이의 랜덤한 수 출력
console.log(random(11, 20))
// 11~20 사이의 랜덤한 수 출력

 

 

4. 날짜(Date)

 

메서드	내용
getFullYear()	날짜 인스턴스의 '연도' 반환
getMonth()	날짜 인스턴스의 '월' 반환 ( 유일하게 0부터 시작(Zero-based numbering))
getDate()	날짜 인스턴스의 '일' 반환
getHours()	날짜 인스턴스의 '시간' 반환
getMinutes()	날짜 인스턴스의 '분' 반환
getSeconds()	날짜 인스턴스의 '초' 반환
getDay()	날짜 인스턴스의 '요일' 반환 (set 불가능)
getTime()	날짜 인스턴스의 '밀리초(ms)' 반환

• new Date() 생성자 함수 사용 
• getDay()를 제외한 모든 메서드는 set으로 지정가능!

 

5.배열

 

메서드	내용	원본배열 변경 여부
length	배열의 길이(숫자) 반환 ( 배열의 길이라는 것은 그 배열데이터가 가지고 있는 아이템의 개수)
at()	대상 배열 인덱싱
concat()	대상 배열과 주어진 배열을 병합해 새로운 배열 반환
every()	대상 배열의 모든 요소가 콜백에서 참(Truthy)을 반환하는지 확인
filter()	주어진 콜백이 참(Truthy)인 경우 모든 요소를 새로운 배열로 반환 (즉, 조건에 해당하는 값만 반환)
find()	대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소 반환
findIndex()	대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스 반환
flat()	대상 배열의 모든 하위 배열을 지정한 길이(Depth)까지 이어붙인 새로운 배열 생성
forEach()	대상배열이 가지고 있는 아이템의 개수 만큼 주어진 콜백 함수를 실행 (단, 중간에 반복은 중단 할 수 없음)
includes()	대상 배열이 특정 요소를 포함하고 있는지 불리언값으로 확인
join()	대상 배열의 모든 요소를 구분자로 연결한 문자 반환
map()	대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열 반환
pop()	대상 배열에서 마지막 요소를 제거하고 그 요소 반환	⭕
push()	대상 배열의 마지막에 하나 이상의 요소를 추가하고, 배열의 새로운 길이 반환	⭕
reduce()	대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환 (쉽게 누적되는 값 이라고 생각하면 됨)
reverse()	대상 배열의 순서를 반전하여 반환	⭕
shift()	대상 배열에서 첫 번째 요소를 제거하고, 제거된 요소 반환	⭕
slice()	대상 배열의 일부를 추출해 새로운 배열을 반환 (두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 대상 배열의 끝까지 추출)
some()	대상 배열의 요소들이 콜백테스트를 하나라도 통과하는 확인  (하나라도 참일 경우 true 반환, 모두 거짓일 경우 false 반환)
sort()	대상 배열을 콜백의 반환 값(음수, 양수, 0)에 따라 정렬 ( 콜백을 제공하지 않으면, 요소를 문자열로 변환, 유니코드 코드 포인트 순서로 정렬)	⭕
splice()	대상 배열에 요소를 추가, 삭제, 교체하여 반환	⭕
unshift()	새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열의 길이 반환	⭕
Array.from()	유사 배열(Array-like)을 실제 배열로 반환
Array.isArray()	배열 데이터인지 불리언값으로 확인

 

 

📌 간단한 예시

 

const users = [
  {name: 'Neo', age: 85},
  {name: 'Amy', age: 22},
  {name: 'Lewis', age: 11},
]

// 총 나이 계산
const totalAge = users.reduce((acc, cur) => acc + cur.age, 0)
console.log(totalAge) // 118

// 평균 나이 계산
console.log(`평균나이: ${(totalAge / users.length).toFixed(1)}세`) // 평균나이: 39.3세

// 모든 이름 추출
const names = users.reduce((acc,cur) => {
  acc.push(cur.name)
  return acc
}, []).join(', ') // 메소드 체이닝
console.log(names) // Neo, Amy, Lewis

 

 

6. 객체

 

메서드	내용
Object.assign()	하나 이상의 출처(Source) 객체로부터 대상(Target) 객체로 속성을 복사하고 대상 객체 반환
Object.entries()	주어진 객체의 각 속성과 값으로 하나의 배열을 만들어 요소를 추가한 2차원 배열 반환
Object.keys()	주어진 객체의 속성 이름을 나열한 배열 반환
Object.values()	주어진 객체의 속성 값을 나열한 배열 반환

 

 

 

 

📌출처

패스트캠퍼스 초격차 패키지 'JavaScript 마스터'