[TIL] String.prototype / Array.prototype

혱·2023년 10월 12일

JavaScript TIL

TIL

목록 보기

3/85

오늘 배운 것

String.prototype

substring()

substring() 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환한다.

const str = 'Hyewon';

console.log(str.substring(3, 5));
// Expected output: "wo"

console.log(str.substring(2));
// Expected output: "ewon"

slice()

slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환한다.

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31));
// Expected output: "the lazy dog."

console.log(str.slice(4, 19));
// Expected output: "quick brown fox"

console.log(str.slice(-4));
// Expected output: "dog."

replace()

replace() 메소드는 문자열을 대체한다.

const str = "Hello world!";
const result = str.replace("world", "javascript");

console.log(result);
// Expected output: "Hello javascript!"

split()

split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.

const str = "apple, banana, kiwi";
const result = str6.split(",");

console.log(result);
// Expected output: [ 'apple', ' banana', ' kiwi' ]

JSON.stringify()

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다.
예를 들어, 객체를 비교할 때 사용할 수 있다.

let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남성",
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남성",
};

console.log(person1 === person2); // false

두 객체가 완전히 동일하지만, 콘솔에 찍힌 결과는 false 이다.
객체는 다른 데이터타입에 비해 크기가 커서 메모리에 저장할 때 별도 공간에 대한 '주소'를 저장하게 된다. 그러므로 주소값이 달라서 결과는 false
그러면 어떤 식으로 비교할 수 있을까?

console.log(JSON.stringify(person1) === JSON.stringify(person2)); //true

JSON.stringify() 메서드를 통해 객체를 문자열로 바꿔서 비교할 수 있다.

객체 병합

let human1 = {
  name: "한혜원",
  age: 18,
};
let human2 = {
  gender: "여자",
};

let perfectWoman = { ...human1, ...human2 };
console.log(perfectWoman);
// Expected output: { name: '한혜원', age: 18, gender: '여자' }

Array.prototype

매가변수 자리에 함수를 넣는 것 : 콜백(Callback)함수

forEach()

Array 인스턴스의 forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행한다.

let numbers = [4, 1, 3, 5, 2];
numbers.forEach((item) => {
  console.log(item, "입니다");
});

4 입니다.
1 입니다.
3 입니다.
5 입니다.
2 입니다.

map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
항상 원본 배열의 길이 만큼 return 한다. (return 반드시 필요)

let numbers = [4, 1, 3, 5, 2];
let mapNumbers = numbers.map((item) => {
  return item * 2;
});

console.log(mapNumbers);
/// Expected output: [ 8, 2, 6, 10, 4 ]

filter()

Array 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 한다.

let numbers = [4, 1, 3, 5, 2];
let filterNumber = numbers.filter((item) => {
  return item % 2 == 0; // 조건이 들어가야 함.
});

console.log(filterNumber);
/// Expected output: [ 4, 2 ]

find()

Array 인스턴스의 find() 메서드는 제공된 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환한다. 테스트 함수를 만족하는 값이 없으면 undefined가 반환된다.

let numbers = [4, 1, 3, 5, 2];
let findNumber = numbers.find((item) => {
  return item % 2 == 1;
});

console.log(findNumber);
/// Expected output: 1

느낀 점

javascript 문법 강의 1주차를 들으며 기존에 알던 지식을 더 단단하게 하고, 한 번 써본 적 있었지만 잊고있었던 문법 개념들도 더 단단히 다질 수 있었다. 다 아는 것 같아도 강의를 들으면 지식이 좀 더 견고해 지는 느낌이 든다. 97% 에서 99.99% 아는 느낌.? 제일 위험한 상태가 약간만 아는 상태..😂