내장 메소드(배열, 문자열)

문자열 메소드

메소드 중에는 원본 배열이나 문자열을 아예 바꿔버리는 경우도 있다. 만일 따로 그런 말이 없다면 원본에 영향을 주지 않는 거라고 생각하면 된다.

console.log는 임의로 생략했다.

배열과 겹치는 게 많다.

배열과 중복: length, indexOf, includes, slice,

임의의 문자열이 담긴 변수 str와 str2, str3이 있다고 하자.
let str = 'string cheese is delicious.';
let str2 = 'gas! gas! gas!'
let str3 = ' muffin! '

str.length: 문자열 길이 반환. 공백과 특수문자를 포함해서 자릿수를 센다. 배열에도 쓸 수 있다. 괄호가 없다!

str.length => 27

str.indexOf('(문자열)'): 특정 문자 또는 문자열이 몇 번째에 있는지, 인덱스 번호를 반환한다. 문자열의 경우, 문자열의 첫 글자가 몇 번째에 있는지를 반환한다. 없는 문자열을 찾으려 하면 -1을 반환한다.

str.indexOf('cheese');
=> 7
str2.indexOf('dash');
=> -1

str.charAt(n): n번째 자리에 있는 문자를 반환한다.

str.charAt(5);
=> g

str.includes('(문자열)'): 특정 문자 및 문자열을 포함하고 있는지 판단한다. 참, 거짓만 반환한다. 조건문에 쓰기 좋다.

str.includes('cheese'); => true
str.includes('chocolate'); => false

str.slice(n,k): n번째 문자부터 (k-1)번째 문자까지 잘라낸 다음, 잘라낸 부분을 반환한다. k가 아니라 k-1번째까지만 잘라낸다는 점에 유의하자. n만 쓰면, n번째 문자부터 끝까지 잘라낸다.

str.slice(1,4); => tri
str.slice(20); => icious.

str.toLowerCase(): 소문자로 변환
str.toUpperCase(): 대문자로 변환

str.replace('(stringA)','(stringB)'): A를 B로 바꾼다. 다만 문자열 내에서 A가 여러 개 나타나더라도 첫 번째로 발견한 것만 바꾼다.

str2.replace('gas','dash'); => dash! gas! gas!

str.replaceAll(위와 동일): 이건 전부 바꾼다.

str2.replace('gas','dash'); => dash! dash! dash!

str.repeat(n): 문자열을 n번 반복한다.

str3.repeat(3); => muffin! muffin! muffin!

str.trim(): 양쪽의 공백을 제거한다. 한 쪽에만 공백이 있더라도 효과는 있다.

str3.trim(); => muffin!muffin!muffin!

str.split('(문자열)'): 괄호 안의 문자열을 기준으로 토막내서 배열에 넣어 반환한다. 빈 문자열이 될 수도, 특수문자가 될 수도 있다. 기준점이 된 문자열은 아예 없어져 버린다.
빈 문자열을 넣을 경우, 글자 하나 하나씩 떼어서 배열화 시킬 수 있다.

str3.split(""); => ['m','u','f','f','i','n','!']
str2.split('!'); => ['gas',' gas',' gas','']

배열 메소드

console.log는 임의로 생략했다.
결과값은 화살표로 표시했다.

임의의 배열 arr가 있다고 가정하자.

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

arr.push(): 키워드는 '마지막','추가'. 원본을 바꾼다.
arr.pop(): 키워드는 '마지막','제거'. 원본을 바꾼다. arr.pop()은 잘제거한 부분을 반환한다. 제거한 뒤의 배열을 보고 싶으면 배열을 불러와야 한다.

arr.push(11);
console.log(arr); => [2, 4, 6, 8, 10, 11]
arr.pop(11); => 11
arr.pop(arr); => [2, 4, 6, 8, 10]

arr.unshift(): 키워드는 '처음', '추가'. 원본 배열을 바꾼다. un- 때문에 이게 제거하는 메소드라고 자주 착각한다. 근데 아니다. 이게 추가다.
arr.shift(): 키워드는 '처음', '제거'. 원본 배열을 바꾼다.

arr.unshift(1);
arr; => [1, 2, 4, 6, 8, 10]
arr.shift(1); => 1
arr; => [2, 4, 6, 8, 10]

arr.length: 배열의 길이를 반환한다. 문자열과 유사.

arr.indexOf('(배열 요소)'): 배열 요소의 인덱스 번호를 반환한다. 문자열과 유사하다. 없는 요소를 찾으려 하면 -1을 반환한다. 숫자 배열일 때는 인덱스 번호를 반환하는 건지, 배열 요소를 반환하는 건지 헷갈리기 쉽다.

arr.indexOf(6); => 2
arr.indexOf(1); => -1

arr.includes('(배열 요소)'): 배열 요소를 포함하고 있는지 판단한다. 문자열과 유사하다. 참, 거짓만 반환한다. 조건문에 사용하기 좋다.

arr.includes(2) => true
arr.includes(1) => false

arr.slice(n, k): n번째 요소부터 (k-1)번째 요소까지 잘라낸 다음, 잘라낸 부분을 반환한다. 문자열과 유사. 이것도 n만 쓰면 n번째부터 끝까지 잘라낸다.

arr.slice(1,3) => [4, 6]
arr => [2, 4, 6, 8, 10]

arr.splice(n,k): 배열에만 쓸 수 있는 요소. slice와의 다른 점은 크게 세 가지. 1.배열에만 쓸 수 있고, 2. n번째 요소부터 (k-1)번째까지 잘라내는 것이 아니라, k개를 잘라내는 것이라는 것, 3. 원본 배열을 바꿔버린다는 점, 이렇게다.

arr.fill('(배열 요소)'): 배열 안에 배열 요소를 채운다. 유의해야 할 점은, '배열 객체'를 선언해서 '배열 칸 수를 정해놓아야' 쓸 수 있다.

let zero = new Array(4);
zero.fill(0);
=> [0,0,0,0]

let justArr = [];
justArr.fill(0)
=> []

arr.join("(문자/문자열)"): 문자열에 있는 split의 반대다. 배열을 합쳐서 문자열로 만든다. 그냥 숫자를 넣어서 연결하는 것도 가능하다. 하지만 결과물은 문자열로 나온다.

arr.join("") => "246810"
arr.join("와 ") => "2 와4 와6 와8 와10"
arr.join(0) => "2040608010"

arr.reverse(): 배열 순서를 뒤집는다.

arr.reverse() => [10, 8, 6, 4, 2]

★이 아래에 있는 것들은 괄호 안에 익명함수 또는 화살표 함수가 들어간다. 익명함수로 쓸 경우 return을 써 줘야 하고, 화살표 함수의 경우는 수식만 써야 한다.

★배열을 반환하는지 아닌지 확인해보고 싶으면, 결과값을 typeof로 찍어보자. 배열로 반환한다면 자료형이 object로 뜬다.

forEach((comp[, index, arr]) => {---실행문---}):배열을 반환하지 않는다. 매개변수는 세 가지가 들어갈 수 있다. comp는 배열 요소, 필수 사항이다. index는 배열 요소의 순번을 나타낸다. arr는 배열이다.
확인하는 방법

arr3.forEach(function (comp, index, c) {
console.log("첫 번째 매개변수(요소): " + comp);
console.log("두 번째 매개변수(인덱스): " + index);
console.log("세 번째 매개변수: " + c);
console.log("------------");
});

let test2 = arr3.forEach((comp) => {
if (comp % 3 === 0) {
return "yes";
}
});
=> 콘솔로 찍어보면 undefined가 뜬다.

let test2 = arr3.forEach((comp) => {
if (comp % 3 === 0) {
console.log("yes");
}
});
=> 콘솔로 test2를 찍어보면 yes가 나온다.

아마 배열로 반환하지 않는다는 게, 반환(return이 붙은 것)이 안 된다는 의미인 것 같다. 함수 안에 든 console.log 같은 것은 출력이 되지만.

filter(): 함수 안의 수식을 기준으로 요소를 골라낸다. 필터링한다. 배열 형태로 반환한다.

let test = arr2.filter((comp) => comp % 2 === 0);
=> [2, 4, 6, 8]
★let test2 = arr3.filter((comp) => comp % 2 === 1);
=> [1, 3, 5, 7, 9]

find(): 조건에 부합하는 첫 번째 값을 찾아서 값으로 반환한다. 배열을 반환하지 않는다.

let test = arr3.find((comp) => comp % 2 === 1);
+> 1

map(): 배열 형태로 반환한다.

아래 예시로 든 건 위에 filter 함수 예시로 든 거랑 같은 코드인데, 홀수인 요소만 골라내서 출력한 filter와 달리, map은 조건을 근거로 참, 거짓을 판단해서 출력해놨다.

★let test2 = arr3.map((comp) => comp % 2 === 1);
=> [true, false, true, false, true, false, true, false, true]

조건만 써놓으면 그냥 참 거짓 값만 출력하는 건가?