제로베이스 자바스크립트 기초개념 표준 내장 객체 부분 정리
축약된 부분이 존재할 수 있습니다.
표준 내장 객체 함수
간단하게 우리가 어떤 데이터에서 필요할 때, 바로바로 쓸 수 있는 기능이라고 생각하면된다. (자주 사용하는 함수만 적어두었음)
String
String(문자) 표준 내장 객체(Built-in Object)
.length
문자의 길이를 반환한다.
const msg1 = "안녕하세요 반갑습니다.";
console.log(msg1.length);
const msg2 = "저는 부산에서 살고 있습니다. 저는 부산소프트웨어마이스터고등학교를 다니고 있습니다.";
console.log(msg2.length);.includes()
문자에서 특정 문자 포함되어 있는지 확인합니다.
const msg1 = "Hello World!";
const msg2 = "안녕하세요";
console.log(msg1.includes("!"));
console.log(msg2.includes("안녕"));.replace()
문자에서 특정 문자를 다른 문자로 바꾼 새로운 문자를 반환합니다.
하지만, 첫 번째로 조건에 맞는 문자를 만나면 그 문자만 변경한다.
const msg1 = "Hello World!";
const msg2 = "안녕하세요";
console.log(msg1.replace("World", "월드"));
console.log(msg2.replace("안녕하", "안녕히계"));.replaceAll()
문자에서 특정 문자를 다른 문자로 모두 바꾼 새로운 문자를 반환합니다.
즉, replace의 전체 버전이라고 보면 된다.
const msg3 = "안 녕 하 세 요";
console.log(msg1.replaceAll(" ", ""));.slice()
문자에서 일부를 추출해 새로운 문자를 반환합니다.
const msg1 = "Hello World!";
console.log(msg1.slice(0, 5)); // "Hello"
console.log(msg1.slice(6, -1)); // "World"
console.log(msg.slice(6)); // "World!".split()
문자를 구분자로 나누어 배열로 반환합니다.
const msg1 = "Hello World!";
console.log(msg1.split(" ")); // ["Hello", "World!"]
// 아래처럼 응용도 가능
console.log(msg1.split("").reverse().join("")); // "!dlroW olleH".toLowerCase()
문자를 영어 소문자로 바꾼 새로운 문자를 반환합니다.
const msg1 = "Hello World!";
console.log(msg1.toLowerCase());.toUpperCase()
문자를 영어 대문자로 바꾼 새로운 문자를 반환합니다.
const msg1 = "Hello World!";
console.log(msg1.toUpperCase());.trim()
문자에서 앞뒤 공백을 제거한 새로운 문자를 반환합니다.
const msg4 = " Hello!!! ";
console.log(msg4.trim());Number
Number(숫자) 표준 내장 객체(Built-in Object)
.toFixed()
숫자에서 지정된 자릿수까지 표현하는 새로운 문자를 반환합니다.
const num = 3.141592;
console.log(num.toFixed(2)); // "3.14"
console.log(Number(num.toFixed(2))); // 3.1.toLocalString()
숫자에서 현지 언어 형식으로 바꾼 새로운 문자를 반환합니다.
const num1 = 1000;
const num2 = 100000000;
console.log(num1.toLocaleString());
console.log(num2.toLocaleString());Number(), Number.parseInt(), Number.parseFloat()
이 함수는 위 함수들과 다르게 클래스 메소드이기 때문에 데이터.메소드의 프로토타입 메소드와 다르게 정적 메소드라고 불린다. (Number는 클래스를 호출하는 방식)
지금은 데이터에서 사용되냐 클래스에서 사용되냐만 알면 되고, 나중에 클래스파트에서 자세히 알아볼 것이다.
Number() 같은 경우는 광범위하게 해석을 하고, 유연하게 사용할 수 있다.
Number(데이터)
하지만 숫자와 불리언형정도가 제대로 변환이 되고 다른 것들은 NaN이 뜬다.
즉, Number()는 간단하게 숫자 변환을 할 때는 괜찮지만 명확하게 변환하고 싶다고 한다면 어울리지 않는다.
Number.parseInt() 같은 경우에는 숫자를 추출해 명확하고 에측가능하게 동작하고, 진법지정이 가능하고, 정수만 처리한다.
Number.parseInt("문자", 진수)
즉, 문자를 정수로 변환하는 기능을 한다.
console.log(Number.parseInt(123abc, 10)) // 123Number보다는 조금 더 정확하고 예측가능하게 변환하고 싶다면 사용하면 된다.
Nuber.parseFloat() 같은 경우 parseInt + 부동소수점 실수 처리 가능이라고 보면 된다.
Number.parseFloat("문자")
console.log(Number.parseFloat("123.123"))그 외에 parseInt와 다른점은 없다.
Number.isInteger()
데이터가 정수(숫자 데이터)인지 확인합니다.
Number.isInteger(데이터)
위 처럼 사용하고 Boolean값으로 반환해준다.
Number.isNaN()
데이터가 'NaN'인지 확인합니다.
Number.isNaN()
위 처럼 사용하고 Boolean값으로 반환해준다.
Math
Math(수학) 표준 내장 객체(Built-in Object)
Math.abs()
주어진 숫자의 절댓값을 반환합니다.
console.log(Math.abs(7)); // 7
console.log(Math.abs(-7)); // 7
console.log(Math.abs(3.14)); // 3.14
console.log(Math.abs(-3.14)); // 3.14Math.ceil()
주어진 숫자를 올림해 정수를 반환합니다.
console.log(Math.ceil(3.14141411)); // 4
console.log(Math.ceil(3.14141441 * 100) / 100); // 3.15Math.floor()
주어진 숫자를 내림해 정수를 반환합니다.
console.log(Math.floor(3.14141411)); // 3
console.log(Math.floor(3.14141441 * 100) / 100); // 3.14Math.round()
주어진 숫자를 반올림해 정수를 반환합니다.
console.log(Math.round(3.1)); // 3
console.log(Math.round(3.6)); // 4Math.max()
주어진 숫자중 가장 큰 숫자를 반환합니다.
console.log(Math.max(10, 128, 12, 49, 1)); // 128Math.min()
주어진 숫자중 가장 작은 숫자를 반환합니다.
console.log(Math.min(10, 128, 12, 49, 1)); // 1Math.random()
'0' 이상 '1' 미만의 난수(무작위 수)를 반환합니다.
console.log(Math.random());
// 원하는 범위의 랜덤값 뽑기
function Random(min = 0, max = 10) {
return Math.floor(Math.random() * (max - min)) + min;
}
console.log(Random()); // 0~9
console.log(Random(0, 100)); // 0~99
console.log(Random(101, 200)); // 101~199Date
Date(날짜) 표준 내장 객체(Built-in Object)
일단 Data는 날짜를 뽑는 클래스이다.
// 'new Date()'를 통해서 반환된 인스턴스를 '타임 스탬프(timestamp)'라고 한다.
let date = new Date();
console.log(date); // 현재 날짜가 나옴 (타임 스탬프)
// 우리가 원하는 날짜로 생성 할 수도 있다.
date = new Date(2006, 4, 8, 0, 0, 0);
console.log(date);
// 타임 스탬프에서 각 정보를 얻을 수 있다.
console.log(date.getFullYear);
console.log(date.getMonth + 1); // 1~12가 아닌 0~11을 반환함
console.log(date.getDate);
console.log(getDayKo(date.getay)); // 애도 0부터 시작해서 일요일 = 0 토요일 6이다. (함수 만드는 것도 좋은 선택)
console.log(date.getHours);
console.log(date.getMinutes);
console.log(date.getSeconds);
function getDayKo(day) {
switch (day) {
case 0:
return "일요일";
case 1:
return "월요일";
case 2:
return "화요일";
case 3:
return "수요일";
case 4:
return "목요일";
case 5:
return "금요일";
case 6:
return "토요일";
}
}.getTime()
유닉스 타임(UNIX Time)으로부터 경과한 시간(ms)을 반환합니다.
유닉스 타임은 1970.01.01 00:00:00 시간을 의미합니다.
const date1 = new Date();
console.log(date1.getTime());Date.now()
현재 시간을 유닉스 타임으로 변환합니다.
유닉스 타임은 1970.01.01 00:00:00 시간을 의미합니다.\
const date2 = Date.now();
console.log(date2);.toISOString()
날짜 인스턴스의 협정 세계시(UTC)를 'ISO 8601' 포맷으로 변환합니다.
'ISO 8601'은 날짜와 시간을 표현하는 국제 표준 규격입니다.
console.log(new Date().toISOString);우리가 데이터를 저장할 때, 데이터베이스에 저장해야하는 경우가 생길 수도 있는데 이러한 상황에서 전세계로 사용되는 서비스라면 한국 표준시보다는 국제 표준 포멧으로 바꿔서 저장할 떄 유용할 것이다.
Array
Array(배열) 표준 내장 객체(Built-in Object)
.length
배열의 길이(숫자)를 반환한다.
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.length);.at
배열을 인덱싱하며, 만약 음수를 사용하면 뒤에서부터 인덱싱합니다.
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.at(1));
console.log(fruits.at(-1)); // 마지막 요소, 뒤에서부터 인덱싱 가능.concat()
배열에서 주어진 배열을 병합해 새로운 배열을 반환합니다.
const name = ["현민", "황현민"];
const age = ["18", "19"];
const na = this.name.concat(age);
console.log(na);.every()
배열의 모든 요소가 콜백 테스트를 통과하는지 확인합니다.
만약 테스트가 하나라도 실패하면, 이후 테스트를 진행하지 않고 'false'를 반환합니다.
const numbers = ["12", "456", "132", "60", "1"];
const isValid = numbers.every((item) => item < 200);
console.log(isValid);
const users = [
{ name: "현민", age: 18 },
{ name: "200원", age: 200, email: "200@gmail.com" },
{ name: "황현민", age: 19, email: "gyejeongjin@gmail.com" },
];
console.log(users.every((user) => user.email));
console.log(users.every((user) => user.age));.filter()
배열에서 콜백 테스트를 통과하는 모든 요소로 새로운 배열을 만들어 반환합니다.
만약 모든 요소가 테스트를 통과하지 못하며 빈 배열을 반환합니다.
const numbers = ["12", "456", "132", "60", "1"];
const filterNumbers = numbers.filter((number) => number < 30);
console.log(filterNumbers);
const users = [
{ name: "현민", age: 18 },
{ name: "200원", age: 200, email: "200@gmail.com" },
{ name: "황현민", age: 19, email: "gyejeongjin@gmail.com" },
];
const youngUsers = users.filter((user) => user.age < 30);
console.log(youngUsers);
const userWithEmail = users.filter((user) => user.email);
console.log(userWithEmail);
const userWithPhone = users.filter((user) => user.phone);
console.log(userWithPhone);.find()
배열에서 콜백 테스트를 처음으로 통과하는 요소를 반환합니다.
만약 테스트를 통과하면, 이후 테스트는 진행하지 않습니다.
만약 모든 테스트가 실패하면, 'undefined'를 반환합니다.
const numbers = ["12", "456", "132", "60", "1"];
const foundNumbers = numbers.find((number) => number < 30);
console.log(foundNumbers);
const users = [
{ name: "현민", age: 18 },
{ name: "200원", age: 200, email: "200@gmail.com" },
{ name: "황현민", age: 19, email: "gyejeongjin@gmail.com" },
];
const foundUser = users.find((user) => !user.email);
console.log(foundUser);.findIndex()
배열에서 콜백 테스트를 처음으로 통과하는 요소의 인덱스를 반환합니다.
만약 테스트가 통과하면, 이후 테스트를 진행하지 않습니다.
만약 모든 테스트가 실패하면, -1을 반환합니다.
const numbers = ["12", "456", "132", "60", "1"];
const foundIndex = numbers.findIndex((number) => number < 30);
console.log(foundIndex);
const users =
{ name: "현민", age: 18 },
{ name: "200원", age: 200, email: "200@gmail.com" },
{ name: "황현민", age: 19, email: "gyejeongjin@gmail.com" },
];
const foundUserIndex = users.findIndex((user) => !user.email);
console.log(foundUserIndex);.forEach()
배열의 각 요소에 대해 콜백을 호출합니다.
만약 배열이 비어있다면, 아무런 동작도 하지 않습니다.
만약 반복을 종료하고 싶다면, for반복문을 사용하여야 합니다.
const numbers = ["12", "456", "132", "60", "1"];
numbers.forEach((number) => {
console.log(number);
});
let sum = 0;
numbers.forEach((number) => {
sum += number;
});
console.log("합계: ", sum);
for (const number of numbers) {
if (number > 100) {
break;
}
console.log(number);
}.includes()
배열에서 특정 요소가 포함되어 있는지 확인합니다.
const f = ["사과", "바나나", "체리"];
console.log(f.includes("사과"));
console.log(f.includes("버나나")); // false
const n = [10, 20, 30, 40];
console.log(n.includes(10));
console.log(n.includes(123123));.join()
배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
const f = ["사과", "바나나", "체리"];
console.log(f.join());
console.log(f.join(""));
console.log(f.join(", "));
console.log(f.join("/"));
const msg = "Hello World";
console.log(msg.split("").reverse().join(""));.map()
배열의 모든 요소에 대해 각 콜백을 호출하고 반환된 결과로 새로운 배열을 반환한다.
const numbers = [17, 20, 100, 5, 200]
const doubleNumbers = numbers.map((number) => number * 2);
console.log(doubleNumbers);
console.log(numbers);
const fruits = ["apple", "banana", "cherry"];
const capitalizedFruits = fruits.map((fruit) => fruit.toUpperCase());
console.log(capitalizedFruits);
console.log(fruits);
const users = [
{ name: "현민", age: 18 },
{ name: "200원", age: 200, email: "200@gmail.com" },
{ name: "황현민", age: 19, email: "gyejeongjin@gmail.com" },
];
const userEmails = users.map((user) => user.email);
console.log(userEmails);
console.log(userEmails.filter((email) => email));
const f = ["사과", "바나나", "체리"];
const UpperF = f.map((e, i) => {
console.log(i);
});.push()
배열의 마지막에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
배열 원본이 변경됩니다.
const fruits = ["apple", "banana", "cherry"];
console.log(fruits.push("durian"));
console.log(fruits.length)
console.log(fruits);
const numbers = [17, 20, 100, 5, 200];
console.log(numbers.push(9, 10, 11));
console.log(numbers.length);
console.log(numbers);.reduce()
배열의 각 요소에 대해 콜백을 호출하고, 각 콜백의 반환 값을 다음 콜백으로 전달해 마지막 콜백의 반환 값을 최종 반환합니다.
const numbers = [10, 19, 29, 13, 120, 123];
let sum1 = 0;
numbers.forEach((number) => {
sum += number;
});
console.log(sum);
// number가 배열안에 값, accumulator가 누적값
const sum2 = numbers.reduce((accumulator, number) => {
return accumulator + number;
}, 0); // 콜백 함수, 초기값
console.log(sum2);
const users = [
{ name: "현민", age: 18 },
{ name: "200원", age: 200, email: "200@gmail.com" },
{ name: "황현민", age: 19, email: "gyejeongjin@gmail.com" },
];
const sum3 = users.reduce((acc, user) => acc + user.age, 0);
console.log(sum3);.reverse()
배열의 순서를 반전합니다.
배열 원본이 변경됩니다.
const fruits1 = ["APPLE", "BANANA", "CHERRY"];
console.log(fruits1.reverse());
console.log(fruits1);
// 원본이 변경 안되었으면 좋겠다?
const fruits2 = ["APPLE", "BANANA", "CHERRY"];
console.log([...fruits2].reverse());
console.log(fruits2);.slice()
배열의 일부를 추출해 새로운 배열로 반환합니다.
const numbers = [100, 200, 300, 400, 500, 600, 700, 800, 900];
console.log(numbers.slice(0, 3));
console.log(numbers.slice(4, -1));
console.log(numbers.slice(4));
console.log(numbers.slice(-4));
console.log(numbers.slice(-4, -1));
console.log(numbers);.some()
배열의 요소 중 콜백 테스트를 통과하는 요소가 하나라도 있는지 확인합니다.
만약 테스트가 통과하면, 이후 테스트는 진행하지 않습니다.
.every의 하나인 버전이라고 생각하면 된다.
const numbers = [17, 20, 199, 1, 40];
const isValid = numbers.some((number) => number > 200);
console.log(isValid);
const users = [
{ name: "현민", age: 18 },
{ name: "200원", age: 200, email: "200@gmail.com" },
{ name: "황현민", age: 19, email: "gyejeongjin@gmail.com" },
];
console.log(users.some((user) => user.email));
console.log(users.some((user) => user.phone));.sort()
배열의 요소를 콜백의 반환 값에 따라 정렬합니다.
만약 콜백을 제공하지 않으면, 요소를 유니코드 포인트 순서대로 정렬합니다.
배열 원본이 변경됩니다.
const numbers = [17, 20, 199, 1, 40];
numbers.sort();
console.log(numbers);
numbers.sort((a, b) => a - b);
console.log(numbers);
numbers.sort((a, b) => b - a);
console.log(numbers);
const users = [
{ name: "현민", age: 18 },
{ name: "200원", age: 200, email: "200@gmail.com" }
{ name: "황현민", age: 19, email: "gyejeongjin@gmail.com" }
]
users.sort((a, b) => a.age - b.age);
console.log(...users);
users.sort((a, b) => b.age - a.age);
console.log(...users);
// 콘솔창에서 볼 떄는 sort라는 것이 딱 한번만 일어난 것이기 때문에 users를 펼쳐서 볼 때 값이 바뀌게 된다.
// 그래서, 배열이나 객체 데이터를 출력할때, 내용이 많아서 숨겨진다면 ...users처럼 숨겨지지 않는 상태로 바꿔서 출력해야 한다..splice(인덱스, 삭제개수, 추가요소)
배열의 요소를 추가하거나 삭제하거나 교체합니다.
배열 원본이 변경됩니다.
// splice(인덱스, 삭제개수, 추가요손)
// 요소 추가
const f1 = ["사과", "바나나", "체리"];
f1.splice(2, 0, "두리안");
console.log(f1);
// 요소 삭제
const f2 = ["사과", "바나나", "체리"];
f2.splice(1, 1);
console.log(f2);
// 요소 교체
const f3 = ["사과", "바나나", "체리"];
f3.splice(1, 1, "두리안", "오렌지", "망고");.unshift()
배열의 시작 부분에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
배열 원본이 변경됩니다.
push의 반대 개념이라고 생각하면 된다.
const f1 = ["사과", "바나나", "체리"];
console.log(f1.unshift("두리안"));
console.log(f1.length);
console.log(f1);
const numbers = [17, 20, 199, 60, 31];
console.log(numbers.unshift(9, 10, 11));
console.log(numbers.length);
console.log(numbers);배열 메소드 인덱스
배열 메소드의 콜백은 항상 현재 반복의 인덱스를 얻을 수 있다.
const numbers = [17, 20, 199, 60, 31]
numbers.every((num, idx) => {
console.log(num, idx);
return true;
});
numbers.filter((num, idx) => {
console.log(num, idx);
return true;
});
numbers.reduce((acc, cur, idx) => {
console.log(acc, cur, idx);
return acc + cur;
}, 0);Array.isArray()
배열 데이터인지 확인합니다.
const f = ["사과", "바나나", "체리"];
// 유사배열
const arrayLikeFruits = {
0: "사과",
1: "바나나",
2: "체리",
length: 3,
};
console.log(Array.isArray(f));
console.log(Array.isArray(arrayLikeFruits));Array.from()
유사 배열(Array-Like)을 실제 배열로 반환합니다.
const fruits = ["Apple", "Banana", "Cherry"];
// 유사배열
const arrayLikeFruits = {
0: "Apple",
1: "Banana",
2: "Cherry",
length: 3,
};
console.log(fruits);
console.log(arrayLikeFruits);
console.log(fruits[1]);
console.log(arrayLikeFruits[1]);
console.log(fruits.length);
console.log(arrayLikeFruits.length);
console.log(Array.isArray(fruits));
console.log(Array.isArray(arrayLikeFruits));
console.log(fruits.map((fruit) => fruit.toUpperCase()));
console.log(fruits.frm(arrayLikeFruits).map((fruit) => fruit.toUpperCase()));Object
Object(객체) 표준 내장 객체(Built-in Object)
Object.assign(대상, 출처1, 출처2, ...)
하나 이상의 '출처 객체(Source)'로부터 '대상 객체(Target)'로 속성을 복사하고 대상 객체를 반환합니다.
const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 }
const source2 = { c: 5, d: 6 };
// 원본 객체 변함
// const result = Object.assign(target, source1, source2);
// console.log(target);
// console.log(result);
// 원본 객체 변하지 않음
const result = Object.assign({}, target, source1, source2);
console.log(target);
console.log(result);
const userA = {
name: "200원"
age: 200,
};
const userB = {
age: 22,
email: "gyejeongjin@gmail.com",
isValid: true,
};
// const thw = Object.assign(userA, userB);
const thw = Object.assign({}, userA, userB);
console.log(thw);
console.log(userA);Object.keys()
객체의 모든 키를 배열로 반환합니다.
순서는 보장하지 않습니다.
const user = {
name: "200원",
age: 200,
email: "200woni@naver.com",
isValid: true,
};
const keys = Object.keys(user);
console.log(keys);
keys.forEach((key) => {
const el = document.createElement("div");
el.innerHTML = `<strong>${key}</strong>: ${user[key]}`;
document.body.append(el);
});Object.values()
객체의 모든 값을 배열로 반환합니다.
순서는 보장하지 않습니다.
const user = {
name: "200원",
age: 200,
email: "200woni@naver.com",
isValid: true,
};
const values = Object.values(user);
console.log(values);JSON
JSON(JavaScript Object Notation)은 데이터 전달을 위한 표준 데이터 포맷입니다.
문자, 숫자, 불린, Null, 객체, 배열만 사용
문자는 큰 따옴표만 사용
후행 쉼표 사용 불가 (마지막 쉼표)
'.json' 확장자의 파일 사용 가능
{
"name": "200원",
"age": 200,
"email": "200woni@naver.com",
"isValid": true
}JSON.stringify()
const user = {
name: "200원",
age: 200,
email: "200woni@naver.com",
isValid: true, // 후행 쉼표
};
console.log(JSON.stringify(user));자바스크립트 데이터를 JSON 문자로 변환합니다.
JSON.parse()
const json = JSON.stringify(user);
console.log(json);
console.log(JSON.parse(json));JSON문자를 자바스크립트 데이터로 변환합니다.
