[JavaScript] 배열 (2)

카테고리 : 프로그래밍 언어
태그: javascript · 배열 · sort · filter · find · findIndex · map · forEach · reduce
등록일: 2023년 03월 28일
최근 업데이트: 2023년 03월 28일

---

• 1. sort
• 2. filter
• 3. find,findIndex
• 4. map
• 5. forEach
• 5. reduce

1. sort

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

[Array.prototype.sort() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

1): sort 기본

1. sort 기본

{
    const data = [10,50,20,60,80,90];
    data.sort();
    console.log(data); // 문자열 유니코드로 정렬
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[ 10, 20, 50, 60, 80, 90 ]

[Done] exited with code=0 in 0.059 seconds

----------------------------------------------------------------------------

2. sort 자릿수 정렬

{
    const data = [100,150,120,610,80,90];
    data1.sort();
    console.log(data); // 이렇게 하면 자릿수대로 분류를 하기때문에 정렬이 되지않는다
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[ 100, 120, 150, 610, 80, 90 ]

[Done] exited with code=0 in 0.056 seconds

----------------------------------------------------------------------------

3. 오름차순 해결 방법 (1)

{
    // 오름 차순 정렬
    const data = [100,150,120,610,80,90];
    data.sort(function(a,b){
      if(a>b){
        return 1
      }else if(a<b){
        return -1
      }else{
        //a,b가 같았을때
        return 0
      }
    });
    console.log(data);
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[ 80, 90, 100, 120, 150, 610 ]

[Done] exited with code=0 in 0.054 seconds

----------------------------------------------------------------------------

3-1. 오름차순 해결 방법 (2)

{
    const data = [100,150,120,610,80,90];
    data.sort((a,b)=>a-b); // 결과값이 하나 일때 return 생략
    console.log(data);
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[ 80, 90, 100, 120, 150, 610 ]

[Done] exited with code=0 in 0.052 seconds

----------------------------------------------------------------------------

4. 내림 차순 해결

{
    // 내림 차순 정렬
    const data = [100,150,120,610,80,90];
    data.sort(function(a,b){
      if(a>b){
        return -1
      }else if(a<b){
        return 1
      }else{
        //a,b가 같았을때
        return 0
      }
    });
    console.log(data);
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[ 610, 150, 120, 100, 90, 80 ]

[Done] exited with code=0 in 0.065 seconds

2): sort 활용

1. 기본 출력

{
    const obj = [
        {name:'철수',age:22},
        {name:'영희',age:25},
        {name:'훈이',age:27},
        {name:'짱구',age:26},
        {name:'유리',age:21},
        {name:'맹구',age:22},
        {name:'민지',age:25},
        {name:'재석',age:21},
        {name:'다미',age:22},
      ]

      obj.sort((a,b)=>{
        if(a.age>b.age){
          return 1;
        }else if(a.age<b.age){
          return -1;
        }else{
          return 0;
        }
      })
      console.log(obj);
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[
  { name: '유리', age: 21 },
  { name: '재석', age: 21 },
  { name: '철수', age: 22 },
  { name: '맹구', age: 22 },
  { name: '다미', age: 22 },
  { name: '영희', age: 25 },
  { name: '민지', age: 25 },
  { name: '짱구', age: 26 },
  { name: '훈이', age: 27 }
]

[Done] exited with code=0 in 0.068 seconds

----------------------------------------------------------------------------

2. 삼항연산으로 출력

{
    const obj = [
        {name:'철수',age:22},
        {name:'영희',age:25},
        {name:'훈이',age:27},
        {name:'짱구',age:26},
        {name:'유리',age:21},
        {name:'맹구',age:22},
        {name:'민지',age:25},
        {name:'재석',age:21},
        {name:'다미',age:22},
      ]

      obj.sort((a,b)=>{
        //삼항연산자 조건 ? true : false
        return a.age > b.age ? 1 : a.age < b.age ? -1 : 0
      });
      console.log(obj);
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[
  { name: '유리', age: 21 },
  { name: '재석', age: 21 },
  { name: '철수', age: 22 },
  { name: '맹구', age: 22 },
  { name: '다미', age: 22 },
  { name: '영희', age: 25 },
  { name: '민지', age: 25 },
  { name: '짱구', age: 26 },
  { name: '훈이', age: 27 }
]

[Done] exited with code=0 in 0.068 seconds

---

2. filter

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

조건에 맞는 값을 출력할 때 , 결과가 배열로 출력

[Array.prototype.filter() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

1): filter 기본

/* 3의 배수만 출력 */

{
    const arr = [10,30,50,20,60,40];
    const result1 = arr.filter((element,index,arr)=>{
        // element 요소값 , index 인덱스번호 , arr 배열값
        return element % 3 ==0;
      });
      console.log(result1);
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[ 30, 60 ]
==================================

[Done] exited with code=0 in 0.089 seconds

----------------------------------------------------------------------------

/* filter,indexOf 를 이용해서 김이 들어가있는 값을 출력 */

{
    const arr = ['강호동','유재석','이수근','김희철','이효리','김다미']
    const txt = '김';
    //

    const result = arr.filter(item=>item.indexOf(txt)!=-1)
    console.log(result);
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[ '김희철', '김다미' ]

[Done] exited with code=0 in 0.053 seconds

2): filter 활용

/*  영희 삭제하고 나머지만 출력 */
{
    const data = [
        {name:'철수',age:22,city:'제주'},
        {name:'영희',age:25,city:'서울'},
        {name:'훈이',age:27,city:'대전'},
        {name:'짱구',age:26,city:'대구'},
        {name:'맹구',age:22,city:'부산'},
      ];


    const data4 = data.filter((item)=>{
        return item.name != '영희'
      });
      for(let item of data4){
        console.log(item.name,item.age,item.city)
      };
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
철수 22 제주
훈이 27 대전
짱구 26 대구
맹구 22 부산

[Done] exited with code=0 in 0.056 seconds

----------------------------------------------------------------------------

/*  이름이 '구'가 들어간 데이터만 출력 */
{
    const data = [
        {name:'철수',age:22,city:'제주'},
        {name:'영희',age:25,city:'서울'},
        {name:'훈이',age:27,city:'대전'},
        {name:'짱구',age:26,city:'대구'},
        {name:'맹구',age:22,city:'부산'},
    ];
    const txt = '구';


    // includes,forEach 활용
    const data1 = data.filter(item=>item.name.includes(txt));
    // console.log(data1);
    data1.forEach(item=>console.log(item))
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
{ name: '짱구', age: 26, city: '대구' }
{ name: '맹구', age: 22, city: '부산' }

[Done] exited with code=0 in 0.064 seconds

---

3. find,findIndex

1). find : 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.

[Array.prototype.find() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

2). findIndex: 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환

[Array.prototype.findIndex() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)

/* 40인 데이터 한개만 출력 */
{
    const arr = [10,20,30,40,50];
    const arr3 = arr.find((item)=>{
        return item==40;
      })
      console.log(arr3);
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
40

[Done] exited with code=0 in 0.054 seconds

----------------------------------------------------------------------------

/* 30인 인덱스번호 출력 */
{
    const arr = [10,20,30,40,50];
    const arr5 =arr.findIndex(item=>item==30);
    console.log(arr5); // 해당 데이터의 인덱스 번호를 출력
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
2

[Done] exited with code=0 in 0.129 seconds

---

4. map

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다

반환값: 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

callback: 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

(1): currentValue: 처리할 현재 요소.

(2): index Optional: 처리할 현재 요소의 인덱스.

(3): array Optional: map()을 호출한 배열.

(4): thisArg Optional: callback을 실행할 때 this로 사용되는 값.

[Array.prototype.map() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

/*  map으로 callback 함수 출력 */
{
    const arr = [10,20,30,40,50,60];
    //map => react에서 화면에 반복(for문)처럼 출력하기 위해 사용. (새로운 배열 생성)
    const arr1 = arr.map(function(current,index,array){
        console.log('current:',current,'index:',index,'array:',array);
        return current
    })
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
current: 10 index: 0 array: [ 10, 20, 30, 40, 50, 60 ]
current: 20 index: 1 array: [ 10, 20, 30, 40, 50, 60 ]
current: 30 index: 2 array: [ 10, 20, 30, 40, 50, 60 ]
current: 40 index: 3 array: [ 10, 20, 30, 40, 50, 60 ]
current: 50 index: 4 array: [ 10, 20, 30, 40, 50, 60 ]
current: 60 index: 5 array: [ 10, 20, 30, 40, 50, 60 ]

[Done] exited with code=0 in 0.079 seconds

----------------------------------------------------------------------------

/*  map 데이터 출력 */
{
    const arr = [10,20,30,40,50];
    //arr을 map으로 처리 템플릿 리터널
    const arr1 = arr.map(function(item){
      return (`${item}`)
    })
    console.log(arr1.join(''))

}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
1020304050

[Done] exited with code=0 in 0.054 seconds

---

5. forEach

주어진 함수를 배열 요소 각각에 대해 실행

반환값:  undefined

callback: 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

(1): currentValue: 처리할 현재 요소.

(2): index Optional: 처리할 현재 요소의 인덱스.

(3): array Optional: forEach()을 호출한 배열.

(4): thisArg Optional: callback을 실행할 때 this로 사용되는 값.

[Array.prototype.forEach() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

/*  forEach 데이터 출력 */
{
    const arr = [0,1,2,3,4,5,6,7,8,9,10];
    arr.forEach(function (element,index,array){
      console.log(`${array}의 ${index}번째의 요소는 ${element}`);
    });
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
0,1,2,3,4,5,6,7,8,9,10의 0번째의 요소는 0
0,1,2,3,4,5,6,7,8,9,10의 1번째의 요소는 1
0,1,2,3,4,5,6,7,8,9,10의 2번째의 요소는 2
0,1,2,3,4,5,6,7,8,9,10의 3번째의 요소는 3
0,1,2,3,4,5,6,7,8,9,10의 4번째의 요소는 4
0,1,2,3,4,5,6,7,8,9,10의 5번째의 요소는 5
0,1,2,3,4,5,6,7,8,9,10의 6번째의 요소는 6
0,1,2,3,4,5,6,7,8,9,10의 7번째의 요소는 7
0,1,2,3,4,5,6,7,8,9,10의 8번째의 요소는 8
0,1,2,3,4,5,6,7,8,9,10의 9번째의 요소는 9
0,1,2,3,4,5,6,7,8,9,10의 10번째의 요소는 10

[Done] exited with code=0 in 0.057 seconds

----------------------------------------------------------------------------

/*  forEach 데이터 출력 */
{
    const arr = [0,1,2,3,4,5,6,7,8,9,10];
    arr.forEach((item,i)=>{
        if(i==4){
           console.log("반복문 중단")
          //  break
          // continue
					/* break,continue문은 forEach문에서 사용할 수 없다 */
      }
      console.log(`${[i]}번째 요소 =>${arr[i]}`)
    })
}

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
0번째 요소 =>0
1번째 요소 =>1
2번째 요소 =>2
3번째 요소 =>3
반복문 중단
4번째 요소 =>4
5번째 요소 =>5
6번째 요소 =>6
7번째 요소 =>7
8번째 요소 =>8
9번째 요소 =>9
10번째 요소 =>10

[Done] exited with code=0 in 0.055 seconds

---

5. reduce

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환.

반환 값: 누적 계산의 결과 값.

[Array.prototype.reduce() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

1): 리듀서 함수는 네 개의 인자를 가집니다.

(1): 누산기 (acc)

(2): 현재 값 (cur)

(3): 현재 인덱스 (idx)

(4): 원본 배열 (src)

2): callback: 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.

(1): accumulator:누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

(2): currentValue: 처리할 현재 요소.

(3): currentIndex Optional: 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.

(4): array Optional: reduce()를 호출한 배열.

(5): initialValue Optional: callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

/*  reduce 데이터 출력 */
{
    let arr = [10,20,30,40];
    let total = arr.reduce(function(acc,cur,idx,src){
        console.log(acc);
        console.log("--------------------")
        console.log(cur);
        console.log("--------------------")
        console.log(idx);
        console.log("--------------------")
        console.log(src);
        return acc+cur
      })
      console.log(`합:${total}`);
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
accumulator: 10 콜백반환값
--------------------
currentValue: 20 현재요소
--------------------
currentIndex: 1 인덱스
--------------------
array: [ 10, 20, 30, 40 ] 배열
accumulator: 30 콜백반환
--------------------
currentValue: 30 현재요소
--------------------
currentIndex: 2 인덱스
--------------------
array: [ 10, 20, 30, 40 ] 배열
accumulator: 60
--------------------
currentValue: 40 현재요소
--------------------
currentIndex: 3 인덱스값
--------------------
array: [ 10, 20, 30, 40 ] 배열
합:100

[Done] exited with code=0 in 0.061 seconds

---