티스토리 뷰

Javascript 연습용 문제
객체 오름차순 정렬과 출력

 문제부터 어떻게 설명해야 할지 모르겠다. 배열 공부하면서 풀어보라고 문제 받은 순간 오브젝트가 뭐인지부터 찾아봤다. 자주 쓰인다고 하니 이번에 풀었다고 그냥 넘어가면 나중에 기억 못 할 것 같아서 정리한다. 찾아보고 배우면서 내 맘대로 이해한 방법을 낼름 적어보았다,

 말 그대로 객체를 특정 요소 기준으로 오름차순으로 정렬한 뒤, 정렬한 객체 중 1등인 객체만 출력해보는 것이다. 정렬은 sort()를 사용하지 않고, 버블 정렬 알고리즘을 이용해 구현할 것이다. 전엔 콘솔 창 쓰는 법을 잘 몰라서 html에서 값을 가져오고 거기다가 다시 출력을 했었는데, 이번엔 좀 익히고 와서 결과 확인용 html은 만들지 않는다. 🥳 콘솔 창에 쳐보는 게 더 간단하단 사실을 몰랐음...ㅎ

var obj = [
  {
    name: "Sophia",
    age: "22"
  },
  {
    name: "Edward",
    age: "16"
  },
  {
    name: "Noah",
    age: "17"
  }
];

 객체 배열을 만들어 보았다. 이 배열을 나이순으로 정렬 후, 제일 나이가 적은 사람의 이름(Edward)을 콘솔에 출력할 것이다.
 버블 정렬이 다음 요소의 값을 비교해서 자리 이동을 하는거랬나? 그러니까 객체의 공통된 요소인 age를 각각 비교한다면 [22, 16, 17] 이 값에서 두 개의 연속된 개체를 비교해서 더 큰 값을 뒤로, [22, 16, 17] → [16, 22, 17] 이런 식으로 자리를 바꿔주는 것이다. 이것을 배열이 모두 끝날 때까지 반복해야 하니 for문을 활용한다.

// 객체 정렬
for (var i = 0; i < obj.length - 1; i++) {
  var asdf = 0;
    for (var j = i + 1; j < obj.length; j++) {
      //현재 요소가 다음 요소보다 크면 뒤로 이동
      if (obj[i].age > obj[j].age) {
      asdf = obj[i];
      obj[i] = obj[j];
      obj[j] = asdf;
  	}
  }
}

 첫 번째로, for (var i = 0; i < obj.length - 1; i++) {} 이것은 배열에서 [0, 1, 2], [0, 1, 2], [0, 1, 2] 이렇게 다음 값과 비교할 현재 요소를 가리킨다. 처음부터 계산해야 하기 때문에 i는 0부터 시작하고, obj의 길이만큼 반복시켜줘야 하므로 배열의 넓이를 가져와주는 .length를 적어주며, 반복해서 이동시켜주다 보면 자동으로 마지막 배열은 제일 큰 숫자가 되기 때문에 비교해줄 필요가 없다. 그래서 1을 빼 제외시켜준다.

 자리를 이동시켜 줄 때 사용할 임시 공간도 만들어 두고, 두 번째 for문을 시작한다. j는 i의 항상 다음 요소를 가리켜야 하므로 [0, 1, 2] → [0, 1, 2] (요렇게) i+1부터 시작한다. 배열의 넓이만큼 반복해주면 된다.

 i번째 객체의 age 값을 가져오기 →  obj[i]. age
 [22, 16, 17] > [22, 16, 17] 처음으론 이렇게 비교가 될 것이다. 2216보다 크니 차리를 바꿔준다. 임시 공간에 i를 넣고, i는 j 위치에 놓고, j는 임시 공간, 그러니까 i에 도로 넣어두면 자리 교환 끝.

 i와 j의 변수 선언은 생략해도 실행은 된다. 쓰는 게 권장사항인 것 같아 써보았다. 오름차순이 아닌 내림차순 정렬은 if에서 조건의 문장 부호만 반대로 해주면 된다~

console.log(obj[0].name); // Edward

 밑에다 이렇게 써주면 출력까지 끝!

댓글
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
최근에 올라온 글
글 보관함
Total
Today
Yesterday
내 햄수터