27장 배열
- 희소배열: length와 배열 요소의 개수가 일치x.
- new Array(1, 2, 3); // → [1, 2, 3]
- Array.of(1, 2, 3); // → [1, 2, 3]
isArray
- 인수가 배열이면 true, 아니면 false 반환.
27-43
// true
Array.isArray([]);
Array.isArray([1, 2]);
Array.isArray(new Array());
// false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(1);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ 0: 1, length: 1 })
indexOf
- 요소의 인덱스 반환
const arr = [1, 2, 2, 3];
// 배열 arr에서 요소 2를 검색하여 첫 번째로 검색된 요소의 인덱스를 반환한다.
arr.indexOf(2); // -> 1
// 배열 arr에 요소 4가 없으므로 -1을 반환한다.
arr.indexOf(4); // -> -1
// 두 번째 인수는 검색을 시작할 인덱스다. 두 번째 인수를 생략하면 처음부터 검색한다.
arr.indexOf(2, 2); // -> 2
push
- 원본 마지막에 추가
원본 변경 안하고 싶으면 스프레드 문법 사용
pop
- 원본 마지막 제거
unshift
- 원본 선두에 추가
27-52
const arr = [1, 2];
// 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 값을 반환한다.
let result = arr.unshift(3, 4);
console.log(result); // 4
// unshift 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [3, 4, 1, 2]
shift
- 원본 첫번째 제거
27-54
const arr = [1, 2];
// 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.shift();
console.log(result); // 1
// shift 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [2]
splice
- 원본 중간 추가/제거
27-61
const arr = [1, 2, 3, 4];
// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
const result = arr.splice(1, 2, 20, 30);
// 제거한 요소가 배열로 반환된다.
console.log(result); // [2, 3]
// splice 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 20, 30, 4]
slice
- 배열 복사해서 반환, 원본 변경x.
27-67
const arr = [1, 2, 3];
// arr[0]부터 arr[1] 이전(arr[1] 미포함)까지 복사하여 반환한다.
arr.slice(0, 1); // -> [1]
// arr[1]부터 arr[2] 이전(arr[2] 미포함)까지 복사하여 반환한다.
arr.slice(1, 2); // -> [2]
// 원본은 변경되지 않는다.
console.log(arr); // [1, 2, 3]
join
- 문자열 변경 → 구분자로 연결한 문자열 반환.
- 27-75
const arr = [1, 2, 3, 4];
// 기본 구분자는 ','이다.
// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 기본 구분자 ','로 연결한 문자열을 반환한다.
arr.join(); // -> '1,2,3,4';
// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 빈문자열로 연결한 문자열을 반환한다.
arr.join(''); // -> '1234'
// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 구분자 ':'로 연결한 문자열을 반환한다.ㄴ
arr.join(':'); // -> '1:2:3:4'
reverse
- 원본 변경 뒤집기
fill
- 원본 변경 채우기
27-77
const arr = [1, 2, 3];
// 인수로 전달 받은 값 0을 배열의 처음부터 끝까지 요소로 채운다.
arr.fill(0);
// fill 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [0, 0, 0]
includes
- 요소가 포함되어 있는지 확인 → true/false
flat
- 깊이만큼 배열 평탄화
27-86
// 중첩 배열을 평탄화하기 위한 깊이 값의 기본값은 1이다.
[1, [2, [3, [4]]]].flat(); // -> [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(1); // -> [1, 2, [3, [4]]]
// 중첩 배열을 평탄화하기 위한 깊이 값을 2로 지정하여 2단계 깊이까지 평탄화한다.
[1, [2, [3, [4]]]].flat(2); // -> [1, 2, 3, [4]]
// 2번 평탄화한 것과 동일하다.
[1, [2, [3, [4]]]].flat().flat(); // -> [1, 2, 3, [4]]
// 중첩 배열을 평탄화하기 위한 깊이 값을 Infinity로 지정하여 중첩 배열 모두를 평탄화한다.
[1, [2, [3, [4]]]].flat(Infinity); // -> [1, 2, 3, 4]
배열 고차 함수
forEach
27-96
const numbers = [1, 2, 3];
let pows = [];
// forEach 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
numbers.forEach(item => pows.push(item ** 2));
console.log(pows); // [1, 4, 9]
map
- 새로운 배열 반환
27-106
const numbers = [1, 4, 9];
// map 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
// 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
const roots = numbers.map(item => Math.sqrt(item));
// 위 코드는 다음과 같다.
// const roots = numbers.map(Math.sqrt);
// map 메서드는 새로운 배열을 반환한다
console.log(roots); // [ 1, 2, 3 ]
// map 메서드는 원본 배열을 변경하지 않는다
console.log(numbers); // [ 1, 4, 9 ]
filter
- 반환값이 true인 요소로만 구성된 새로운 배열 반환
27-110
const numbers = [1, 2, 3, 4, 5];
// filter 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
// 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
// 다음의 경우 numbers 배열에서 홀수인 요소만을 필터링한다(1은 true로 평가된다).
const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]
reduce
- 반환값을 인수로 전달하면서 하나의 결과값을 만들어 반환.
27-113
// [1, 2, 3, 4]의 모든 요소의 누적을 구한다.
const sum = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0);
console.log(sum); // 10
28장 Number
isInteger
- 정수인지 판별
28-17
// 인수가 정수이면 true를 반환한다.
Number.isInteger(0) // -> true
Number.isInteger(123) // -> true
Number.isInteger(-123) // -> true
// 0.5는 정수가 아니다.
Number.isInteger(0.5) // -> false
// '123'을 숫자로 암묵적 타입 변환하지 않는다.
Number.isInteger('123') // -> false
// false를 숫자로 암묵적 타입 변환하지 않는다.
Number.isInteger(false) // -> false
// Infinity/-Infinity는 정수가 아니다.
Number.isInteger(Infinity) // -> false
Number.isInteger(-Infinity) // -> false
isNaN
- NaN인지 판별
toFixed
- 숫자 반올림, 문자열로 반환
28-26
// 소수점 이하 반올림. 인수를 생략하면 기본값 0이 지정된다.
(12345.6789).toFixed(); // -> "12346"
// 소수점 이하 1자리수 유효, 나머지 반올림
(12345.6789).toFixed(1); // -> "12345.7"
// 소수점 이하 2자리수 유효, 나머지 반올림
(12345.6789).toFixed(2); // -> "12345.68"
// 소수점 이하 3자리수 유효, 나머지 반올림
(12345.6789).toFixed(3); // -> "12345.679"
toPrecision
- 전체 자릿수 유효하도록 나머지 자릿수 반올림, 문자열 반환
28-27
// 전체 자리수 유효. 인수를 전달하지 않으면 기본값 0이 전달된다.
(12345.6789).toPrecision(); // -> "12345.6789"
// 전체 1자리수 유효, 나머지 반올림
(12345.6789).toPrecision(1); // -> "1e+4"
// 전체 2자리수 유효, 나머지 반올림
(12345.6789).toPrecision(2); // -> "1.2e+4"
// 전체 6자리수 유효, 나머지 반올림
(12345.6789).toPrecision(6); // -> "12345.7"
31장 RegExp(정규 표현식)
31-02
const target = 'Is this all there is?';
// 패턴: is
// 플래그: i => 대소문자를 구별하지 않고 검색한다.
const regexp = /is/i;
// test 메서드는 target 문자열에 대해 정규표현식 regexp의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.
regexp.test(target); // -> true
exec
- 매칭 결과를 배열로 반환, 없는 경우 null 반환
31-05
const target = 'Is this all there is?';
const regExp = /is/;
regExp.exec(target); // -> ["is", index: 5, input: "Is this all there is?", groups: undefined]
test
- 매칭 결과를 불리언 값으로 반환.
31-06
const target = 'Is this all there is?';
const regExp = /is/;
regExp.test(target); // -> true
match
- 매칭 결과를 배열로 반환
- exec과 차이점 : g플래그 지정되면 모든 매칭결과를 배열로 반환. exec은 g플래그 지정해도 첫번째 매칭 결과만 반환.
31-08
const target = 'Is this all there is?';
const regExp = /is/g;
target.match(regExp); // -> ["is", "is"]
플래그
- i : 대소문자 구별x, 패턴검색
- g : 패턴과 일치하는 모든 문자열 전역검색
- m : 문자열 행이 바뀌어도 계속 패턴검색
32장 String
- 문자열은 원시값이므로 변경할 수 없음.
32-04
// 문자열은 원시값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다.
strObj[0] = 'S';
console.log(strObj); // 'Lee'
- length : 문자열의 문자 개수 반환.
32-07
'Hello'.length; // -> 5
'안녕하세요!'.length; // -> 6
- String 객체의 메서드는 언제나 새로운 문자열을 반환함.읽기 전용 객체.
- 원본을 직접 변경x.
indexOf
- 검색하여 첫번째 인덱스 반환, 없으면 -1
32-09
const str = 'Hello World';
// 문자열 str에서 'l'을 검색하여 첫 번째 인덱스를 반환한다.
str.indexOf('l'); // -> 2
// 문자열 str에서 'or'을 검색하여 첫 번째 인덱스를 반환한다.
str.indexOf('or'); // -> 7
// 문자열 str에서 'x'를 검색하여 첫 번째 인덱스를 반환한다. 검색에 실패하면 -1을 반환한다.
str.indexOf('x'); // -> -1
search
- 정규 표현식과 매치하는 문자열 검색, 인덱스 반환, 실패시 -1
32-13
const str = 'Hello world';
// 문자열 str에서 정규 표현식과 매치하는 문자열을 검색하여 일치하는 문자열의 인덱스를 반환한다.
str.search(/o/); // -> 4
str.search(/x/); // -> -1
includes
- 해당 문자열이 포함되어 있는지 확인하여, true / false 반환
32-14
const str = 'Hello world';
str.includes('Hello'); // -> true
str.includes(''); // -> true
str.includes('x'); // -> false
str.includes(); // -> false
startsWith
- 해당 문자열로 시작하는지 확인하여, true / false 반환
32-16
const str = 'Hello world';
// 문자열 str이 'He'로 시작하는지 확인
str.startsWith('He'); // -> true
// 문자열 str이 'x'로 시작하는지 확인
str.startsWith('x'); // -> false
endsWith
- 해당 문자열로 끝나는지 확인하여, true / false 반환
32-18
const str = 'Hello world';
// 문자열 str이 'ld'로 끝나는지 확인
str.endsWith('ld'); // -> true
// 문자열 str이 'x'로 끝나는지 확인
str.endsWith('x'); // -> false
charAt
- 해당 인덱스의 문자를 반환
32-20
const str = 'Hello';
for (let i = 0; i < str.length; i++) {
console.log(str.charAt(i)); // H e l l o
}
substring
- 해당 범위의 문자열을 반환.
32-22
const str = 'Hello World';
// 인덱스 1부터 인덱스 4 이전까지의 부분 문자열을 반환한다.
str.substring(1, 4); // -> ell
trim
- 앞뒤에 공백 문자가 있을 경우 제거하며 반환.
32-29
const str = ' foo ';
str.trim(); // -> 'foo'
repeat
- 해당 숫자만큼 반복하여 반환.
32-32
const str = 'abc';
str.repeat(); // -> ''
str.repeat(0); // -> ''
str.repeat(1); // -> 'abc'
str.repeat(2); // -> 'abcabc'
str.repeat(2.5); // -> 'abcabc' (2.5 → 2)
str.repeat(-1); // -> RangeError: Invalid count value
replace
- 첫번째를 검색하여 두번째로 바꿈
32-33
const str = 'Hello world';
// str에서 첫 번째 인수 'world'를 검색하여 두 번째 인수 'Lee'로 치환한다.
str.replace('world', 'Lee'); // -> 'Hello Lee'
split
- 해당 인자로 문자열을 구분한 후 분리된 문자열로 이루어진 배열 반환.
32-38
const str = 'How are you doing?';
// 공백으로 구분(단어로 구분)하여 배열로 반환한다.
str.split(' '); // -> ["How", "are", "you", "doing?"]
// \\s는 여러 가지 공백 문자(스페이스, 탭 등)를 의미한다. 즉, [\\t\\r\\n\\v\\f]와 같은 의미다.
str.split(/\\s/); // -> ["How", "are", "you", "doing?"]
// 인수로 빈 문자열을 전달하면 각 문자를 모두 분리한다.
str.split(''); // -> ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", "?"]
// 인수를 생략하면 대상 문자열 전체를 단일 요소로 하는 배열을 반환한다.
str.split(); // -> ["How are you doing?"]
'JS' 카테고리의 다른 글
모던 자바스크립트 Deep Dive - 이터러블 (0) | 2024.02.02 |
---|---|
모던 자바스크립트 Deep Dive - 7번째 데이터 타입 Symbol (0) | 2024.02.02 |
모던 자바스크립트 Deep Dive - 클로저 (0) | 2024.01.19 |
모던 자바스크립트 Deep Dive - 실행 컨텍스트 (0) | 2024.01.17 |
모던 자바스크립트 Deep Dive - this (0) | 2024.01.16 |
댓글