[JavaScript] 문자열과 배열, 그리고 객체에서 유용한 각종 Method (1)

이 글은 3일에 걸쳐 쌓인 각종 메소드를 적어뒀다가, 다시 한 번 찾아보며 정리한 글이다. 당연히 부족한 부분이 더 많을 수 밖에 없기때문에 자세한 내용은 링크를 통해 확인하자. 특정 메소드보다 실제로 어떤 문제를 해결할 때 사용하는 방법부터 시작해서 각종 메소드까지 정리해보겠다!

여기서 작성한 메소드는 다음과 같다. 여기에 없다면, 다음 포스트를 확인하자.

// 문자열의 알파벳을 전부 대문자로 바꾸거나 소문자로 바꾸기
String.toUpperCase() / String.toLowerCase()
// 문자열을 잘라 배열에 담기
String.split()
// 빈 배열 찾기
빈 배열 찾기
// 배열인지 확인하기
Array.isArray(arr)
// 배열 내부의 값 정렬하기
Array.sort([compare function))

 

String.toUpperCase() / String.toLowerCase()

.toUpperCase (.toLowerCase) 는 알파벳 문자열을 대문자 (소문자) 로 바꿔 출력하는 메소드이다. 다시 말해, 기존의 문자열을 직접적으로 변경하지 않는다. (문자열은 재할당 방식으로 변경되지 않는다.) 변경된 문자열을 얻기 위해서는 반드시 다른 변수에 할당해주어야만 한다!

const str = "Gray Park";
console.log(str); // "Gray Park"
str.toUpperCase(); // "GRAY PARK"
console.log(str); // "Gray Park"
let capitalStr = str.toUpperCase();
console.log(capitalStr); // "GRAY PARK"

 

String.split()

이 메소드를 이용하면 문자열을 나눠서 배열로 만들 수 있다. 당연히 기존의 문자열의 값은 변하지 않는다. 사용을 위해 다른 변수에 할당하자!

let str = "Gyuha Park";
let arr1 = str.split(); // 문자열을 통채로 배열에 넣기
let arr2 = str.split(''); // 문자열을 하나씩 나눠 배열에 넣기
let arr3 = str.split(' '); // 공백을 기준으로 문자열을 나눠 배열에 넣기

console.log(arr1);
["Gyuha Park"]
console.log(arr2);
["G", "y", "u", "h", "a", " ", "P", "a", "r", "k"]
console.log(arr3);
["Gyuha", "Park"]

console.log(str);
"Gyuha Park"

 

빈 배열 찾기

자바스크립트는 구멍이 많은 언어지만, 빈 배열을 검사하는 부분은 상당히 난감했다. 돌고 돌아 찾고 찾아 도달한 결론은, 빈 배열 검사는 무조건 길이로 한다는 것이다!

let str = '';
Boolean(str.length === 0); // true
Boolean(str === ''); // true
let arr = [];
Boolean(arr === []); // false
Boolean(arr.length === 0) // true

Boolean(arr[0] === undefined) // true
let newArr = [undefined, 1, '2']; // 하하 이건 어떨까
Boolean(newArr[0] === undefined) // true, 길이비교만 씁시다!

// 참고
!arr.length === (!Array.isArray(arr) && arr.length !== 0)
arr.length === (Array.isArray(arr) && arr.length === 0)

 

Array.isArray(arr)

Array.isArray() 메소드는 배열인지 확인하여 Boolean값을 리턴해주는 메소드이다. 함수에서 파라미터로 배열을 넘겨받거나 배열을 리턴해야할 때 확인해주는 용도로 사용할 수 있다.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

 

Array.sort([compare function))

sort는 정렬을 의미한다. 정렬이라 함은, 엑셀 등에서 숫자를 작은 수에서 큰 수로 혹은 문자를 알파벳 순서로 정렬하여 보기 쉽게 하는 데 그 의의가 있다. JS에서 sort 메소드를 사용할 때 괄호에 아무 것도 입력하지 않은 기본상태이면, 배열 내의 값을 문자열로 인식하여 유니코드 값과 비교한다는 것이다. (그렇다고 숫자가 문자열로 타입이 변하진 않는다.) 괄호 안에 비교함수를 넣어주면 우리가 원하는 방식대로 사용할 수 있다.

let arr1 = [9, 3, 2, 4, 5, 8, 6, 7, 10, 1];
let arr2 = [9, 3, 2, 4, 5, 8, 6, 7, 10, 1];
let arr3 = [9, 3, 2, 4, 5, 8, 6, 7, 10, 1];

arr1 === arr2 // false

arr1.sort();
console.log(arr1);
[1, 10, 2, 3, 4, 5, 6, 7, 8, 9] // 문자로 취급하여 정렬

arr1.sort(function (a,b) {return a-b;}); // 비교함수 삽입
console.log(arr1);
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // 숫자로 비교하여 정렬
arr2.sort((a,b)=>(a-b)); // 비교함수로 삽입된 (a,b)=>(a-b)는 위에 삽입된 비교함수와 같은 역할을 함
// 자세한 this에 대한 내용이므로 나중에 다루자
console.log(arr2);
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // 같은 결과

arr3.push(NaN);
console.log(arr3);
[9, 3, 2, 4, 5, 8, 6, 7, 10, 1, NaN]; // NaN은 숫자가 아닌 숫자타입의 무언가이다
arr3.sort((a,b)=>(b-a));
[10, 9, 8, 7, 6, 5, 4, 3, 2, 1, NaN] // 정렬되지못한 NaN이 마지막에 위치한다
arr3.sort((a,b)=>(a-b));
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, NaN] // 마찬가지로 마지막에 NaN

// 비교함수 설명
function compareAB(a, b) {
  if ( Number(a) < Number(b) ) { // a가 b보다 작으면 -1 리턴
    return -1;
  }
  if ( Number(a) > Number(b) ) { // a가 b보다 크면 1을 리턴
    return 1;
  }
  
  return 0; // if ( a === b )
}
/*
위 함수를 실행한 결과가 1이면 a와 b의 위치를 뒤바꾼다.
이것을 배열의 모든 숫자에 대해 반복하다가
더이상 바꿀 수 없으면 그 결과를 리턴한다.
*/

이래도 비교 함수가 이해가 잘 안될 수 있다. 그냥 숫자를 정렬하는 함수를 만들어보자.

// 오름차순으로 정렬이 돼있는 지 확인하는 함수
let isSortedToincrease = function (arr) {
  for ( let i = 1; i < arr.length; i++ ) {
    if ( arr[i-1] > arr[i] ) {
      return false;
    }
  }
  return true;
}

// 오름차순 정렬
let increaseSortNumber = function (arr) {
  // 배열이 숫자로만 이루어져 있는지 검사
  for ( let value of arr ) {
    if ( typeof(value) !== 'number' ) {
      return 'This function is only for number. Plz, enter an array consist of number';
    }
  }
  // arr의 길이가 0 또는 1이면 입력값 그대로 리턴
  if ( arr.length < 2 ) {
    return arr;
  }
  // // js에서 허용된 가장 큰 숫자를 배열의 앞 에 더미로 추가
  let infinity = Number.POSITIVE_INFINITY;
  arr.unshift(infinity);// 맨 앞에 넣었지만, 가장 큰 숫자이므로 정렬이 잘 되면 맨 마지막에 있을 예정
  // 무한 루프 ( 왠만하면 쓰지마세요 )
  while ( true ) {
    if ( isSortedToincrease(arr) ) { // 오름차순으로 정렬이 돼있는 지 확인
      arr.pop(); // 정렬이 잘 돼 있으면 더미값(infinity)를 pop()해주고 리턴
      return arr;
    }
    // 배열을 순회하며 이전 숫자와 지금 숫자를 비교한 뒤 위치를 바꿔주자
    for ( let i = 1; i < arr.length; i++ ) {
        // a가 b보다 크면 a와 b의 값을 바꾼다
      if ( arr[i-1] > arr[i] ) {
        [arr[i-1], arr[i]] = [arr[i], arr[i-1]];
      }
    }
  }
}
let arr = [0, 1, 3, 2];
increaseSortNumber(arr);
[0, 1, 2, 3];
increaseSortNumber([0,3,20,10,5,16,49,22,11,2,3]);
[0, 2, 3, 3, 5, 10, 11, 16, 20, 22, 49] // 잘 정렬되었다

후..... 메소드는 위대하다.

 

아직도 더 남아서 2편에 이어서 작성하였다.

 

아래에 포함된 메소드는 정리돼있는 포스트를 확인하자

 

(현재) [JavaScript] 문자열과 배열, 그리고 객체에서 유용한 각종 Method (1)

[JavaScript] 문자열과 배열, 그리고 객체에서 유용한 각종 Method (1)
// 문자열의 알파벳을 전부 대문자로 바꾸거나 소문자로 바꾸기
String.toUpperCase / String.toLowerCase
// 문자열을 잘라 배열에 담기
String.split()
// 빈 배열 찾기
빈 배열 찾기
// 배열인지 확인하기
Array.isArray(arr)
// 배열 내부의 값 정렬하기
Array.sort([compare function))

[JavaScript] 문자열과 배열, 그리고 객체에서 유용한 각종 Method (2)

[JavaScript] 문자열과 배열, 그리고 객체에서 유용한 각종 Method (2)
// 배열의 요소를 추가하거나 삭제하는 메소드
Array.push() / Array.unshift() / Array.pop() / Array.shift()
// 두 개의 배열을 하나의 배열로 합치기
Array.concat()
// 배열 자르기
Array.slice()

[JavaScript] 문자열과 배열, 그리고 객체에서 유용한 각종 Method (3)

[JavaScript] 문자열과 배열, 그리고 객체에서 유용한 각종 Method (3)
// 배열의 요소를 대체하기
Array.splice()
// 배열을 String형태로 합치기
Array.join()
// 조건에 맞는 새로운 배열을 만들기 ( 모든 배열의 요소 중에 길이가 5 이상인 요소로만 새로운 배열을 만드는 등 )
Array.filter()
// 배열의 모든 요소를 원하는 방식으로 업데이트하여 새로운 배열을 만들기 ( 모든 배열의 요소에 +1 하는 등)
Array.map()
// 배열의 모든 요소를 원하는 방식으로 줄여서 하나의 값만 남김 ( 모든 배열의 요소의 합을 리턴하는 등 )
Array.reduce()