배열은 굉장히 많은 내장함수를 가지고 있음
내장함수를 잘 이용할수록 for문, if문 간의 의존성을 줄여 더 유연하고 깔끔하고 멋있고 짧은 코드 완성 가능
내장함수라는 것은 객체의 메서드와 같은 것이기 때문에 사용할 때
자바스크립트의 자료형은 모두 객체로 이루어짐 -> 객체의 메소드를 사용하는 것처럼 사용하면 됨
1. 배열을 순회하는 내장함수 : forEach()
-> 배열의 모든 요소를 한번씩 순회할 수 있도록 해주는 내장함수
const arr = [1,2,3,4];
arr.forEach((elm) => console.log(elm)); //콜백함수같은 형식 (화살표 함수)
// 마치 for문을 작성한 것처럼 배열의 요소를 하나하나씩 콘솔을 통해 출력
// 1
// 2
// 3
// 4
arr.forEach(function(elm){
console.log(elm));
}); //위의 식을 함수 선언식으로 바꾸면 이와 같이 바뀜하나하나의 요소를 forEach 메소드 안에 전달되는 콜백함수에 한번씩 전달을 파라미터로 해주면서 원하는 작업을 할 수 있게 해줌
예를 들어 배열의 모든 요소에 X2를 해서 출력하고 싶다면?👇
const arr = [1,2,3,4];
arr.forEach(function(elm){
console.log(elm * 2));
// 2
// 4
// 6
// 8-> arr이라는 배열에 forEach()라는 메소드(내장함수)를 사용하게 되면 내장함수에 전달하는 콜백함수를 배열의 각각에 요소들에 대해 실행한다고 생각하면 됨
주어진 배열의 모든 요소에 X2를 해서 새로운 배열로 만드는 프로그램👇
const arr = [1,2,3,4];
const newArr = [];
arr.forEach(function(elm){
newArr.push(elm * 2);
});
console.log(newArr); //(4)[2,4,6,8]더 쉬운 방법!👇
2. 배열의 내장함수 : map()
map() 내장함수는 배열의 각각 모든 요소에 대해 한번씩 콜백함수를 수행한다고 생각하면 됨
콜백함수에서 리턴을 할 수 O
const arr = [1,2,3,4];
const newArr = arr.map((elm)=>{
return elm *2;
});
console.log(newArr); //(4)[2,4,6,8]map()이라는 배열의 내장함수는 원본 배열의 모든 요소를 순회하면서 어떤 연산을 해서 리턴된 값들만을 따로 배열로 추려내서 반환할 수 있게 해주는 함수
이번엔 순회하는 것이 아니라 배열에서 어떤 값이 있는지, 있다면 true이고 없다면 false인 프로그램👇
const arr = [1,2,3,4];
let number = 3; //number에 저장된 값이 존재하는지 안하는지를 콘솔로 true, false 출력로 출력
arr.forEach((elm) => {
if(elm === number){
console.log(true); //true
}
});이걸 훨씬 더 빨리할 수 있는 배열의 내장함수를 사용한다면👇
const arr = [1,2,3,4];
let number = 3;
console.log(arr.includes(number)); // true3. 배열의 내장함수 : includes()
includes()라는 내장함수는 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 확인
const arr = [1,2,3,4];
let number = "3";//숫자가 아닌 문자열 3을 전달하게되면
// 이전에 배웠던 비교연산에서 === 연산을 사용해서 값을 찾는다라고 생각
console.log(arr.includes(number)); // false이번에는 주어진 요소가 배열에 존재하는지 안하는지만 확인하는 것이 아니라 존재하면 몇번째에 있는지 index를 출력하는 프로그램👇
4. 배열의 index를 출력하는 내장함수 : indexOf()
const arr = [1,2,3,4];
let number = 3;
console.log(arr.indexOf(number)); // 2indexOf()라는 함수는 주어진 배열에서 전달받은 인자와 일치하는 값의 인덱스를 반환하는 함수
만약 주어진 값과 배열안에 있는 값이 일치하는 게 하나도 없을 경우에는 -1 반환
const arr = [1,2,3,4];
let number = "3";
console.log(arr.indexOf(number)); // -1
//arr 배열에 문자열 3이라는 값은 없기 때문에arr이라는 상수 배열이 이전처럼 단순히 숫자만 가지고 있는 배열이 아니라 복잡한 객체들도 포함하고 있는 경우에는 includes()나 indexOf()는 사용하기 힘들지두..🤔
객체 배열에서 원하는 속성을 갖는, 예를 들어 color가 green인 배열의 요소의 index를 갖다줘👇
findIndex()라는 배열의 메소드를 사용하면 훨씬 편하게 수행 가능
5. 배열의 내장함수 : findIndex()
const arr = [
{color : "red"},
{color : "black"},
{color : "blue"},
{color : "green"}
];
console.log(arr.findIndex((elm)=>elm.color ==="green")); //3
//위의 표현은 👇와 같음
console.log(
arr.findIndex((elm)=>{
return elm.color ==="green";
})
);//3
//디테일 해석 : arr이라는 배열의 모든 요소를 한번씩 순서대로 순회findIndex() 파라미터 안에는 콜백함수
이 콜백함수는 forEach()나 map()처럼 각각의 요소들을 모두 순회
배열의 findIndex()를 이용하면 콜백함수를 전달해서 해당 콜백함수가 true를 반환하는 첫번째 요소 반환
주의⭐
findIndex()는 일치하는 조건을 가진 요소가 2개 있을 경우에는 가장 먼저 만나는 애 반환👇
const arr = [
{color : "red"},
{color : "black"},
{color : "blue"},
{color : "green"},
{color : "blue"}
];
console.log(
arr.findIndex((elm)=>{
return elm.color ==="blue";
})
);//2그 이유는 배열을 처음부터 끝까지 순서대로 순회하면서 가장 먼저 조건을 만족하는 녀석의 인덱스를 반환하는 함수임
그래서 이런 경우에는 배열에 내가 찾고자 하는 검색이 유효한가를 한번 더 확인해보고 사용하는 것을 권장👍
배열의 요소에 직접 접근하고 싶으면 굳이 findIndex()를 사용할 필요 X
6. 배열의 내장함수 : find()
find()를 이용하면 index를 가져오는 것이 아니라 조건에 일치하는 요소를 그냥 가져옴
const arr = [
{color : "red"},
{color : "black"},
{color : "blue"},
{color : "green"},
{color : "blue"}
];
const element = arr.find((elm) => {
return elm.color === "blue";
});
console.log(element); //{color:"blue"}findIndex()와 find()는 결국 전달하는 콜백함수의 역할은 같음
조건을 만족하는 첫번째 요소를 반환
find()는 요소 자체를 반환
findIndex()는 요소의 인덱스를 반환
7. 배열의 내장함수 : filter()
이번에는 배열을 필터링해보는 예제👇
const arr = [
{ num : 1, color : "red"},
{ num : 2, color : "black"},
{ num : 3, color : "blue"},
{ num : 4, color : "green"},
{ num : 5, color : "blue"}
];
//color가 blue인 친구들만 가져오도록 필터링
console.log(arr.filter((elm) => elm.color === "blue")); //(2)[Object, Object]
//0: Object
//num : 3
//color : "blue"
//1: Object
//num : 5
//color : "blue"filter()는 전달한 콜백함수가 true를 반환하는 모든 요소를 배열로 반환하는 친구
배열에서 특정한 조건을 만족하는 요소들을 배열로 다시 반환받고 싶다면 filter()를 사용
8. 배열을 자르는 내장함수 : slice()
인덱스를 기준으로
const arr = [
{ num : 1, color : "red"},
{ num : 2, color : "black"},
{ num : 3, color : "blue"},
{ num : 4, color : "green"},
{ num : 5, color : "blue"}
];
console.log(arr.slice()); // (5)[Object, Object, Object, Object, Object]
//파라미터 안에 아무것도 전달하지 않으면 그대로 자름 -> 배열 그대로 반환
console.log(arr.slice(0,2)); //(2)[Object, Object]
// 0: Object
// num : 1
// color : "red"
// 1 : Object
// num : 2
// color : "black"파라미터 안 첫번째 인자를 begin, 두번째 인자를 end라고 함
slice()는 end에서 하나를 뺀것까지만 반환
-> 즉, end에 명시된 인덱스는 반환X
만약 end를 4로 전달하면 0번부터 3번까지만 자름
const arr = [
{ num : 1, color : "red"},
{ num : 2, color : "black"},
{ num : 3, color : "blue"},
{ num : 4, color : "green"},
{ num : 5, color : "blue"}
];
console.log(arr.slice()); // (5)[Object, Object, Object, Object, Object]
//파라미터 안에 아무것도 전달하지 않으면 그대로 자름 -> 배열 그대로 반환
console.log(arr.slice(0,4)); //(4)[Object, Object, Object, Object]
// 0: Object
// num : 1
// color : "red"
// 1 : Object
// num : 2
// color : "black"
// 2: Object
// num : 3
// color : "blue"
// 3: Object
// num : 4
// color : "green"slice()도 filter()나 map()과 똑같이 새로운 배열로 반환해주기 때문에 반환값을 통해 사용 가능
이번에 배열을 붙이기👇
9. 배열을 붙이는 내장함수 : concat()
배열을 slice()로 자르지 말고 실제로 잘라보자
const arr1 = [
{ num : 1, color : "red"},
{ num : 2, color : "black"},
{ num : 3, color : "blue"}
];
const arr2 = [
{ num : 4, color : "green"},
{ num : 5, color : "blue"}
];
console.log(arr1.concat(arr2));
//(5)[Object, Object, Object, Object, Object]
// 0: Object
// num : 1
// color : "red"
// 1 : Object
// num : 2
// color : "black"
// 2: Object
// num : 3
// color : "blue"
// 3: Object
// num : 4
// color : "green"
// 4: Object
// num : 5
// color : "blue"첫번째 명시한 배열 arr1 뒤로 두번째 명시한, concat()에 전달한 배열 arr2을 갖다붙임 -> 하나의 배열로 다시 리턴해줌
10. 배열을 사전순으로 정렬하는 내장함수 : sort()
이번엔 배열을 정렬해보자
상수가 아닌 변수로 배열 선언해보자
let chars = ["나", "다", "가"];
chars.sort(); //사전순으로 정렬
console.log(chars); // (3)["가", "나", "다"]sort()는 정렬된 배열을 반환해주는 것이 아니라 원본 배열을 그냥 정렬 -> 원본 배열의 순서를 정렬하는 메소드
let numbers = [0,1,3,2,10,30,20];
numbers.sort();
console.log(numbers); // (3)[0,1,10,2,20,3,30]sort()는 숫자를 기준으로 정렬을 하는 것이 아니라 문자열를 기준으로 정렬 -> 사전순으로 정렬
숫자를 순서대로 정렬하고 싶다면 sort()인자로 비교함수를 넣어줘야함
let numbers = [0,1,3,2,10,30,20];
const compare = (a,b) => {
// 1. 같다
// 2. 크다
// 3. 작다
if(a>b){
// 크다
return 1;
}
if(a<b){
// 작다
return -1;
}
// 같다
return 0;
};
numbers.sort(compare);
console.log(numbers); // (7)[0,1,2,3,10,20,30]만약 내림차순으로 정렬하고 싶다면
let numbers = [0,1,3,2,10,30,20];
const compare = (a,b) => {
if(a>b){
// 크다
return -1; //내림차순으로 정렬하려면 음수로!
}
if(a<b){
// 작다
return 1; //내림차순으로 정렬하려면 양수로!
}
// 같다
return 0;
};
numbers.sort(compare);
console.log(numbers); // (7)[30,20,10,3,2,1,0]이런식으로 비교함수를 직접 제작해서 sort()에 전달하면 정수배열 말고도 객체배열, 배열들의 배열, 함수들의 배열도 원하는대로 정렬 가능
11. 배열내의 모든 요소들을 문자열 형태로 합치는 내장함수 : join()
const arr = ["영주", "님", "안녕하세요", "또오셨군요"];
console.log(arr.join());//영주,님,안녕하세요,또오셨군요
//쉼표로 구분되어 문자열로 하나로 합쳐서 리턴해줌
console.log(arr.join(" "));//영주 님 안녕하세요 또오셨군요
//쉼표가 싫다면 공백을 넣어주면 공백으로 바뀜join()에 전달하는 파라미터는 구분자가 됨(뭘 넣어도 상관X)
const arr = ["영주", "님", "안녕하세요", "또오셨군요"];
console.log(arr.join("바보"));//영주바보님바보안녕하세요바보또오셨군요배열에 존재하는 요소들을 join()를 통해 문자열로 하나로 합쳐서 사용 가능
