[JavaScript] Object.entries(obj) , sort((a,b)=>)

오늘은 Object.entries 와 sort 함수에 대하여 알아보도록 하겠습니다.

제가 이 함수를 사용하게 된 이유는 객체에 있는 value 값을 시간의 순서대로 나타내고 싶어서 이러한 함수를 사용하게 되었는데, 오늘은 가볍게 동물의 수로 정렬하는 것을 알아보도록 하겠습니다.

 

1. Object.entries

객체의 key 값과 value 값을 list 안에 list 형태로 담습니다.

const keywordCount = { '말': 3, '코끼리': 1, '기린': 5 };

let entries = Object.entries(keywordCount);

console.log(entries);
// [ [ '말', 3 ], [ '코끼리', 1 ], [ '기린', 5 ] ]

 

결과를 보시면 리스트 안에 value와 key 값을 하나씩 넣어서 나타냅니다.

 

2. sort 함수 (내림차순)

const keywordCount = { '말': 3, '코끼리': 1, '기린': 5 };

let downSorted = Object.entries(keywordCount).sort((a, b) => b[1] - a[1]);

console.log(downSorted);
// [ [ '기린', 5 ], [ '말', 3 ], [ '코끼리', 1 ] ]

동물의 숫자를 내림차순으로 정렬하는 방법입니다.

 

1. sort 함수 안에 callback 함수는 두 개의 매개변수 a와 b를 받아서, 두 번째 요소를 비교하여 내림차순으로 정렬합니다.

2. 반환값이 양수면 b를 a보다 앞으로 보냅니다.

3. 반환값이 음수면 a를 b보다 앞으로 보냅니다.

4. 반환값이 0이면 순서를 변경하지 않습니다.

 

1-3 = -2 (말 코끼리 순서 안 바뀜)

5-3 = 2 (기린이  말 앞으로 감)

 

이런 식으로 for 문을 돌린다고 생각하면 됩니다.

 

3. sort (오름차순)

오름차순은 빼는 순서를 변경하면 됩니다.

const keywordCount = { '말': 3, '코끼리': 1, '기린': 5 };

let upSorted = Object.entries(keywordCount).sort((a, b) => a[1] - b[1]);

console.log(upSorted)
// [ [ '코끼리', 1 ], [ '말', 3 ], [ '기린', 5 ] ]

 

1. sort 함수 안에 callback 함수는 두 개의 매개변수 a와 b를 받아서, 두 번째 요소를 비교하여 오름차순으로 정렬합니다.

2. 반환값이 음수면 a를 b보다 앞으로 보냅니다.

3. 반환값이 양수면 b를 a보다 앞으로 보냅니다.

4. 반환값이 0이면 순서를 변경하지 않습니다

 

3 - 1 = 2 (말이 코끼리 뒤로 감)

3 - 5 = -2 (기린이 말 뒤로 감)

 

이런 식으로 정렬이 되더라고요.

 

소감

오늘 sort 함수를 알아보면서 캡슐화된 sort 함수가 어떻게 생겼을까에 대해 생각을 해보았고, for 문 안에 for문이 있을 것이라는 추측을 해볼 수 있었습니다.

이렇게 캡슐화된 함수를 가끔은 어떻게 동작이 되는지 생각해 본다면 조금 더 이해가 잘 될 것이라고 생각이 됩니다.

여러분도 sort 함수의 내부 구조가 어떻게 되어있는지 알아보면 좋을 것 같아요!