TypeScript(JavaScript) Array.sort() 함수 사용법

안녕하세요.

 

오늘은 자바스크립트의 Array 객체의 내장함수 sort()에 대해서 알아보겠습니다.

 

sort() 내장함수에는 파라미터가 Optional하게 들어갑니다.

구체적인 비교가 필요할 경우 compareFunction을 작성하여 넣어주면 됩니다.

 

코드 (TypeScript)

/**
 * 자바스크립트 Array 객체의 내장 함수 sort()
 * 
 * sort() 내장함수에는 파라미터가 Optional(compareFunction)하게 들어간다.
 * 구체적인 비교가 필요할 경우 compareFunction을 작성하여 넣어주면 된다.
 * 
 * compareFunction(a, b)
 * - 리턴값이 0보다 작은 경우 a를 b보다 앞으로 정렬
 * - 리턴값이 0보다 큰 경우 b를 a보다 앞으로 정렬
 * - 리턴값이 0인 경우 변경 없음
 */
function main(): void
{
    // # 01. Example 
    let arr: number[] = [1, 4, 12, 10, 9];

    // 기본 정렬
    arr.sort();
    console.log(arr); // expected output: [1, 10, 12, 4, 9]

    // 오름차순 정렬 방법
    arr.sort((a: number, b: number): number => {
        return a - b;
    });
    console.log(arr); // expected output: [1, 4, 9, 10, 12]

    // 내림차순 정렬 방법
    arr.sort((a: number, b: number): number => {
        return b - a;
    });
    console.log(arr); // expected output: [12, 10, 9, 4, 1]

    // # 02. Example - value에 따른 정렬
    let arr2: IUser[] = 
    [
        { name: '자바', value: 13 },
        { name: '고', value: 29 },
        { name: '타입스크립트', value: 81 },
        { name: '파이썬', value: 77 },
        { name: '자바스크립트', value: 29 }
    ];

    // 오름차순 정렬 방법
    arr2.sort((a: IUser, b: IUser): number => {
        return a.value - b.value;
    });
    console.log(arr2);
    /**
     * expected output: 
     * [ 
     *      { name: '자바', value: '13' },
     *      { name: '고', value: '29' },
     *      { name: '자바스크립트', value: '29' },
     *      { name: '파이썬', value: '77' },
     *      { name: '타입스크립트', value: '81' } 
     * ]
     */

    // 내림차순 정렬 방법
    arr2.sort((a: IUser, b: IUser): number => {
        return b.value - a.value;
    });
    console.log(arr2);
    /**
     * expected output: 
     * [ 
     *      { name: '타입스크립트', value: '81' },
     *      { name: '파이썬', value: '77' },
     *      { name: '고', value: '29' },
     *      { name: '자바스크립트', value: '29' },
     *      { name: '자바', value: '13' } 
     * ]
     */
}

main();

interface IUser
{
    name: string;
    value: number;
}

 

 

코드(JavaScript)

function main()
{
    // # 01. Example 
    let arr = [1, 4, 12, 10, 9];

    // 기본 정렬
    arr.sort();
    console.log(arr); // expected output: [1, 10, 12, 4, 9]

    // 오름차순 정렬 방법
    arr.sort((a, b) => {
        return a - b;
    });
    console.log(arr); // expected output: [1, 4, 9, 10, 12]

    // 내림차순 정렬 방법
    arr.sort((a, b) => {
        return b - a;
    });
    console.log(arr); // expected output: [12, 10, 9, 4, 1]

    // # 02. Example - value에 따른 정렬
    let arr2 = [
        { name: '자바', value: '13' },
        { name: '고', value: '29' },
        { name: '타입스크립트', value: '81' },
        { name: '파이썬', value: '77' },
        { name: '자바스크립트', value: '29' }
    ];

    // 오름차순 정렬 방법
    arr2.sort((a, b) => {
        return a.value - b.value;
    });
    console.log(arr2);
    /**
     * expected output: 
     * [ 
     *      { name: '자바', value: '13' },
     *      { name: '고', value: '29' },
     *      { name: '자바스크립트', value: '29' },
     *      { name: '파이썬', value: '77' },
     *      { name: '타입스크립트', value: '81' } 
     * ]
     */

    // 내림차순 정렬 방법
    arr2.sort((a, b) => {
        return b.value - a.value;
    });
    console.log(arr2);
    /**
     * expected output: 
     * [ 
     *      { name: '타입스크립트', value: '81' },
     *      { name: '파이썬', value: '77' },
     *      { name: '고', value: '29' },
     *      { name: '자바스크립트', value: '29' },
     *      { name: '자바', value: '13' } 
     * ]
     */
}

main();

 

 

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort