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

이 글은 전편에 이어 문자열과 배열, 그리고 객체에서 유용한 각종 메소드를 이해하기 쉽게 설명해 놓은 글이다. 당연히 부족한 부분이 더 많을 수 밖에 없기때문에 자세한 내용은 링크를 통해 확인하자. 특정 메소드보다 실제로 어떤 문제를 해결할 때 사용하는 방법부터 시작해서 각종 메소드까지 정리해보겠다! (2)

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

// 배열의 요소를 추가하거나 삭제하는 메소드
push() / unshift() / pop() / shift()
// 두 개의 배열을 하나의 배열로 합치기
concat()
// 배열 자르기
slice()

 

Array.push() / Array.unshift() / Array.pop() / Array.shift()

배열에 새로운 요소를 추가하거나 삭제할 때 사용하는 메소드이다.

push()는 배열의 끝에 새로운 요소를 추가하고 unshift()는 배열의 처음에 새로운 요소를 추가한다.

pop()은 배열의 마지막 요소를 삭제하고 shift()는 배열의 첫 요소를 삭제한다.

 

let arr = [1, 3, 2, 4];
console.log(arr);
// [1, 3, 2, 4]
arr.push(5);
console.log(arr);
// [1, 3, 2, 4, 5]
arr.unshift(6);
console.log(arr);
// [6, 1, 3, 2, 4, 5]
arr.pop();
console.log(arr);
// [6, 1, 3, 2, 4]
arr.shift();
console.log(arr);
// [1, 3, 2, 4]

 

로직을 생각해보면,

push()는 배열의 길이를 1 늘려주고 마지막 요소의 인덱스(배열의 길이 + 1)에 넣고자하는 요소를 삽입하고 리턴

// push()는 배열의 길이를 1 늘려주고 마지막 요소의 인덱스(배열의 길이 + 1)에 넣고자하는 요소를 삽입하고 리턴
let myPush = function (arr, element) {
  if ( !Array.isArray(arr) ) {
    return 'ERROR: First parameter must be an array.\n'
  }
  arr[arr.length] = element;
  return arr;
}
let arr = [1, 2, 3, 4, 5];
console.log(arr);
// [1, 2, 3, 4, 5]
myPush(arr, 6);
console.log(arr);
// [1, 2, 3, 4, 5, 6]

 

unshift()는 배열의 길이를 1 늘려주고 배열의 모든 요소를 한 칸 씩 뒤로 밀어낸 다음, 비어있는 첫번째 요소의 인덱스( arr[0] )에 넣고자하는 요소를 삽입하고 리턴

let myUnshift = function (arr, element) {
  if ( !Array.isArray(arr) ) {
    return 'ERROR: First parameter must be an array.\n'
  }
  let newArr = [];
  for ( let i = 1; i <= arr.length; i++) {
    newArr[i] = arr[i-1];
  }
  newArr[0] = element;
  return newArr;
}
let arr = [1, 2, 3, 4, 5];
console.log(arr);
// [1, 2, 3, 4, 5]
arr = myUnshift(arr, 0);
console.log(arr);
// [0, 1, 2, 3, 4, 5]

 

pop()은 배열의 길이를 1 줄이고 리턴

let myPop = function (arr) {
  if ( !Array.isArray(arr) ) {
    return 'ERROR: Parameter must be an array.\n'
  }
  let newArr = [];
  for ( let i = 0; i < arr.length-1; i++ ) {
    newArr[i] = arr[i];
  }
  return newArr;
}
let arr = [1, 2, 3, 4, 5];
console.log(arr);
// [1, 2, 3, 4, 5]
arr = myPop(arr);
console.log(arr);
// [1, 2, 3, 4]

 

shift()는 첫번째 요소를 제외한 나머지 요소를 앞으로 당겨주고 배열의 길이를 1 줄이고 리턴

let myShift = function (arr) {
  if ( !Array.isArray(arr) ) {
    return 'ERROR: Parameter must be an array.\n'
  }
  let newArr = [];
  for ( let i = 1; i < arr.length; i++ ) {
    newArr[i-1] = arr[i];
  }
  return newArr;
}
let arr = [1, 2, 3, 4, 5];
console.log(arr);
// [1, 2, 3, 4, 5]
arr = myShift(arr);
console.log(arr);
// [2, 3, 4, 5]

확실히 함수를 직접 만들어보니 이해가 잘 된다! 이걸 보시는 여러분들도 꼭 직접 만들어보시길 권합니다!

 

Array.concat()

두 배열 a, b가 있을 때, 두 배열을 하나로 합친 새로운 배열을 리턴한다. a.concat(b)를 하면 a뒤에 b가 이어지는 새 배열이 나온다.

let a = [1, 2, 3];
let b = [4, 5, 6];
a.concat(b);
// [1, 2, 3, 4, 5, 6]
console.log(a);
// [1, 2, 3]

//합친 배열을 사용하려면
let c = a.concat(b);
console.log(c)
// [1, 2, 3, 4, 5, 6]

로직을 생각해보면,

a, b 두 배열을 함수의 파라미터로 넘겨받아 새 배열에 a의 요소와 b의 요소를 넣어주고 새 배열 리턴

아래의 코드에서 사용된 slice() 메소드는 코드 바로 아래에서 확인 할 수 있다!

let myConcat = function (a, b) {
  if ( !Array.isArray(a) || !Array.isArray(b) ) {
    return 'ERROR: First parameter must be an array.\n'
  }
  let newArr = a.slice(); // newArr = a 처럼 a를 할당하면 newArr === a 인 상태가 된다. 주의!!

  for ( let i = 0; i < b.length; i++ ) {
    newArr[a.length + i] = b[i];
    console.log(newArr);
  }

  return newArr;
}
let a = [1, 2, 3];
let b = [4, 5];
console.log(a);
// [1, 2, 3]
console.log(b);
// [4, 5]
let arr = myConcat(a, b);
console.log(arr);
// [1, 2, 3, 4, 5]

 

Array.slice()

파라미터로 넣어준 인덱스부터 두번째 파라미터 이전까지를 리턴한다. 두번째 파라미터가 없다면, 배열의 끝까지를 돌려준다. 쉽게 이해하자면 파라미터로 a, b가 들어왔을 때, 이 범위 ( a <= index < b ) 를 인덱스로 배열을 리턴한다.

let arr = [1, 2, 3, 4]
a.slice(1);
// [2, 3, 4]
a.slice(1,3);
// [2, 3]
console.log(a)
// [1, 2, 3, 4]

로직을 생각해보면,

하나의 배열에서 파라미터로 넘어온 숫자를 인덱스로 삼아 범위 ( a <= index <= b) 안의 배열만 리턴

let mySlice = function (arr, a, b) {
  if ( !Array.isArray(arr) ) {
    return 'ERROR: First parameter must be an array.\n'
  }
  if ( typeof(a) === 'number' && ( typeof(b) === 'number' || b === undefined) ) {
    if ( a >= arr.length ) {
      return [];
    }
    if ( b === undefined ) {
      b = arr.length;
    }
    let newArr = [];
    for ( let i = 0; i < arr.length; i++ ) {
      if ( a <= i && i < b ) {
        newArr[i-a] = arr[i];
      }
    }
    return newArr;
  }
  return arr;
}
let arr = [0, 1, 2, 3, 4, 5];
console.log('arr', arr);
// [0, 1, 2, 3, 4, 5]
console.log('mySlice(arr)', mySlice(arr));
// [0, 1, 2, 3, 4, 5]
console.log('arr.slice()', arr.slice());
// [0, 1, 2, 3, 4, 5]
console.log('mySlice(arr, 1)', mySlice(arr, 1));
// [1, 2, 3, 4, 5]
console.log('arr.slice(1)', arr.slice(1));
// [1, 2, 3, 4, 5]
console.log('mySlice(arr, 2, 4)', mySlice(arr, 2, 4));
// [2, 3]
console.log('arr.slice(2, 4)', arr.slice(2, 4));
// [2, 3]
console.log('mySlice(arr, 2, 5)', mySlice(arr, 2, 5));
// [2, 3, 4]
console.log('arr.slice(2, 5)', arr.slice(2, 5));
// [2, 3, 4]
console.log('mySlice(arr, 6)', mySlice(arr, 6));
// []
console.log('arr.slice(6)', arr.slice(6));
// []

뇌정지가 온 관계로 splice()부터는 다음 포스트에서 작성하였습니다.

 

 

[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()