🍦Vanilla JS ⑤ 객체 - (2).1 표준 내장 객체 : String, Number

🍦 자바스크립트에는 개발 편의를 위해 수많은 객체가 미리 만들어져 있습니다.

🍦 이렇게 만들어진 객체는 자바스크립트에 기본으로 내장되어 있어서 스코프의 위치를 따지지 않고 모든 영역에서 공통으로 사용할 수 있습니다.

• Object : 가장 기본적인 객체, 모든 객체의 상위 객체 입니다.
• Array : 배열을 나타내는 객체, 여러 개의 값을 하나의 변수에 저장할 수 있습니다.
• String : 문자열을 나타내는 객체, 문자열을 다루는 다양한 메소드를 제공합니다.
• Number : 숫자를 나타내는 객체, 숫자를 다루는 다양한 메소드를 제공합니다.
• Boolean : true / false를 나타내는 객체입니다.
• Date : 날짜와 시간을 다루는 객체, 날짜와 시간을 다루는 다양한 메소드를 제공합니다.
• Math : 수학적인 계산을 다루는 객체, 수학적인 함수와 상수를 제공합니다.
• RegExp : 정규표현식을 다루는 객체, 문자열에서 특정한 패턴을 검색하거나 치환할 수 있습니다.
• Set : 중복되지 않는 값을 모아놓은 집합을 나타내는 객체 입니다.
• Map : key - value 값이 쌍으로 데이터를 저장하고 관리하는 객체 입니다.

String 객체

length : 문자열 길이 체크

👉 number

const pw = "123";
if(pw.length < 4) {
  console.log("비밀번호는 최소 4자리 이상 입력해 주세요.");
}

includes(a) : a 문자열 포함 여부 확인

👉 boolean

const email = "test_naver.com";
if(!email.includes("@")) {
  console.log(`올바른 이메일 형식이 아닙니다.`);
}

indexOf(a) : a와 일치하는 첫번째 문자 인덱스 반환

👉 number

const email2 = "test_naver.com";
if(email2.indexOf("@") === -1) {
  console.log(`@가 누락되었습니다.`);
}

lastIndexOf(a) : a가 둘 이상 발견되면 제일 마지막에 발견된 인덱스 반환

👉 number

const email3 = "@test@naver.com@";
console.log(email3.lastIndexOf("@")); // 15

slice(a, b) : a 부터 b-1 까지

• slice(a, -1) : a번 인덱스부터 끝에서 한글자 빼고 출력

👉 string

let str = "Apple, Banana, Kiwi";
let rst = str.slice(0,5);
console.log(rst); // Apple
console.log(str); // 불변성 원칙 (원본 보존)
console.log(str.slice(0,5)); // 이렇게 해도 str은 원본 유지됨
console.log(str); // Apple, Banana, Kiwi

subString(a, b) : a 부터 b-1 까지

• subString(a, -1) : 0번 인덱스부터 n-1번 인덱스까지 출력

let str2 = "Apple, Banana, Kiwi";
let rst2 = str2.substring(7,-1);
console.log(rst2); // Apple,

replace(a, b) : a를 b로 '첫번째 인덱스'만 바꿔줌

let str3 = "지구오락실, 이영지, 안유진, 미미, 이은지, 안유진";
let newStr = str3.replace("안유진", "나영석");
console.log(newStr); // 지구오락실, 이영지, 나영석, 미미, 이은지, 안유진

 replaceAll(a, b) : a를 b로 '모두' 바꿔줌

let newStr2 = str3.replaceAll("안유진", "나영석");
console.log(newStr2); // 지구오락실, 이영지, 나영석, 미미, 이은지, 나영석

toUpperCase(), toLowerCase() : 대소문자 일괄 변환

let alpha = "Better late than never.";
console.log(alpha.toUpperCase()); // BETTER LATE THAN NEVER. 
console.log(alpha.toLowerCase()); // better late than never.

concat() : 2개 이상 문자열 하나로 합침

• React에서 자주 쓰임..
• 2개 이상의 문자열을 하나의 문자열로 합치는 함수
• 기존 문자열을 변경하지 않고, 합쳐진 새로운 문자열 생성 (불변성)

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
console.log(text3); // Hello World

trim() : 문자열 앞,뒤 공백 제거

let str4 = " Hello World! ";
console.log(str4.trim()); // Hello World!

padStart(), padEnd() : 문자열 앞/뒤에 지정된 길이만큼 추가

let str11 = "5";
let str12 = "5";
str11 = str11.padStart(4, 0); // 총 길이, 자리가 비는 경우 0으로 채우는. . 
console.log(str11); // 0005
let str13 = str12.padEnd(4, 0); 
console.log(str13); // 5000

charAt(a) : a번 인덱스에 있는 문자 반환

let addr = "서울시 강남구 역삼동";
console.log(addr.charAt(0)); // 서

charCodeAt(a) : a번 인덱스에 있는 문자 유니코드 반환

let str20 = "HELLO WORLD";
console.log(str.charCodeAt(0)); // 72

split(a) : a를 기준으로 잘라서 새로운 문자 배열 생성

let birthDay = "1999-02-03";
let arr2 = birthDay.split("-");
console.log(arr2); // [ '1999', '02', '03' ]

---

Number 객체

• 객체에 정의되어 있는 숫자와 관련된 작업을 할 때 사용되는 메소드

Number.parseFloat() : 숫자를 실수로 반환

• 문자열에 포함된 숫자 부분을 실수 형태로 반환합니다.
• 문자열에 여러 개의 숫자가 존재하면, 그 중에서 첫 번째 숫자만을 실수 형태로 반환합니다.

let str = "1234.12 12";
console.log(Number.parseFloat(str)); // 1234.12 (앞에꺼만 읽음)

Number.parseInt() : 정수로 반환

let str = "1234.12 12";
console.log(Number.parseInt(str)); // 1234 (정수로 반환)