TIL230823 _ 프로그래머스 js 나누어 떨어지는 숫자배열

프로그래밍 문제를 풀면서 새롭게 알게된 메서드를 많이 접하게 되는데, 처음 접하는 내용이다 보니까 시간 가는 줄 모르고 공부를 하게된다. 문제중에서 하나 문제를 공유하려고 한다.

출처 : 프로그래머스 - 나누어 떨어지는 숫자 배열

나누어 떨어지는 숫자 배열

문제설명

array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요.
divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.

제한사항

• arr은 자연수를 담은 배열입니다.
• 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다.
• divisor는 자연수입니다.
• array는 길이 1 이상인 배열입니다.

입출력 예

입출력 예#1
arr의 원소 중 5로 나누어 떨어지는 원소는 5와 10입니다. 따라서 [5, 10]을 리턴합니다.

입출력 예#2
arr의 모든 원소는 1으로 나누어 떨어집니다. 원소를 오름차순으로 정렬해 [1, 2, 3, 36]을 리턴합니다.

입출력 예#3
3, 2, 6은 10으로 나누어 떨어지지 않습니다. 나누어 떨어지는 원소가 없으므로 [-1]을 리턴합니다.

내가 푼 풀이

수도코딩
1. 배열의 숫자를 for 문을 돌려서 확인하고 싶지만, 맨 마지막에 배열로 나와야 하기에 var answer = []; 만족하는 애들을 저장할 빈 배열을 생성
2. 배열 arr의 각 요소에 대한 for 반복문을 돌림 arr.length만큼 돌때까지 반복
3. 나누어 떨어지면 배열에 요소추가 : answer.push(arr[i])
4. 요소가 하나밖에 없으면 [-1] 리턴, 아니면, answer 리턴인데 오름차순 answer.sort((a, b) => a-b)

//나의 풀이 
function solution(arr, divisor) {
    var answer = [];
    for (let i = 0; i <arr.length; i++){
        if(arr[i] % divisor === 0 ){
           answer.push(arr[i])
           console.log("이거는 어떻게 나와?", answer, arr[i]) // 이거는 어떻게 나와? [ 5 ] 5
        }                                               // 이거는 어떻게 나와? [ 5, 10 ] 10
    }
    return (answer.length === 0) ? [-1] : answer.sort((a,b)=>a-b)
}

let arr =  [5, 9, 7, 10];
let divisor = 5;
console.log(solution(arr,divisor)); // output: [5,10]

처음에 페어 프로그래밍을 할때, 아래와도 같이 코드를 짰는데, 이렇게 짜도 구현이 되서 차이점을 알아보았다.

// ** 이거는 확인해보기 
function solution(arr, divisor) {
     var answer = [];
     for (let i = 0; i <arr.length; i++){
         if(arr[i] % divisor === 0 && answer.push(arr[i]) ){
         } // 빈블록 위에 조건으로 가져감
     }
     return (answer.length === 0) ? [-1] : answer.sort((a,b)=>a-b)
 }

주요 차이점은 if문의 위치이다.
첫 번째 코드는 if문 안에서 조건을 충족하는 경우에 answer배열에 값을 추가하고

두 번째 코드는 &&을 사용해서 둘다 true일 경우에 answer에 값을 추가한다. 그러나 이 코드는 구문적으로는 허용되지만 효과가 없는 코드다.
{}빈 블록이며, 아무런 동작을 하지 않으며,배열에 값을 추가하는 것은 if문 밖에서 이미 수행하고 있기 때문에 불필요한 코드다.

결론 : 첫번째 코드가 더 명확한 코드임!!!

다른 사람의 풀이 코드 .filter() 메서드

function solution2(arr, divisor) {
    var answer2 = arr.filter(v => v%divisor == 0); // 배열 arr에서 조건을 만족하는 요소들을 필터링하여 새 배열 answer에 저장합니다. // 조건은 v % divisor가 0인 요소들입니다.
    return answer2.length == 0 ? [-1] : answer2.sort((a,b) => a-b); // answer 배열의 길이가 0이면 -1을 반환하고, 그렇지 않다면 오름차순으로 정렬하여 반환합니다.
}

console.log(solution2(arr,divisor)) // output: [5, 10]

• .filter()메서드 : 배열에서 주어진 조건을 만족하는 요소들로 새로운 배열을 생성하는 함수 filter() 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다. 주로 배열에서 특정 조건을 만족하는 요소들을 걸러내는 작업에 사용됩니다.

  const newArray = array**.filter**(callback(element, index, array));

  • array: 필터링을 수행할 원본 배열입니다.

  • callback: 각 요소에 대해 호출될 함수입니다. 이 함수는 세 가지 매개변수를 받습니다.
    - element: 현재 처리 중인 배열 요소입니다.
    - index (선택 사항): 현재 요소의 인덱스입니다.
    - array (선택 사항): 원본 배열 자체입니다.

    callback 함수의 반환 값이 true인 경우 해당 요소는 새로운 배열에 포함되며, false인 경우 포함되지 않습니다. 결과적으로 조건을 만족하는 요소들로 이루어진 새로운 배열이 반환됩니다.

    예를 들어, 배열에서 짝수만 걸러내는 코드는 다음과 같을 수 있습니다:

    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    const evenNumbers = numbers.filter(number => number % 2 === 0);
    // 짝수만 필터링하여 새로운 배열을 생성합니다.
    console.log(evenNumbers); // [2, 4, 6, 8, 10]

    위의 예시에서 filter() 메서드는 배열 numbers에서 짝수인 요소들로만 이루어진 새로운 배열인 evenNumbers를 생성합니다.

    //.filter 메서드 활용 1
    let data = [
                {name : "Jack", age : 20 },
                {name : "Kevin", age : 17 },
                {name : "Rick", age : 27 },
                {name : "Rilly", age : 19 },
    ]
    
    //x : 요소, idx : 인덱스, array : 원배열 
    let result = data.filter((x, idx, array) => {
        return idx === 0 && x.age >= 20
    });
    
    console.log(result); //output : [ { name: 'Jack', age: 20 } ]
    // .filter() 메서드는 반환된 true 값을 갖는 요소들로 이루어진 새로운 배열을 생성합니다.