JS 배열 내장 함수
1. at
배열의 주어진 인덱스에 대한 값을 반환하는 함수
at(index)
- index : 배열에서 반환할 요소의 인덱스
( ➖음수 값일 경우 배열의 마지막 요소부터 계산🧮 )
ex )
1 2 3 4 5 6 7 8 9 10 | const cafe = ['아메리카노','라떼', '스무디', '프라푸치노']; cafe.at(0); // 아메리카노 cafe.at(1); // 라떼 cafe.at(2); // 스무디 cafe.at(3); // 프라푸치노 cafe.at(-1); // 프라푸치노 cafe.at(-2); // 스무디 cafe.at(-3); // 라떼 cafe.at(-4); // 아메리카노 | cs |
2. concat
배열이나 값을 기존 배열에 합쳐서 새로운 배열을 반환하는 함수
concat(value)
- value : 배열 또는 값
( 생략할 경우 기존 배열의 얕은 복사 본 반환🔁 )
ex )
1 2 3 4 5 6 | const arr1 = ['사탕', '초콜릿']; const arr2 = ['젤리', '껌', '푸딩']; console.log(arr1.concat('과자')); // ['사탕', '초콜릿', '과자'] console.log(arr1.concat(arr2)); // ['사탕', '초콜릿', '젤리', '껌', '푸딩'] console.log(arr1.concat('과자', arr2)); // ['사탕', '초콜릿', '과자', '젤리', '껌', '푸딩'] | cs |
3. every
배열 안에 모든 요소가 특정 조건에 부합하는지 확인
every(callbackFn, thisArg)
- callbackFn : 배열 요소에 대해 실행할 함수
👉 element : 배열에서 처리하는 현재 요소
👉 index : 처리하는 현재 요소의 인덱스
👉 array : 호출한 배열 - thisArg : callbackFn을 실행할 때 this로 사용하는 값
ex )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 화살표 함수 every((element) => { ... } ) every((element, index) => { ... } ) every((element, index, array) => { ... } ) // 콜백 함수 every(callbackFn) every(callbackFn, thisArg) // 인라인 콜백 함수 every(function callbackFn(element) { ... }) every(function callbackFn(element, index) { ... }) every(function callbackFn(element, index, array){ ... }) every(function callbackFn(element, index, array) { ... }, thisArg) | cs |
🤗 어떤 하나의 값이라도 조건에 통과하지 못하면 false 반환
( 빈 배열➡ true 반환 )
1 2 3 4 5 6 7 8 | const isTrue = (value) => value > 0; const arr1 = [1, 30, 39, 29, 10, 13]; const arr2 = [-1, 1, 30, 39, 29, 10, 13]; const arr3 = []; console.log(arr1.every(isTrue)); //true console.log(arr2.every(isTrue)); //false console.log(arr3.every(isTrue)); //true | cs |
🙊 arr1의 모든 요소에 대해서 10으로 나눴을 때 나머지가 0인지 확인하기
1 2 3 4 5 6 7 8 9 10 | const arr1 = [10, 20, 30, 40, ..., 9999990, 10000000]; // 100만개의 데이터 let result = true; for (const item of arr1){ if ( item % 10 !== 0) { result = false; } } return result; | cs |
1 2 3 4 5 | const arr1 = [10, 20, 30, 40, ..., 9999990, 10000000]; // 100만개의 데이터 const result = arr1.every(item => item % 10 === 0); return result; | cs |
every( ) : 지시해준 조건에 따라 false 값을 찾을 때까지
각 요소들에 대해 callback 함수를 실행하게 됩니다.
간단히 말하자면 "이 조건에 전부 다 true야?" 하고
배열에게 물어보는 것이라 생각하면 됩니다.
배열의 모든 값이 주어진 조건에 대해 true일 경우만 true를 반환하는 함수❗
for...of : 반복 가능한 객체(배열, 문자열 등)의 값을 반복
👉 for (const item of array) 각 요소를 제공
for...in : 객체의 키 또는 속성 이름을 반복합니다 .
배열의 경우 인덱스(값이 아님)를 반환합니다.
👉 for (const key in object) 각 키를 제공
4. fill
배열의 시작 인덱스부터 끝 인덱스 전까지 인자로 받은 값으로 채움
fill(value, start, end)
- value : 배열을 채울 값
- start : 시작 인덱스 값 ( default: 0 )
- end : 끝 인덱스 ( default: 배열 길이 )
ex )
1 2 3 4 5 6 7 8 9 10 | const arr = [1, 2, 3, 4]; // index 2부터 index 4 이전까지 0으로 채운다. console.log(array1.fill(0, 2, 4)); //[1, 2, 0, 0] // index 1부터 끝까지 5로 채운다. console.log(array1.fill(5, 1)); //[1, 5, 5, 5] // 모든 값을 6으로 채운다. console.log(array1.fill(6)); //[6, 6, 6, 6] | cs |
5. filter
특정 조건에 부합하는 모든 배열의 요소를 새로운 배열로 반환
filter(callbackFn, thisArg)
- callbackFn : 배열 요소에 대해 실행할 함수
👉 element : 배열에서 처리하는 현재 요소
👉 index : 처리하는 현재 요소의 인덱스
👉 array : 호출한 배열 - thisArg : callbackFn을 실행할 때 this로 사용하는 값
ex )
1 2 3 4 5 6 7 | const arr1 = [1, 5, 10, 2, 4, 8]; function isTrue(value) { return value > 5; } console.log(arr1.filter(isTrue)); // 출력 : [10, 8] | cs |
6. forEach
인자로 주어진 함수를 배열 요소에 대해 실행하는 함수
forEach(callbackFn, thisArg)
- callbackFn : 배열 요소에 대해 실행할 함수
👉 element : 배열에서 처리하는 현재 요소
👉 index : 처리하는 현재 요소의 인덱스
👉 array : 호출한 배열 - thisArg : callbackFn을 실행할 때 this로 사용하는 값
ex )
1 2 3 4 5 6 7 8 9 10 11 12 13 | const cafe = ['아메리카노', '라떼', '스무디', '프라푸치노']; // 화살표 함수 cafe.forEach(menu => { console.log(menu); }); // 함수 cafe.forEach(function (value, index, array) { console.log(value); console.log(index); console.log(array); }); | cs |
🖨
1 2 3 4 | 아메리카노 라떼 스무디 프라푸치노 | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 아메리카노 0 ['아메리카노', '라떼', '스무디', '프라푸치노'] 라떼 1 ['아메리카노', '라떼', '스무디', '프라푸치노'] 스무디 2 ['아메리카노', '라떼', '스무디', '프라푸치노'] 프라푸치노 3 ['아메리카노', '라떼', '스무디', '프라푸치노'] | cs |
forEach를 사용할 땐 중간에 멈출 수 없기에 목적에 맞게 for문, forEach 함수를 사용✅
7. includes
배열이 특정 요소를 포함하고 있는지 확인
includes(value, fromIndex)
- value : 검색할 값 ( 대소문자 구분⭕ )
- fromIndex : 검색 시작할 인덱스 ( default: 0 )
ex )
1 2 3 4 5 6 | const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, NaN]; arr.includes(2); //true arr.includes(10); //false arr.includes(2, 2); //false arr.includes(NaN); //true | cs |
8. indexOf
배열에서 특정 요소 검색하여 첫 번째 인덱스를 반환하고 존재하지 않으면 '-1' 반환
indexOf(value, fromIndex)
- value : 검색할 값
- fromIndex : 검색을 시작할 인덱스 ( default: 0 )
ex )
1 2 3 4 5 6 | var arr = [5, 1, 8, 7, 8]; arr.indexOf(1); // 1 arr.indexOf(9); // -1 arr.indexOf(8, 3); // 4 arr.indexOf(2, 1); // -1 | cs |
9. join
배열의 모든 요소들을 연결해서 하나의 문자열로 만듦
join(separator)
- separator : 배열의 요소를 구분할 문자열 구분자
( 생략 시 쉼표로 구분 )
ex ) 배열 요소 값이 undefined or null일 경우 '빈 문자열'로 반환
1 2 3 4 5 6 7 8 | const a = ['바람', '비', '불']; console.log(a.join()); // 바람,비,불 console.log(a.join(', ')); // 바람, 비, 불 console.log(a.join(' + ')); // 바람 + 비 + 불 console.log(a.join('')); // 바람비불 const b = ['바람', null, '비', undefined, '불']; console.log(b.join()); // 바람,,비,,불 | cs |
10. map
배열 내의 모든 요소에 주어진 함수를 호출한 결과를 새로운 배열에 반환
map(separator)
- callbackFn : 배열 요소에 대해 실행할 함수
👉 element : 배열에서 처리하는 현재 요소
👉 index : 처리하는 현재 요소의 인덱스
👉 array : 호출한 배열 - thisArg : callbackFn을 실행할 때 this로 사용하는 값
ex )
1 2 3 4 5 6 7 | const arr = [1, 4, 9]; const arr2 = arr.map(function(num) { return num * 2; }); console.log(arr); // [1, 4, 9] console.log(arr2); // [2, 8, 18] | cs |
11. pop
배열에서 마지막 요소 제거 및 반환
ex )
1 2 3 4 5 | const arr = [1, 2, 3, 4]; const pop = arr.pop(); console.log(arr); // [1, 2, 3] console.log(pop); // 4 | cs |
12. push
배열 끝에 하나 이상의 요소 추가하고 배열 길이 반환
push(element)
- element : 배열 끝에 추가할 요소 값
ex )
1 2 3 4 5 | let arr = [1, 2, 3, 4]; var add = arr.push(5, 6, 7); console.log(arr); // [1, 2, 3, 4, 5, 6, 7] console.log(add); // 7 -> 총 배열 값이 7개 라서 | cs |
13. slice
배열의 지정된 인덱스 범위로부터 얕은 복사본을 새로운 배열로 반환
slice(begin, end)
- begin : 추출 시작 인덱스 ( default: 0 ),
➖음수일 경우 배열 끝에서부터의 길이 - end : 추출 종료 인덱스 ( 생략 시 길이만큼 ),
➖음수일 경우 반대로←
1 2 3 4 5 | let arr = ['사탕', '초콜릿', '껌', '젤리', '아이스크림'] let arr2 = arr.slice(1, 3) console.log(arr); // ['사탕', '초콜릿', '껌', '젤리', '아이스크림'] console.log(arr2); // ['초콜릿', '껌'] | cs |
14. some
배열 요소 중 어떤 요소 하나라도 특정 조건에 부합하는지 확인
some(callbackFn, thisArg)
- callbackFn : 배열 요소에 대해 실행할 함수
👉 element : 배열에서 처리하는 현재 요소
👉 index : 처리하는 현재 요소의 인덱스
👉 array : 호출한 배열 - thisArg : callbackFn을 실행할 때 this로 사용하는 값
ex )
1 2 | [9, 10, 4, 3, 1].some((x) => x < 0); // false [-1, -3, -8, 1, -4].some((x) => x > 0); // true | cs |
15. sort
배열의 요소들을 정렬하여 반환
sort(compareFn)
- compareFn : 정렬 순서 정의하는 함수
ex ) 복사본이 아닌 원 배열이 정렬 됨
1 2 3 4 5 6 7 | const arr = [6, 8, 4, 2, 7, 1, 5, 3, 9]; arr.sort(function (a, b) { return a - b; }); console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9] | cs |
16. splice
배열의 기존 요소를 삭제/교체 하거나 새로운 요소 추가
splice(start, deleteCount, ...item)
- start : 배열의 변경을 시작할 인덱스, 음수일 경우 배열의 끝에서부터
- deleteCount : 배열에서 제거할 요소의 수
( 생략 시 start부터 모든 요소 제거❌ ) - item : 배열에 추가할 요소
ex ) 요소를 삭제할 경우 삭제한 요소의 값을 반환해줌
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // 1개 요소 추가 let arr = [1, 3, 5, 9]; let removed = arr.splice(1, 0, 2); console.log(arr); //[1, 2, 3, 5, 9] console.log(removed); //[] // 2개 요소 추가 let arr2 = [1, 4, 5, 9]; let removed2 = arr.splice(1, 0, 2, 3); console.log(arr2); //[1, 2, 3, 4, 5, 9] console.log(removed2); //[] // 1개 요소 삭제 + 2개 요소 추가 let arr3 = [1, 4, 5, 9]; let removed3 = arr3.splice(2, 1, 7, 8); console.log(arr3); //[1, 4, 7, 8, 9] console.log(removed3); //[5] | cs |
JS 문자열 내장 함수
1. charAt
문자열에서 특정 위치에 있는 문자를 반환
1 2 | let str = "Hello"; console.log(str.charAt(1)); // "e" | cs |
2. concat
두 개 이상의 문자열 결합
1 2 3 | let str = "Hello"; let str2 = "World"; console.log(str.concat(" ", str2)); // "Hello World" | cs |
3. includes
문자열에 특정 문자열이 포함되었는지 확인
1 2 | let str = "Hello World"; console.log(str.includes("World")); // true | cs |
4. indexOf
문자열에서 특정 문자열의 첫 번째 위치 반환
1 2 | let str = "Hello World"; console.log(str.indexOf("World")); // 6-> 공백 포함 | cs |
5. slice
문자열의 일부분 반환
1 2 | let str = "Hello World"; console.log(str.slice(0, 5)); // "Hello"-> 0번째부터 5개 반환 | cs |
6. split
문자열을 배열로 분할
1 2 | let str = "Hello World"; console.log(str.split(" ")); // ["Hello", "World"] | cs |
7. toLowerCase
문자열을 소문자로 변환
1 2 | let str = "Hello World"; console.log(str.toLowerCase()); // "hello world" | cs |
8. toLowerCase
문자열을 대문자로 변환
1 2 | let str = "Hello World"; console.log(str.toUpperCase()); // "HELLO WORLD" | cs |
9. padStart
문자열의 시작을 다른 문자열로 채워
주어진 길이를 만족하는 새로운 문자열을 반환
1 2 | let str = "5"; console.log(str.padStart(2, "0")); // "05"-> 주어진 길이, "문자열" | cs |
10. padEnd
문자열의 끝을 다른 문자열로 채워
주어진 길이를 만족하는 새로운 문자열을 반환
1 2 | let str = "5"; console.log(str.padEnd(2, "0")); // "50" | cs |
11. padEnd
문자열의 길이 반환
1 2 | let str = "Hello"; console.log(str.length); // 5 | cs |
안녕하세요! 퍼블리싱 & 프론트엔드 개발 공부 블로그 입니다!