[프로그래머스 / 코딩테스트 연습] 최소 직사각형 -자바스크립트(javascr

🟦 문제 설명

명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다.
다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서,
작아서 들고 다니기 편한 지갑을 만들어야 합니다.
이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다.

아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다.

명함 번호가로 길이세로 길이

1	60	50
2	30	70
3	60	30
4	80	40

가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다.
하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑 크기는 4000(=80 x 50)입니다.

모든 명함의 가로 길이와 세로 길이를 나타내는 2차원 배열 sizes가 매개변수로 주어집니다. 모든 명함을 수납할 수 있는 가장 작은 지갑을 만들 때, 지갑의 크기를 return 하도록 solution 함수를 완성해주세요.

 

🟦 제한 조건

• sizes의 길이는 1 이상 10,000 이하입니다.
• sizes의 원소는 [w, h] 형식입니다.
• w는 명함의 가로 길이를 나타냅니다.
• h는 명함의 세로 길이를 나타냅니다.
• w와 h는 1 이상 1,000 이하인 자연수입니다.

 

🟦 입출력 예

sizes	result
[[60, 50], [30, 70], [60, 30], [80, 40]]	4000
[[10, 7], [12, 3], [8, 15], [14, 7], [5, 15]]	120
[[14, 4], [19, 6], [6, 16], [18, 7], [7, 11]]	133

 

🟦 나의 문제 풀이

function solution(sizes) {
  let width = 0;
  let height = 0;

  for (let i = 0; i < sizes.length; i++) {
    if (sizes[i][0] < sizes[i][1]) {
      sizes[i].reverse(); //세로가 가로보다 더 길 경우 가로 세로 바꾸기
    }
    if (sizes[i][0] > width) {
      width = sizes[i][0];
    }
    if (sizes[i][1] > height) {
      height = sizes[i][1];
    }
  }

  return width * height;
}

모든 명함을 수납할 수 있는 가장 작은 지갑을 만드는 것이 목적 
👉  긴 길이들 중의 최댓값 x 짧은 길이들 중의 최댓값 

for문을 통해 sizes들의 가로와 세로 길이를 비교한 후에 세로가 가로보다 길 경우에 가로와 세로를 reverse()메서드를 이용해 바꿔준다(이를 통해 긴 길이들끼리, 짧은 길이들 끼리 비교 할 수 있게 된다)

그 후, 긴 길이끼리 값을 비교하고, 짧은 길이들끼리 값을 비교하여 각가의 최댓값을 구해 곱해준다.

 

🟦 다른 문제 풀이

👉  map(), forEach이용

function solution(sizes) {
    const rotated = sizes.map(([w, h]) => w < h ? [h, w] : [w, h]);

    let maxSize = [0, 0];
    rotated.forEach(([w, h]) => {
        if (w > maxSize[0]) maxSize[0] = w;
        if (h > maxSize[1]) maxSize[1] = h;
    })
    return maxSize[0]*maxSize[1];
}

반복문을 사용하여 각각의 명함마다 가로와 세로 길이를 비교하는 것이 아니라, map 메소드, 화살표 함수, 삼항연산자를 이용해 한번에 가로와 세로 길이를 바꾸어준다! 그 이후 forEach를 통해 하나씩 확인 하면서, 가장 큰 값을 찾아준다.

forEach를 아직 제대로 사용해보질 않아서 익숙치가 않다ㅜ forEach와 for ...of의 차이점에 대해서도 공부해야겠다.

 

 

🟦forEach

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
  : Array의 prototype을 상속받은 객체가 사용할 수 있는 함수! 주어진 함수를 배열 요소들에 대해 반복 작업 실행

매개변수

• currentElement: 현재 배열의 요소
• index: 현재 배열 요소의 인덱스
• array: 반복되는 배열(forEach문을 호출한 배열)

forEach문은 for ....of문과 달리 인덱스에 접근할 수 있음

const arr = [1, 2, 3];

const objArr = [
  {
    a: 1,
    b: 2,
    c: 3,
  },
  {
    a: 4,
    b: 5,
    c: 6,
  },
];

arr.forEach((value, idx) => {
  console.log(value);	//{a:1, b:2, c:3}
});
objArr.forEach((value, idx) => {
  console.log(value);	//{a:4, b:5, c:6}
});

 

🟦for ...of

for (variable of iterable) {
statement
} :  이터러블(반복가능)한 객체의 순회를 도와주는 반복문

<반복가능한 객체>

• 배열
• 문자열
• Set객체, Map객체
• NodeList

내부에 [Symbol.iterator]를 가진 객체면 어떤 객체든 순회 가능,  단 반복적이지 않은 요소가 for ..of를 사용하면 TypeError 발생

for ...of문은 continue, break, yield와 같은 제어 흐름 사용할 수 x

const arr = [1, 2, 3];

const objArr = [
  {
    a: 1,
    b: 2,
    c: 3,
  },
  {
    a: 4,
    b: 5,
    c: 6,
  },
];

for (const item of arr) {
  console.log(item);	//1 \n 2 \n 3 
}
for (const item of objArr) {
  console.log(item);	// {a:1, b:2, c:3} \n {a,4, b:5, c:6}
}