데브코스 15일차 ( 24.11.01 금 ) JavaScript

워니·2024년 11월 1일

문자내장객체 배열내장객체 표준내장객체

Programmers Front-end

목록 보기

15/27

[Section 02] JavaScript 심화

< 14. 표준 내장 객체 >

자바스크립트 엔진에 기본적으로 내장되어 있는 객체
상시적으로 존재하기 때문에 언제 어디서든 상시 적용 가능
Object, Function, Array, String, Boolean, Number, Math, Date 등
Number 의 정적 매서드는 전부 다 알고 있어야 한다.
→ Number의 정적 매서드 확인

toFixed : 소수점으로 등록된 숫자의 소수점을 고정
isOOO으로 명시된 매서드는 true, false로 대답하는 경우가 많음

set()

중복된 요소를 제거

예시

ex 1)
const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(4);
mySet.add(2);
console.log(mySet); // {1, 2, 3, 4}, 중복된 값 제거

ex 2)
const mySet = new Set([1, 2, 2, 3]);
console.log(mySet);

ex 3)
const apiResponse = [
  { id: 1, name: "Alice", tags: ["bag", "shoose"] },
  { id: 2, name: "Atom", tags: ["friend"] },
  { id: 3, name: "Toms", tags: ["bag", "cap"] },
];
// API 응답 결과에서 tags 추출하고, 중복된 태그를 제거하고 싶어
// ["bag", "shoose", "friend", "cap"]
// [["bag", "shoose"], ["friend"], ["bag", "cap"]];
const allTags = apiResponse.map((data) => data.tags).flat();
const uniqueTags = [...new Set(allTags)];
console.log(uniqueTags);

< 15. 문자열 내장 객체 >

0. 파괴적 매서드 & 비파괴적 매서드

파괴적 매서드 : 원본 데이터를 해치는 매서드

1. `length()`

문자열의 길이를 반환할 때 사용

const str = "Hello, World!";
console.log(str.length); // 13

2. `charAt(index)` ( 사용빈도 높음! )

주어진 인덱스 번호의 문자를 나타낼 때 사용

"Hello".charAt(1) 과 "Hello"[1]은 같다

3. `indexOf(string)` ( 사용빈도 높음! )

문자열의 시작 인덱스를 앞에서부터 찾기
특정 문자열이 처음 등장하는 인덱스의 위치를 나타낼 때 사용

예시

// // ex 1)
const str = "Hello, World";
console.log(str.indexOf("llo")); // 2
없다면 -1 출력

4. `lastIndexOf(string)`

문자열을 시작 인덱스 끝에서부터 찾기
indexOf의 반대

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.indexOf("llo")); // 2
console.log(str.lastIndexOf("llo")); // 16

5. `substring(start, end)` ( 사용빈도 높음! )

start부터 end 전까지의 문자열을 반환
주어진 인덱스 범위에 해당하는 문자열 반환

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.substring(0, 4)); // Hell

6. `slice(index)`

index 번호를 기준으로 문자열을 자름
-(마이너스) 사용하면 뒤에서부터 자름

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.slice(4)); // o, World, Hello
console.log(str.slice(-3)); // llo

7. `toLowerCase()` ( 사용빈도 높음! )

문자열을 모두 소문자로 변환

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.toLowerCase()); // hello, world, hello

8. `toUpperCase()` ( 사용빈도 높음! )

문자열을 모두 대문자로 변환

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.toUpperCase()); // HELLO, WORLD, HELLO

9. `trim()` ( 사용빈도 매우 높음!! )

문자열 양쪽 공백 제거

예시

// ex 1)
const str = "  Hello, World, Hello  ";
console.log(str.trim()); // Hello, World, Hello
// 공백을 true 값으로 인식하므로 trim 무조건 사용한다
const str2 = "  ";
console.log(!!str2); // true
console.log(!!str2.trim()); // false

10. `split()`

문자열을 주어진 구분자로 분할하여 배열로 전환
알고리즘 문제 단골 매서드

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.split(",")); // ['Hello', ' World', ' Hello']

11. `replace(string)`

주어진 문자열을 교체할 때 사용

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.replace("o", "")); 
// Hell, World, Hello, 첫 번째 o만 제거

12. `replaceAll(string)`

주어진 모든 문자열을 교체할 때 사용

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.replaceAll("o", "")); // Hell, Wrld, Hell

13. `includes(문자열)` ( 사용빈도 매우 높음!! )

특정 문자열이 있는지 확인해서 true, false 값으로 반환

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.indexOf("world") > -1); // false
console.log(str.includes("world")); // false, includes가 훨씬 편함

14. `startsWith(문자열)` ( 사용빈도 높음! )

문자열로 시작하는지 확인하여 true, false 값으로 반환

예시

// ex 1)
const str = "Hello, World, Hello";
console.log(str.indexOf("Hello") === 0); // true
console.log(str.startsWith("Hello")); // true, startsWith가 훨씬 깔끔

15. `endWith(문자열)`

문자열로 끝나는지 확인하여 true, false 값으로 반환

예시

// ex 1)
const str = "Hello, World";
console.log(str.endsWith("World")); // true

16. `repeat(count)`

문자열을 주어진 숫자만큼 반복
알고리즘 문제 단골 매서드
실무에선 많이 안 씀

예시

// ex 1)
const str = "a";
console.log(str.repeat(3)); // aaa

17. `padStart(length, str)`

문자열의 길이가 주어진 길이보다 짧을 경우, 시작 부분에 문자를 대체

예시

// ex 1)
const str = "a";
console.log(str.padStart(5, "b")); // bbbba
console.log(str.padStart(5, "range")); // ranga
// ex 2)
const date = String(5).padStart(2, "0");
console.log(date); // 05, 앞에 0이 붙은 숫자 표현하고 싶을 때

18. `padEnd(length, str)`

문자열의 길이가 주어진 길이보다 짧을 경우, 끝 부분에 문자를 대체

예시

const str = "5";
console.log(str.padEnd(2, '0')); // '50'

19. `valueOf()`

생성자 함수로 만들었을 때, 값을 출력하고 싶은 경우

예시

// ex 1)
const date = new String("Hello");
console.log(date.valueOf()); // Hello

20. `match(/문자열/)`

정규 표현식에서 사용
찾고 싶은 문자열은 찾고 싶을 때 사용
없으면 null 반환
(/문자열/g) 로 표현할 경우 전부 다 찾아줌 ( 꼭 기억! )
g 안 붙일 경우 첫 번째만 찾거나 바꾼다.

예시

// ex 1)
const str = "The rain in Spain stays mainly in the plain.";
const result = str.match(/ain/g); // 다 찾아 줌
console.log(result); // ['ain', 'ain', 'ain', 'ain']
const result2 = str.match(/ain/g).length; // 몇 개 있는지 찾아 줌
console.log(result2); // 4

// ex 2)
const str = "rain rain rain rain";
const result = str.replace(/rain/g, "rainded");
console.log(result); // rainded rainded rainded rainded, 정규식 표현
const result2 = str.replaceAll("rain", "rainded");
console.log(result2); // rainded rainded rainded rainded, 매서드만 사용

21. `search(/문자열/)`

정규 표현식에서 사용
찾고 싶은 문자열의 첫 번째 인덱스 번호를 반환
없으면 -1 반환

예시

const str = "The quick brown fox jumps over the lazy dog.";
const index = str.search(/fox/);
console.log(index); // 16

22. `toLocaleUpperCase(국가코드)`

어떤 지역 특정 대/소문자 매핑에 따른 대문자로 변환된 문자열 값을 반환

예시

const city = 'istanbul';
console.log(city.toLocaleUpperCase('en-US'));
// Expected output: "ISTANBUL"
console.log(city.toLocaleUpperCase('TR'));
// Expected output: "İSTANBUL"

23. `toLocaleLowerCase(국가코드)`

어떤 지역 특정 대/소문자 매핑에 따른 소문자로 변환된 문자열 값을 반환

예시

const dotted = 'İstanbul';
console.log(`EN-US: ${dotted.toLocaleLowerCase('en-US')}`);
// Expected output: "i̇stanbul"
console.log(`TR: ${dotted.toLocaleLowerCase('tr')}`);
// Expected output: "istanbul"

< 16. 배열 내장 객체 >

1. `push()`

배열에 새로운 값을 추가하기 위해 사용
맨 뒤에서부터 추가

2. `pop()`

배열의 마지막 요소를 제거하고 그 값을 반환
push()의 반대

예시

// ex 1)
const arr = ["a", "b"];
const lastValue = arr.pop();
console.log(lastValue); // b
console.log(arr); // ['a']

3. `shift()`

배열의 첫 번째 요소를 제거하고 그 값을 반환

예시

// ex 1)
const arr = ["a", "b"];
const FirstValue = arr.shift();
console.log(FirstValue); // a
console.log(arr); // ['b']

4. `unshift()`

배열의 시작에 요소 추가
shift()의 반대

예시

// ex 1)
const arr = ["a", "b"];
arr.unshift("c");
console.log(arr); // ['c', 'a', 'b']

5. `slice(startNumber, endNumber)`

start부터 end 전까지 index 번호의 값을 반환
비파괴적 매서드
배열의 일부를 얕은 복사본으로 반환

예시

// ex 1)
const arr = ["a", "b", "c", "d"];
const result = arr.slice(0, 2);
console.log(result); // ['a', 'b']

6. `splice(start, deletCount, item)`

배열의 기존 요소를 제거하거나 대체하거나 추가
start 인덱스부터 deleteCount 개수의 요소를 item으로 대체

예시

// ex 1)
const arr = ["a", "b", "c", "d"];
const result = arr.splice(0, 2, "z"); // 0 인덱스부터 2개 요소를 z로 대체
console.log(arr); // ['z', 'c', 'd']
// ex 2)
const arr = ["a", "b", "c", "d"];
const result = arr.splice(1, 2, "x", "y");
// 1 인덱스부터 2개 요소를 x, y로 대체
console.log(arr); // ['a', 'x', 'y', 'd']

7. `forEach()` ( 사용빈도 매우 높음!! )

배열의 각 요소에 대해 제공된 함수 실행

예시

// ex 1)
const fruits = ["사과", "바나나", "오렌지"];
fruits.forEach((fruit) => {
  console.log(fruit); // '사과', '바나나', '오렌지'
});

8. `map()` ( 사용빈도 매우 높음!! )

배열을 순회해서 새로운 배열을 만들어 냄
react에서 무조건 사용 함! 꼭 기억!

예시

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

9. `filter()` ( 사용빈도 매우 높음!! )

주어진 함수를 통과하는 모든 요소로 새로운 배열 생성
( )안에 true 또는 false로 평가 되게 끔 작성

예시

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

10. `find(value, index)`

주어진 함수를 만족하는 첫 번째 요소 반환
value 값이 필요 없다면 _ 로 대체해서 넣어야 함, 비워두면 안됨

예시

// ex 1)
const numbers = [1, 2, 3, 4];
const found = numbers.find((num) => num > 2);
console.log(found); // 3

11. `some()`

배열의 일부 요소가 조건을 만족하는 지 확인
알고리즘 테스트에 많이 나옴

예시

// ex 1)
const arr = [1, 2, 3, 4];
const arr2 = arr.some((value) => value > 2);
console.log(arr2); // true

12. `every()`

배열의 모든 요소가 조건을 만족하는 지 확인
알고리즘 테스트에 많이 나옴

예시

// ex 1)
const arr = [1, 2, 3, 4];
const arr2 = arr.every((value) => value > 2);
console.log(arr2); // false

13. `join()`

배열의 모든 요소를 문자열로 결합
구분자로 지정

예시

// ex 1)
const arr = [1, 2, 3, 4];
const arr2 = arr.join("@");
console.log(arr2); // 1@2@3@4

14. `reverse()`

배열의 요소 순서를 반전시킴
파괴적 매서드

예시

// ex 1)
const numbers = [1, 2, 3, 4];
numbers.reverse();
console.log(numbers); // [4, 3, 2, 1]

15. `sort()` ( 사용빈도 매우 높음!! )

배열의 요소를 정렬할 때 사용
파괴적 매서드
sort만 사용하면 제대로 정렬이 안 됨
숫자를 문자열로 바꾸고 그 문자의 유니코드 값으로 정렬하기 때문

예시

ex 1)
const arr = [4, 3, 15, 1];
arr.sort();
console.log(arr); // [1, 15, 3, 4], 15가 3보다 유니코드 값이 낮기 때문

ex 2) 제대로 정렬하기
const arr = [4, 3, 15, 1];
arr.sort((a, b) => {
  if (a < b) return -1;
  else if (a > b) return 1;
  else 0;
});
console.log(arr); // [1, 3, 4, 15]

ex 3) 더 간단하게
const arr = [4, 3, 15, 1];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 3, 4, 15]

ex 4) 객체도 객체의 속성 값으로 정렬 가능
let items = [
    { name: 'Edward', value: 21 },
    { name: 'Sharpe', value: 37 },
    { name: 'And', value: 45 },
    { name: 'The', value: -12 },
    { name: 'Magnetic', value: 13 },
    { name: 'Zeros', value: 37 }
  ];

  // value 기준으로 정렬
  items.sort(function (a, b) {
    if (a.value > b.value) {
      return 1;
    }
    if (a.value < b.value) {
      return -1;
    }
    // a must be equal to b
    return 0;
  });

  // name 기준으로 정렬 (원시적인 방법)
  items.sort(function(a, b) {
    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }

    // 이름이 같을 경우
    return 0;
  });

 세련된 방법 localeCompare()이 있음

16. `findIndex()`

조건을 만족하는 요소의 인덱스 번호를 반환
만족하는 요소가 없으면 -1 반환

예시

// ex 1)
const numbers = [10, 20, 30, 40];
const findIndex = numbers.findIndex((value) => value === 10);
console.log(findIndex); // 0

17. `indexOf()`

배열에서 특정 요소의 첫 번째 인덱스 반환

예시

const fruits = ['사과', '바나나', '오렌지'];
const index = fruits.indexOf('바나나');
console.log(index); // 1

18. `lastIndexOf()`

배열에서 특정 요소의 마지막 인덱스 반환

예시

const numbers = [2, 5, 9, 2];
const lastIndex = numbers.lastIndexOf(2);
console.log(lastIndex); // 3

19. `flat()`

중첩된 배열을 평탄화할 때 사용
알고리즘 문제에서 많이 사용
기본적으로 1단계 깊이의 배열을 평탄화

예시

// ex 1)
const nestedArray = [1, [2, 3], [4, [5, 6]]]; // 숫자만큼 배열을 다 벗김
const flatArray = nestedArray.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

20. `fill()`

주어진 요소만큼 내용을 채우는 것
배열의 모든 요소를 정해진 값으로 채운다.
시작 인덱스와 종료 인덱스를 지정할 수 있다

예시

// ex 1)
const arr = new Array(5).fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

21. `reduce()`

배열 요소의 합계 또는 곱셈 등을 구할 때 사용
누산기라고도 함, 누적된 값을 계산해주는 것

예시

// ex 1)
const str = [1, 2, 3, 4, 5];
// 1. 초기값이 없을 때
// prev : 배열의 0번 인덱스 값, cur : 배열의 1번 인덱스 값이 들어감
// 1번 인덱스부터 돌아감
// 빈 배열에 초기값이 없으면 error 뜸
// 실무에서는 웬만하면 초기값을 넣어주는 것이 좋다.

// 2. 초기값이 있을 때
// prev : 초깃값, cur : 0번 인덱스 값
// 0번 인덱스부터 돌아감(순회)
// 빈 배열에 초기값이 있으면 초기값이 반환됨
const sum = arr.reduce((prev, cur, index) => {
  console.log(prev);
  console.log(cur);
  console.log(index);
  return prev + cur;
}, 0);
console.log("총 합:" + sum);

// ex 2)
const arr = [1, 2, 3, 4];
const sum = arr.reduce((prev, cur) => prev * cur);
console.log("총 합:" + sum);

const basket = [
  { id: 1, name: "귀저기", price: 1000 },
  { id: 2, name: "분유", price: 2000 },
  { id: 3, name: "젖병", price: 3000 },
];

const totalPrice = basket.reduce((prev, cur) => prev + cur.price, 0);
console.log(totalPrice.toLocaleString());

const numbers = [1, 2, 2, 3, 4];
const uniqueNumbers = numbers.reduce((prev, cur) => {
  if (!prev.includes(cur)) prev.push(cur);
  return prev;
}, []);
console.log(uniqueNumbers);

< 하루 정리 >

오늘은 내용이 어렵다기 보단 이 많은 걸 적재적소에 사용을 할 수 있을 까라는
두려움이 생기는 그런 날이었다.

TIL을 이곳 저곳 옮겨보면서 결국 Velog로 돌아왔지만,
시간 낭비가 아니라 전에 썼던 글을 다시 읽어볼 수 있는 시간이 된 거 같아서
다행이다.

초반에는 아주 기세가 어마어마하고 밝은 느낌이었는데 갈 수록 글이 우울해진다.
이제는 <하루 정리>만 쓰는게 아니라 전에 적어놨던 것도 포함해서,
배운 내용을 간단하게 요약하는 칸을 같이 포스팅해야될 것 같다.

주말 과제도 어마어마하게 내주셨는데 이번 주말은 방에서 쭈욱 박혀 살 듯..
강사님 曰 "취준생에게 주말은 사치입니다~~"

다른 수강생들 실력이면 주말 정도는 놀아도 될 것 같은데 나한테는 정말 사치인 것 같다.
이번 주말도 빡세게 해봅시다!

워니

첫 시작!

이전 포스트

데브코스 14일차 ( 24.10.31 목 ) JavaScript

다음 포스트

데브코스 15일차 ( 24.11.01 금 ) JavaScript

Programmers Front-end

[Section 02] JavaScript 심화

< 14. 표준 내장 객체 >

< 15. 문자열 내장 객체 >

0. 파괴적 매서드 & 비파괴적 매서드

1. length()

2. charAt(index) ( 사용빈도 높음! )

3. indexOf(string) ( 사용빈도 높음! )

4. lastIndexOf(string)

5. substring(start, end) ( 사용빈도 높음! )

6. slice(index)

7. toLowerCase() ( 사용빈도 높음! )

8. toUpperCase() ( 사용빈도 높음! )

9. trim() ( 사용빈도 매우 높음!! )

10. split()

11. replace(string)

12. replaceAll(string)

13. includes(문자열) ( 사용빈도 매우 높음!! )

14. startsWith(문자열) ( 사용빈도 높음! )

15. endWith(문자열)

16. repeat(count)

17. padStart(length, str)

18. padEnd(length, str)

19. valueOf()

20. match(/문자열/)

21. search(/문자열/)

22. toLocaleUpperCase(국가코드)

23. toLocaleLowerCase(국가코드)

< 16. 배열 내장 객체 >

1. push()

2. pop()

3. shift()

4. unshift()

5. slice(startNumber, endNumber)

6. splice(start, deletCount, item)

7. forEach() ( 사용빈도 매우 높음!! )

8. map() ( 사용빈도 매우 높음!! )

9. filter() ( 사용빈도 매우 높음!! )

10. find(value, index)

11. some()

12. every()

13. join()

14. reverse()

15. sort() ( 사용빈도 매우 높음!! )

16. findIndex()

17. indexOf()

18. lastIndexOf()

19. flat()

20. fill()

21. reduce()

< 하루 정리 >

데브코스 14일차 ( 24.10.31 목 ) JavaScript

데브코스 16일차 ( 24.11.04 월 ) JavaScript

0개의 댓글

1. `length()`

2. `charAt(index)` ( 사용빈도 높음! )

3. `indexOf(string)` ( 사용빈도 높음! )

4. `lastIndexOf(string)`

5. `substring(start, end)` ( 사용빈도 높음! )

6. `slice(index)`

7. `toLowerCase()` ( 사용빈도 높음! )

8. `toUpperCase()` ( 사용빈도 높음! )

9. `trim()` ( 사용빈도 매우 높음!! )

10. `split()`

11. `replace(string)`

12. `replaceAll(string)`

13. `includes(문자열)` ( 사용빈도 매우 높음!! )

14. `startsWith(문자열)` ( 사용빈도 높음! )

15. `endWith(문자열)`

16. `repeat(count)`

17. `padStart(length, str)`

18. `padEnd(length, str)`

19. `valueOf()`

20. `match(/문자열/)`

21. `search(/문자열/)`

22. `toLocaleUpperCase(국가코드)`

23. `toLocaleLowerCase(국가코드)`

1. `push()`

2. `pop()`

3. `shift()`

4. `unshift()`

5. `slice(startNumber, endNumber)`

6. `splice(start, deletCount, item)`

7. `forEach()` ( 사용빈도 매우 높음!! )

8. `map()` ( 사용빈도 매우 높음!! )

9. `filter()` ( 사용빈도 매우 높음!! )

10. `find(value, index)`

11. `some()`

12. `every()`

13. `join()`

14. `reverse()`

15. `sort()` ( 사용빈도 매우 높음!! )

16. `findIndex()`

17. `indexOf()`

18. `lastIndexOf()`

19. `flat()`

20. `fill()`

21. `reduce()`