[카카오테크캠퍼스 6주차] JavaScript 마스터: 표준 내장 객체

⏳ 2023. 5. 15. - 2023. 5. 21.

 

1. 문자

1.1. 문자열 자르기

강의에서는 slice()만 다루었지만, 가끔 헷갈려서 이번 기회에 다른 것도 정리해보았다.

      

      

      

    
    

      <javascript />
    
let str = "Hello world!";
console.log(str.length); // 12

// substr(시작 인덱스, 길이) : 시작 인덱스부터 길이만큼 자르기
// 길이를 적지 않으면 끝까지
console.log(str.substr(3, 7)); // "lo worl"
console.log(str.substr(3)); // "lo world!"

// substring(시작 인덱스, 끝 인덱스) : 시작 인덱스부터 끝 인덱스 전까지 자르기
// 끝 인덱스를 적지 않으면 끝까지
console.log(str.substring(3, 7)); // "lo w"
console.log(str.substring(3)); // "lo world!"

// slice(시작 인덱스, 끝 인덱스) : 시작 인덱스부터 끝 인덱스 전까지 자르기
// 끝 인덱스를 적지 않으면 끝까지
console.log(str.slice(3, 7)); // "lo w"
console.log(str.slice(3)); // "lo world!"


// substring vs slice

// 시작 인덱스가 끝 인덱스보다 큰 경우
// substring은 시작 인덱스와 끝 인덱스를 바꿔서 처리한다.
console.log(str.substring(7, 3)); // "lo w"
// slice는 빈 문자열을 반환한다.
console.log(str.slice(7, 3)); // ""

// 시작 인덱스 또는 끝 인덱스가 음수인 경우
// substring은 음수는 0으로 처리한다.
console.log(str.substring(-7, 9)); // str.substring(0, 9) -> "Hello wor"
// slice는 가장 뒤에서 음수의 절대값만큼 내려온 인덱스로 취급한다.
console.log(str.slice(-7, 9)); // str.slice(5, 9) -> " wor"

---

2. 숫자

2.1. toLocaleString()

      

      

      

    
    

      <javascript />
    
// toLocaleString()
// 숫자를 사용 언어에 따른 표현을 포함한 문자열로 반환한다.

let million = 1000000;
console.log(million.toLocaleString()); // "1,000,000"

// toLocaleString(지역, 옵션)
let num = 1234.56789;
console.log(num.toLocaleString("ar-EG")); // "١٬٢٣٤٫٥٦٨"
console.log(num.toLocaleString("zh-Hans-CN-u-nu-hanidec")); // "一,二三四.五六八"
console.log(
  num.toLocaleString("ko-KR", { style: "currency", currency: "KRW" }) // "₩1,235"
);

---

3. 날짜

3.1. zero-based numbering

      

      

      

    
    

      <javascript />
    
let now = new Date();

// getMonth()
// 1월 : 0
// 2월 : 1
// 3월 : 2
// 4월 : 3
// .
// .
// .
// 11월 : 10
// 12월 : 11
console.log(now.getMonth()); // 5월이므로 4 출력

// getDay()
// 일요일 : 0
// 월요일 : 1
// 화요일 : 2
// 수요일 : 3
// 목요일 : 4
// 금요일 : 5
// 토요일 : 6
console.log(now.getDay()); // 수요일이므로 3 출력

3.2. getTime()

      

      

      

    
    

      <javascript />
    
// getTime()
// `1997-01-01 00:00:00` (유닉스타임)부터 경과한 시간을 ms로 나타낸다.

Date.prototype.isAfter = function (date) {
  const a = this.getTime();
  const b = date.getTime();
  return a > b;
};

const d1 = new Date("Wed May 17 2023 10:26:30 GMT+0900 (Korean Standard Time)");
const d2 = new Date("Wed May 17 2022 10:26:30 GMT+0900 (Korean Standard Time)");

console.log(d1.isAfter(d2)); // true

3.3. Date.now()

      

      

      

    
    

      <javascript />
    
// Date.now()
// `1997-01-01 00:00:00` (유닉스타임)부터 경과한 메소드가 호출될 때의 시간을 ms로 나타낸다.

const time = new Date();

setTimeout(() => {
  console.log(time.getTime()); // 1000ms의 차이가 존재한다.
  console.log(Date.now());
}, 1000);

---

4. 배열

4.1. find()

      

      

      

    
    

      <javascript />
    
// find()
// 대상 배열에서 콜백 테스트를 통과하는 첫 요소를 반환한다.

const arr = [5, 9, 13, 4, 33];

const found = arr.find((item) => item > 10);
console.log(found); // 13

4.2. flat()

      

      

      

    
    

      <javascript />
    
// flat()
// 대상 배열의 모든 하위 배열을 지정한 깊이까지 이어붙인 새로운 배열을 반환한다.
// 깊이의 기본값은 1

const arr = [1, 2, [3, 4]];
const flatArr = arr.flat();

console.log(flatArr); // [1, 2, 3, 4]

4.3. includes()

      

      

      

    
    

      <javascript />
    
// includes()
// 대상 배열이 특정 요소를 포함하고 있는지 확인한다.

const users = [
  { name: "user1", age: 40 },
  { name: "user2", age: 20 },
  { name: "user3", age: 33 },
];

// 참조형 데이터(객체, 배열, 함수)는 단순 내용 비교가 아닌 메모리 주소 비교
console.log(users.includes({ name: "user1", age: 40 })); // false

let user = users[0];
console.log(users.includes(user)); // true

4.4. some()

      

      

      

    
    

      <javascript />
    
// some()
// 대상 배열의 어떤 요소라도 콜백 테스트를 통과하는지 확인한다.

const arr = [1, 2, 3, 4];
const someItem = arr.some((item) => item > 2);

console.log(someItem); // true

4.5. Array.from()

      

      

      

    
    

      <javascript />
    
// Array.from()
// 유사 배열(Array-like)을 실제 배열로 반환한다.

const arrayLike = {
  0: "A",
  1: "B",
  2: "C",
  length: 3,
};

// arrayLike.forEach((item) => console.log(item)); ❌ error
Array.from(arrayLike).forEach((item) => console.log(item));

---

5. 객체

5.1. Object.assign()

      

      

      

    
    

      <javascript />
    
// Object.assign()
// 출처(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 === result); // true

5.2. Object.entries()

      

      

      

    
    

      <javascript />
    
// Object.entries()
// 객체의 속성과 값으로 구성된 2차원 배열을 반환한다.

const user = {
  name: "iam454",
  age: 65,
  email: "realseogy@gmail.com",
  isValid: true,
};

const arr = Object.entries(user);

for (const [key, value] of arr) {
  console.log(key, value);
}

5.3. Object.keys()

      

      

      

    
    

      <javascript />
    
// Object.keys()
// 객체의 속성으로 구성된 1차원 배열을 반환한다.

const user = {
  name: "iam454",
  age: 65,
  email: "realseogy@gmail.com",
  isValid: true,
};

const keys = Object.keys(user);
console.log(keys); // ['name', 'age', 'email', 'isValid']

5.4. Object.values()

      

      

      

    
    

      <javascript />
    
// Object.values()
// 객체의 값으로 구성된 1차원 배열을 반환한다.

const user = {
  name: "iam454",
  age: 65,
  email: "realseogy@gmail.com",
  isValid: true,
};

const values = Object.values(user);
console.log(values); // ['iam454', 65, 'realseogy@gmail.com', true]

---

6. JSON

JSON(JavaScript Object Notation)은 데이터 전달을 위한 표준 포맷이다.

문자, 숫자, 불린, null, 객체, 배열만 사용이 가능하다.

 

JSON.stringify()를 통해 데이터를 JSON의 형태로 변환할 수 있고,

JSON.parse()를 통해 JSON을 데이터로 변환할 수 있다.