javascript array를 정렬하는 방법에 대해 알아보겠습니다.
array sort 메서드를 사용하면 쉽게 배열을 정렬할 수 있습니다.
json array sort도 json key를 바탕으로 원하는 기준으로 정렬할 수 있습니다.

array.sort

배열 값을 정렬한 후에 정렬된 배열을 반환합니다.
기본 정렬 순서는 문자열의 unicode 포인트 순서를 따라 정렬됩니다.

Syntax: arr.sort([compareFunction])

• compareFunction: 배열의 정렬 순서를 정의하는 메서드

let array = [3, 5, 4, 1, 2];
array.sort();
console.log(array);
// output: [ 1, 2, 3, 4, 5 ]

array = ['b', 'a', 'e', 'd', 'c'];
array.sort();
console.log(array);
// output: [ 'a', 'b', 'c', 'd', 'e' ]

일반적인 경우라면 sort 메서드만 사용하여 쉽게 정렬할 수 있습니다.

예상과 다르게 정렬되는 경우에 대해 살펴보겠습니다.

array.sort 예상과 다른 경우

숫자들로만 이루어진 배열에서 sort 메서드를 사용하면 오름차순으로 정렬이 잘 될까요?
저는 그렇게 생각했습니다...
예제를 한번 보시죠

let array = [1, 2, 11, 34, 22];
array.sort();
console.log(array);
// output: [ 1, 11, 2, 22, 34 ]

예상과 같으셨나요? 능력자시군요..^^
NOTE: compareFunction이 없으면 배열의 값를 문자열로 변환하고 유니코드 순서로 문자열을 비교하여 정렬합니다.
숫자에 대한 오름차순 혹은 내림차순에 대한 정렬은 다른 방법이 필요해보입니다.

compareFunction(parameter)

sort 메서드의 파라미터로 정렬 순서를 정의하는 함수입니다.

• compareFunction(a, b) { return -1; }: a를 b보다 낮은 index로 정렬됩니다. [a, b]
• compareFunction(a, b) { return 1; }: b를 a보다 낮은 index로 정렬됩니다. [b, a]
• compareFunction(a, b) { return 0; }: a, b에 대한 순서를 변경하지 않습니다.

위의 정의를 바탕으로 다시 정렬해보겠습니다.

let array = [1, 2, 11, 34, 22];
array.sort((a, b) => a - b);
console.log(array);
// output: [ 1, 2, 11, 22, 34 ]

array.sort((a, b) => b - a);
console.log(array);
// output: [ 34, 22, 11, 2, 1 ]

array = [1, 2, 11, 34, 22];
array.sort((a, b) => 0);
console.log(array);
// output: [1, 2, 11, 34, 22]

INFO: 이제 원하는 정렬 방식으로 정렬이 잘 됐습니다.

• a - b: 오름차순 정렬
• b - a: 내림차순 정렬
• a = b: 순서를 변경하지 않음

json array sort

위 내용을 바탕으로 json array 정렬에 대해 알아보겠습니다.
기준이 되는 json key를 정하고 비교하여 정렬하면 원하는 결과를 얻을 수 있습니다.

let array = [
    { name: 'Amelia', age: 23 },
    { name: 'Grace', age: 32 },
    { name: 'Belita', age: 54 },
    { name: 'Isabel', age: 17 },
    { name: 'Luara', age: 48 },
    { name: 'Jessie', age: 73 }
];
// order by age asc
array.sort((a, b) => {
    if (a.age < b.age) return -1;
    if (a.age > b.age) return 1;

    return 0;
});
console.log(array);
// output: 
// [
//     { name: 'Isabel', age: 17 },
//     { name: 'Amelia', age: 23 },
//     { name: 'Grace', age: 32 },
//     { name: 'Luara', age: 48 },
//     { name: 'Belita', age: 54 },
//     { name: 'Jessie', age: 73 }
// ]

// order by name desc
array.sort((a, b) => {
    a = a.name.toLowerCase();
    b = b.name.toLowerCase();
    if (a < b) return 1;
    if (a > b) return -1;

    return 0;
});
console.log(array);
// output: 
// [
//     { name: 'Jessie', age: 73 },
//     { name: 'Belita', age: 54 },
//     { name: 'Luara', age: 48 },
//     { name: 'Grace', age: 32 },
//     { name: 'Amelia', age: 23 },
//     { name: 'Isabel', age: 17 }
// ]

json array에서 json key의 age를 기준으로 오름차순 정렬한 결과와 name기준으로 내림차순 정렬한 결과를 볼 수 있습니다.

[javascript] - 자바스크립트 javascript array 값 요소 찾기

[javascript] - 자바스크립트 javascript array to string 배열을 문자로 변경

[javascript] - [javascript] 자바스크립트 array 배열

[javascript] - [javascript] 자바스크립트 배열 추가 삭제 array 다루기

[javascript] - [javascript] 자바스크립트 json push, input value, 값 넣기

javascript 배열 안에서 원하는 값 또는 요소를 찾는 방법에 대해 알아보겠습니다.
배열안의 값을 찾는 법은 다양한 방법으로 구현할 수 있습니다.
찾는 값의 index번호를 알고 배열에서 바로 값을 가져오는 경우도 있고 값만 가지고 찾는 방법도 있습니다.
여러상황에서 사용하는 메서드를 알아보고 상황에 맞게 알맞은 방법을 사용하세요.

array[index]

배열의 값의 index번호를 알고 있으면 index값을 적용하여 값을 가져올 수 있습니다.

let array = ['apple', 'melon', 'grape', 'kiwi'];
let found = array[1];
console.log(found);
// output: melon

found = array[3]
console.log(found);
// output: kiwi

array.indexOf

배열에서 지정된 값(요소)와 일치하는 첫 번째 인덱스 값을 반환합니다.
찾는 값이 존재하지 않으면 -1를 반환합니다.
기존 배열은 변경하지 않습니다.

Syntax: arr.indexOf(searchElement[, fromIndex])

• searchElement: 배열에서 찾을 값
• fromIndex: 검색을 시작할 index값 지정

let array = ['apple', 'melon', 'grape', 'kiwi', 123, "123"];
let found = array.indexOf('kiwi');
console.log(found);
// output: 3

found = array.indexOf('kiw');
console.log(found);
// output: -1

found = array[array.indexOf('kiwi')];
console.log(found);
// output: kiwi

found = array.indexOf('123');
console.log(found);
// output: 5

found = array.indexOf(123);
console.log(found);
// output: 4

배열에서 찾고자 하는 값과 정확히 일치하는 값의 index 값을 반환합니다.

NOTE: indexOf 메서드는 변수의 타입까지 비교(===)하여 일치하는 요소를 찾습니다.
123, '123'의 값이 서로 다른 index를 반환합니다.

- array.find

배열에서 주어진 조건을 만족하는 첫 번째 값을 반환합니다.
만일 조건을 만족하지 못하면 undefined를 반환합니다.
기존 배열은 변경하지 않습니다.

Syntax: arr.find(callback(element[, index[, array]]) [, thisArg])

• element: callback 함수에서 현재 처리하고 있는 배열의 값
• index: 현재 처리하고 있는 배열의 index
• array: 원본 array

let array = ['apple', 'melon', 'grape', 'kiwi'];
let found = array.find(element => element == 'grape');
console.log(found);
// output: grape

array = [5, 9, 13, 20, 55];
found = array.find(element => element > 10);
console.log(found);
// output: 13

find 메서드는 조건을 만족하는 첫번째 값(요소)를 반환합니다.

INFO: 첫 번째 요소만 반환하기 떄문에 모든 요소를 찾으려면 다른 방법으로 구현해야합니다.

- array.findIndex

배열에서 주어진 조건을 만족하는 첫 번째 index 값을 반환합니다.
만일 조건을 만족하지 못하면 -1을 반환합니다.
기존 배열은 변경하지 않습니다.

Syntax: arr.findIndex(callback(element[, index[, array]])[, thisArg])

• element: callback 함수에서 현재 처리하고 있는 배열의 값
• index: 현재 처리하고 있는 배열의 index
• array: 원본 array

let array = ['apple', 'melon', 'grape', 'kiwi'];
let found = array.findIndex(element => element == 'grape');
console.log(found);
// output: 2

array = [5, 9, 13, 20, 55];
found = array.findIndex(element => element > 10);
console.log(found);
// output: 2

findIndex 메서드는 조건을 만족하는 첫번째 index 값을 반환합니다.

INFO: find, findIndex 차이는 배열의 값을 반환하느냐 또는 배열의 index 값을 반환하느냐의 차이입니다.

- array.includes

배열에서 찾는 값(요소)를 포함하고 있는지 판단합니다.
찾고자 하는 값을 포함하고 있으면 true를 반환합니다.
찾고자 하는 값을 포함하고 있지 않으면 false를 반환합니다.

Syntax: arr.includes(valueToFind[, fromIndex])

• valueToFind: 배열에서 찾을 값
• fromIndex: 검색을 시작할 index값 지정

let array = ['apple', 'melon', 'grape', 'kiwi', 123];
let found = array.includes('grape');
console.log(found);
// output: true

found = array.includes('Grape');
console.log(found);
// output: false

found = array.includes('123');
console.log(found);
// output: false

includes 메서드는 찾고자 하는 값이 배열에 존재하는지에 대한 결과를 반환합니다.

NOTE: 찾고자 하는 값이 문자나 문자열일 경우 includes는 대소문자를 구분합니다.
indexOf와 마찬가지로 변수의 타입까지 비교(===)하여 값의 존재 여부를 반환합니다.

[javascript] - 자바스크립트 javascript 문자열 찾기

[javascript] - 자바스크립트 javascript 문자열 공백 제거 trim

[javascript] - 자바스크립트 javascript string 길이 length

[javascript] - 자바스크립트 javascript 문자열 합치기

[javascript] - 자바스크립트 javascript 문자열 바꾸기 치환

[javascript] - 자바스크립트 javascript 문자열 추출 / 자르기

자바스크립트 javascript 문자열 찾기

자바스크립트 문자열을 찾을 때 정규식을 사용하면 쉽게 문자열을 찾을 수 있습니다.
하지만 정규식 없이 문자열을 찾을 수 있는 메소드에 대해 알아보겠습니다.

- indexOf

indexOf() 메서드는 찾는 문자열이 대상 문자열 내에서 처음 발생하는 인덱스를 반환합니다.
값이 발견되지 않으면 -1을 반환한다.
indexOf()의 결과가 0 이상이면 찾는 문자열이 존재하는 것이다.

INFO: 찾는 문자열의 대소문자는 구분한다.

const str = 'Big golas get big results.';
console.log(str.indexOf('golas'));
// output: 4
console.log(str.indexOf('Get'));
// output: -1
console.log(str.indexOf('get') > -1);
// output: true

• array 배열에도 똑같이 적용할 수 있습니다.
• 찾는 문자열이 존재할 경우 배열의 index값을 반환합니다.

const str = [ 'Big', 'golas', 'get', 'big', 'results.' ];
console.log(str.indexOf('golas'));
// output: 1
console.log(str.indexOf('Get'));
// output: -1
console.log(str.indexOf('get'));
// output: 2

- includes

includes() 메서드는 찾는 문자열이 대상 문자열 내에서 존재하면 true 존재하지 않으면 false를 반환합니다.

TOOD:: 찾는 문자열의 대소문자는 구분한다.

const str = 'Big golas get big results.';
console.log(str.includes('golas'));
// output: true
console.log(str.includes('Get'));
// output: false
console.log(str.includes('get'));
// output: true

- startsWith

startsWith() 메서드는 대상 문자열이 지정된 문자열로 시작하는지 판단합니다
지정된 문자열로 시작하면 true 그렇지 않으면 false를 반환합니다.

TOOD:: 찾는 문자열의 대소문자는 구분한다.

const str = 'Big golas get big results.';
console.log(str.startsWith('Big'));
// output: true
console.log(str.startsWith('Bigs'));
// output: false
console.log(str.startsWith('big'));
// output: false

- endsWith

endsWith() 메서드는 대상 문자열이 지정된 문자열로 끝나는지 판단합니다
지정된 문자열로 끝나면 true 그렇지 않으면 false를 반환합니다.

**INFO: 찾는 문자열의 대소문자는 구분한다.

const str = 'Big golas get big results.';
console.log(str.endsWith('results.'));
// output: true
console.log(str.endsWith('results'));
// output: false
console.log(str.endsWith('ts.'));
// output: true

javascript의 문자열 공백을 제거하는 방법에 대해 알아보겠습니다.
string 내장 함수를 이용하여 양 끝 또는 한 쪽의 공백을 제거할 수 있습니다.

- trim

trim() 메서드는 문자열 양 끝의 공백을 모두 제거하는 메서드 입니다.
모든 공백문자(space, tab, nbsp; 등)와 모든 개행문자(LF, CR)를 의미합니다.
새로운 문자열을 반환합니다.

**INFO:**양 끝의 공백을 제거합니다. 문자열 중간의 공백은 제거되지 않습니다.

const str = '        Hello World!           ';
console.log(str);
// output: "        Hello World!           "
console.log(str.trim());
// output: "Hello World!"

- trimStart / trimLetf

trimStart() / trimLetf() 메서드는 문자열의 시작부분에서 공백 문자를 모두 제거 합니다.
새로운 문자열을 반환합니다.

const str = '        Hello World!           ';
console.log(str);
// output: "        Hello World!           "
console.log(str.trimStart());
// output: "Hello World!           "
console.log(str.trimLeft());
// output: "Hello World!           "

- trimEnd / trimRight

trimEnd() / trimRight() 메서드는 문자열의 끝에서 공백 문자를 모두 제거합니다.
새로운 문자열을 반환합니다.

const str = '        Hello World!           ';
console.log(str);
// output: "        Hello World!           "
console.log(str.trimEnd());
// output: "        Hello World!"
console.log(str.trimRight());
// output: "        Hello World!"

자바스크립트 javascript string 길이 length

javascript string 길이 / 문자열 길이를 구하는 방법에 대해 알아보겠습니다.
javascript 문자열의 길이는 length 속성을 이용하여 구할 수 있습니다.

- length

length 속성은 문자열의 길이를 반환합니다.

const str = 'abcd'
console.log(str.length);
// output: 4
const str1 = ' ab cd '
console.log(str1.length);
// output: 7

INFO: ' ab cd '에서 볼 수 있듯이 공백도 포함한 길이를 반환합니다.

- length 속성 활용

간단한 예제를 이용하여 length 속성을 활용해보겠습니다.

const str = 'abcd'
console.log(str.slice(str.length - 2));
// output: cd

INFO: 문자열 길이의 맨 마지막 두번째 문자부터 끝까지 출력합니다.

const str = 'abcd'
console.log(str.charAt(str.length - 1));
// output: d

INFO: 문자열의 맨 마지막 위치에 있는 문자를 출력합니다.

const str = 'abcd'
for (let i=str.length-1; i>-1; i--)
    console.log(str.charAt(i));
// output: d
// output: c
// output: b
// output: a

INFO: 문자열의 맨 마지막 위치의 문자부터 처음까지 차례로 출력합니다.

자바스크립트 javascript string 합치기 concat

자바스크립트에서 문자열을 합치는 방법에 대해 알아보겠습니다.
javascript 문자열 내장 함수인 cancat 메서드를 이용하는 방법과 + 연산자를 이용하여 문자열을 합칠 수 있습니다.

- concat

파라미터로 전달된 모든 문자열을 붙인 값을 반환합니다.
새로운 문자열을 반환합니다.

Syntax: str.concat(string2, string3[, ..., stringN])

• string2, string3, [, ..., stringN]: N개의 파라미터를 받습니다.

const str = 'abcd', str1 = 'efg';
console.log(str.concat(str1));
// output: abcdefg

const array = ['efg', 'hij', 'jkl'];
console.log(str.concat(...array));
// output: abcdefghijjkl

+ 연산자 이용하기

+연산자를 이용하여 문자열을 합칠 수 있습니다.

const str = 'abcd', str1 = 'efg';
console.log(str + str1);
// output: abcdefg

Template literals

문자열을 표현할 떄 내부에 내부 표현식을 사용할 수 있는 표현법입니다.
템플릿 리터럴은 이중 따옴표(" ") 나 작은 따옴표(' ') 대신 백틱(` `) (grave accent) 을 이용합니다.

var a = 7;
var b = 10;
console.log("Seventeen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// output: Seventeen is 17 and
// not 24.

INFO: 수식과 문자열 그리고 개행을 넣는 방법도 보기 어렵고 오타가 많이 날 수 있습니다.

var a = 7;
var b = 10;
console.log(`Seventeen is ${a + b} and
not ${2 * a + b}.`);
// output: Seventeen is 17 and
// not 24.

INFO: ${} 내부 표현식을 활용하여 읽기 쉽고 작성하기 쉬운 방법으로 활용할 수 있습니다.