🏆 Javascript(1) 주요 메소드 사용법

자바스크립트는 prototype이라는 개념이 있다. 쉽게 말하면 기존 객체의 원형인데, 이 prototype 객체에 내장된 다양한 메소드들을 파생된 객체에서 사용할 수 있다.

모든 메소드들을 외우기란 현실적으로 불가능하니 자주 사용되는 메소드들을 정리해보겠다.

String

1. slice

const str = "Hello World!!";

console.log(str.slice(0, 6));
console.log(str.slice(0, -2));
console.log(str);

Hello 
Hello World
Hello World!!

slice는 문자의 일부분을 잘라 return하는 메소드이다. 인수로 start, end 인덱스를 받으며 end로 받은 인덱스는 포함하지 않는다.

end 바로 직전 index까지만 포함하기 때문에 혼동하지 않도록 주의해야한다.

인덱스 번호로 음수 값도 가능한데 가장 끝 인덱스부터 내려가는 형식이다.

2.indexOf

const str = "Hello World!!";

console.log(str.indexOf("H"));
console.log(str.indexOf("World"));
console.log(str.indexOf("Good"));
console.log(str.indexOf("o", 6));
console.log(str);

0
6
-1
7
Hello World!!

indexOf는 이름 그대로 해당 String을 포함할 경우 처음으로 찾은 인덱스를 반환하고 그렇지 않으면 -1을 반환한다.

두 번째 인자로 position 값을 넣을 수 있는데, position 위치부터 탐색하라는 의미가 된다.

3. replace

replace도 직관적이다. 특정 패턴의 문자열을 입력하면 가장 첫 번째로 만나는 문자열을 받은 인자로 교체한다.

const str = "Hello World!!, Hello!!";

console.log(str.replace(/Hello/g, "Goodbye"));
console.log(str.replace("Hello", "Goodbye"));
console.log(str);

Goodbye World!!, Goodbye!!
Goodbye World!!, Hello!!
Hello World!!, Hello!!

타겟 문자열에 정규표현식을 넣어서 활용하면 첫 번째로 만나는 문자열 뿐만 아니라 매칭되는 모든 문자열을 교체할 수 있다.

4. split

const str = "abcdefgh";

console.log(str.split(""));
console.log(str.split("e"));
console.log(str.split("e", 1));
console.log(str);

[
  'a', 'b', 'c',
  'd', 'e', 'f',
  'g', 'h'
]
[ 'abcd', 'fgh' ]
[ 'abcd' ]
abcdefgh

split은 매우 유용하다. 첫 번째 인자로 들어온 seperator를 기준으로 문자열을 배열로 쪼갠다.

split을 이용하면 배열로 변한 문자열 데이터에 배열 메소드를 적용할 수 있다는 큰 장점이 있다.

두 번째 인자로 limit를 받는데, 이 경우 해당 수 만큼 배열의 크기를 제한한다.

Number

1. isInteger

const fNum = 123.3;
const iNum = 123;

console.log(Number.isInteger(fNum));
console.log(Number.isInteger(iNum));

false
true

인자로 들어온 숫자가 정수인지 판별하는 메소드이다. 다만 메소드의 호출을 Number 래퍼 객체인 것을 주의해야한다.

2. toString

const fNum = 123.3;
const iNum = 123;

console.log(fNum.toString());
console.log(typeof fNum.toString());
console.log(iNum.toString(2));

123.3
string
1111011

toString 메소드는 해당 number를 문자열로 변환한 결과를 반환한다.

이때 인자로 radix를 전달할 수 있는데, 위의 결과처럼 2를 전달하면 정수가 이진법으로 변환된 string이 반환된다.

3. parseInt, parseFloat

const num = "123";
const fNum = "123.456";

console.log(Number.parseInt(num));
console.log(Number.parseInt(fNum));
console.log(Number.parseFloat(fNum));
console.log(parseInt(fNum));
console.log(parseFloat(fNum), "\n");

console.log(typeof Number.parseInt(num));
console.log(typeof Number.parseInt(fNum));
console.log(typeof Number.parseFloat(fNum));
console.log(typeof parseInt(fNum));
console.log(typeof parseFloat(fNum));

123
123
123.456
123
123.456

number
number
number
number
number

parseInt와 parseFloat은 인자로 받은 string을 number로 변환해준다. 다만 parseInt는 소수점 아래 숫자를 모두 버리기 때문에 주의해아한다.

두 메소드는 Number 객체가 호출해도 되고 따로 호출자 없이 사용도 가능하다.

Math 객체

const num = -123;
const fNum = 123.456;
const arr = [1, 2, 3, 4, 5];

console.log(Math.abs(num));
console.log(Math.max(...arr));
console.log(Math.min(...arr));
console.log(Math.ceil(fNum));
console.log(Math.floor(fNum));
console.log(Math.round(fNum));
console.log(Math.random());

123
5
1
124
123
123
0.26679628239106457

Math 객체는 수학과 관련된 메소드들을 담당한다. 절대값, 최대, 최소, 올림, 내림, 반올림, 랜덤 등 다양한 메소드들을 제공한다.

이 외에도 sqrt, log 등 수학적인 메소드들을 찾는다면 Math 객체를 살펴보는 게 좋다.

Array

배열 관련 메소드들은 정말 많이 쓰인다. 다양한 메소드들이 여러 군데에서 쓰이는 만큼 숙달될 필요가 있다.

1. find, findIndex, includes,

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(arr.find((item) => item > 5));
console.log(arr.find((item) => item > 10));
console.log(arr.findIndex((item) => item > 5));
console.log(arr.findIndex((item) => item > 10));
console.log(arr.includes(1));
console.log(arr.includes(10));

6
undefined
5
-1
true
false

Array는 다양한 find 메소드를 제공한다. find와 findIndex 모두 판별을 위한 callback을 인자로 받는데, 위의 결과처럼 역할은 비슷하지만 다른 결과가 나온다.

find는 조건에 부합하는 첫 번째 요소를 반환하고 조건에 모두 부합하지 않으면 undefined, findIndex는 인덱스와 -1을 반환한다는 차이가 있다.

includes 메소드는 배열이 인자를 포함하면 true, 아니면 false를 반환한다.

2. slice, map, filter, concat

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(arr.slice(0, 4));
console.log(arr.slice(10, 15));
console.log(arr.map((data) => data * 2));
console.log(arr.filter((data) => data >= 5));
console.log(arr.concat([1,2,3,4]));

[ 1, 2, 3, 4 ]
[]
[
   2,  4,  6,  8, 10,
  12, 14, 16, 18
]
[ 5, 6, 7, 8, 9 ]
[1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4]

위의 메소드들은 배열 원본을 바꾸지 않는다. 대신 해당 배열의 원소들을 조작한 새로운 배열을 반환한다.

slice는 String 객체의 slice와 유사하다. 인덱스 범위가 배열의 길이를 넘어서면 빈 배열을 반환한다.

map과 filter는 사용방법이 비슷하다.

map은 원소를 하나하나 순회하며 해당 원소에 특수한 조작을 가하고, filter는 원본 배열의 원소들 중 주어진 판별 callback에 부합하는 것들만 추린다.

concat은 배열에 새로운 원소를 추가하여 반환해준다. 마찬가지로 원본 배열은 바뀌지 않는다.

4. splice, push, pop, shift, unshift

이번 메소드들은 원본 배열을 수정한다. 그렇기 때문에 의도하지 않은 결과를 낳을 수 있다. 사용에 충분히 주의하여야 한다.

const arr = [1, 2, 3, 4, 5];

console.log("splice", arr.splice(3, 2), "\n");
console.log("After splice", arr, "\n");
console.log("push", arr.push(...[10, 11, 12, 13]), "\n");
console.log("After push", arr, "\n");
console.log("pop", arr.pop(), "\n");
console.log("After pop", arr, "\n");
console.log("shift", arr.shift(), "\n");
console.log("After shift", arr, "\n");
console.log("unshift", arr.unshift(100, 101), "\n");
console.log("After unshift", arr, "\n");

splice [ 4, 5 ]
After splice [ 1, 2, 3 ]
push 7
After push [
   1,  2,  3, 10,
  11, 12, 13
]
pop 13
After pop [ 1, 2, 3, 10, 11, 12 ]
shift 1
After shift [ 2, 3, 10, 11, 12 ]
unshift 7
After unshift [
  100, 101,  2, 3,
   10,  11, 12
]

splice는 시작 인덱스, 그리고 카운터를 받는다.

시작 인덱스부터 카운터까지 잘라낸 배열을 반환하며 잘린 결과는 원본 배열에도 반영된다.

push와 pop은 각각 삽입, 제거 메소드이다.

push는 배열에 원소를 추가했을 때 새로운 길이를 반환하고, pop은 제거된 원소를 반환한다.

shift와 unshift는 push, pop과 유사하지만 push, pop이 배열의 꼬리에서 일어난다면, shift, unshift는 배열의 머리에서 일어난다는 점이 다르다.

반환 값은 마찬가지로 각각 새로운 길이, 제거된 원소이다.

5. reserve, sort

const arr = [1, 2, 3, 4, 5];

console.log(arr.reverse());
console.log(arr);
console.log(arr.sort((a, b) => a - b));
console.log(arr);

[ 5, 4, 3, 2, 1 ]
[ 5, 4, 3, 2, 1 ]
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5 ]

reverse와 sort 또한 원본 배열을 수정한다. reverse는 단순히 배열을 역순으로 정렬하고 sort는 주입된 callback에 따라 배열을 정렬한다.

const arr = [50000, 19999, 30000, 1000000];

console.log(arr.sort());

console.log(
  arr.sort((a, b) => {
    if (a >= 30000) return -1;
    else {
      a - b;
    }
  })
);

[ 1000000, 19999, 30000, 50000 ]
[ 50000, 30000, 1000000, 19999 ]

다만 sort의 callback인 compareFunc의 사용에 주의하여야 하는데, 기본 값은 문자의 유니코드 기준 정렬이다.

그렇기 때문에 위의 예시에서 1,000,000이 가 앞으로 오게 된다. Number 값이 들어가도 문자 기준 정렬이므로 주의해야한다.

compareFunc은 음수, 0, 양수를 반환하는데 a, b를 비교해 음수 값이 반환된 경우 a를 b보다 낮은 인덱스로 취급한다.

반대라면 b가 a보다 낮은 인덱스로 정렬된다. 0이라면 서로를 정렬하지 않고 다음 원소로 넘어간다.

const arr = [3, 6, 10000, 5250, 6];

console.log(arr.sort());
console.log(arr.sort((a, b) => a - b));
console.log(arr.sort((a, b) => b - a));

[ 10000, 3, 5250, 6, 6 ] // 문자 유니코드 값 기준
[ 3, 6, 6, 5250, 10000 ] // 오름차순
[ 10000, 5250, 6, 6, 3 ] // 내림차순

다음과 같이 compareFunc을 적절하게 응용할 수 있다.

6. forEach, reduce

const arr = [1, 2, 3, 4, 5];
let result = 0;

for (let i = 0; i < arr.length; i++) {
  result += arr[i];
}

console.log(result);
arr.forEach((item) => (result += item));
console.log(result);

15
30

forEach 메소드는 주어진 배열의 원소마다 callback을 한 번씩 실행한다. 이때 map처럼 배열을 반환하는 게 아닌 undefined를 반환한다.

const arr = [1, 2, 3, 4, 5];

console.log(arr.reduce((acc, curr) => acc + curr));
console.log(arr.reduce((acc, curr) => acc + curr, 100));

15
115

reduce는 유용한 메소드이다. 인자로 callback과 accumulator를 받는다.

accumulator는 첫 호출 때 설정한 값이 있다면 설정한 값을 받고 그렇지 않으면 첫 번째 원소가 된다.

첫 호출 이후부터는 callback에서 반환한 값들이 accumulator가 된다.

const arr = [1, 2, 3, 4, 5];
let result = 0;

console.log(
  arr.reduce((acc, curr) => {
    acc.push(curr * 2);

    return acc;
  }, [])
);

[ 2, 4, 6, 8, 10 ]

reduce는 다음과 같이 map 함수처럼 사용하는 등 사용자의 의도에 따라 다양한 기능을 수행할 수 있다.