[JavaScript] 메소드

메소드를 외우는게 아니라 이런 것들이 존재한다는 것 정도만 알아두면 됨

---

💣 toUpperCase(), toLowerCase()

• 대소문자 변환하는 메소드
• toUpperCase()는 모든 문자를 대문자로 변경
• toLowerCase()는 모든 문자를 소문자로 변경

const str = 'Hello World!';

console.log(str.toUpperCase());
console.log(str.toLocaleLowerCase());

💣 trim(), trimStart(), trimEnd()

• 문자열의 공백을 제거하는 메소드
• trim()은 문자열의 앞쪽과 뒤쪽에 있는 공백을 제거
• trimStart()는 문자열의 앞부분의 공백만 제거
• trimEnd()는 문자열의 뒤부분의 공백만 제거

const str = '    hello    ';

console.log(str.trim());
console.log(str.trimStart());
console.log(str.trimEnd());

💣 repeat()

• 기존의 문자열을 가공해서 어떤 새로운 문자열을 생성하는 메소드
• repeat()는 메소드를 사용해서 몇 번 반복할지를 정하면 지정한 문자열을 인자로 전달한 횟수만큼 반복해서 새로운 문자열 반환
• 새로운 문자열을 반환한다는 말은 원본 객체는 변하지 않는다는 것을 의미

const str = 'Hello';

console.log(str.repeat(3));
console.log(str);

💣 padStart(), padEnd()

• padding을 넣어주는 메소드
• 첫 번째 인자로는 최종적으로 만들 문자열의 길이 지정
• 두 번쨰 인자호는 어떠한 문자열을 추가할지를 지정하면 앞쪽에다가 지정한 문자열을 추가하여 총 길이가 지정한 길이만큼 되도록 만들 수 있음
• padStart()를 사용하면 앞부분에 지정된 문자열이 들어감
• padEnd()를 사용하면 뒤부분에 지정된 문자열이 들어감

const str = 'Hello';

console.log(str.padStart(10));
console.log(str.padEnd(10));

💣 indexOf()

• 주어진 키워드 값을 문자열에서 검색해서 일치하는 첫 번째 인덱스를 반환하는 기능을 함
• 문자열에 없는 키워드를 작성하면 찾지 못했을 때는 -1을 리턴

const str = '문장을 입력하시오';

console.log(str.indexOf('입력'));

💣 includes()

• 주어진 문자열 값을 문자열에서 검색해서 일치하는 값을 찾으면 true, 못 찾으면 false 값을 반환
• 키워드가 존재하는지 여부를 판단해주는 메소드

const str = '문장을 입력하시오';

console.log(str.includes('입력'));
console.log(str.includes('단어'));

💣 startsWith(), endsWith()

• 문자열이 주어진 문자열로 시작하거나 끝나는지 여부를 검색해주는 startWith()메소드와 endsWith() 메소드
• startsWith() 메소드를 사용하여 문자열이 어떤 문자열로 시작하는지 검색할 키워드를 지정
• 지정한 문자열로 시작한다면 true값, 시작하지 않는다면 false 값을 리턴
• endsWith() 메소드를 사용하여 문자열이 어떤 문자열로 끝나는지 검색할 키워드를 지정
• 지정한 문자열로 끝난다면 true 값, 끝나지 않는다면 false 값을 리턴

const str = '문장을 입력하시오';

console.log(str.startsWith('문장'));
console.log(str.endsWith('문장'));

💣 replace(), replaceAll()

• 주어진 패턴과 일치하는 첫번째 부분을 주어진 문자열로 교체해서 새로운 문자열로 반환하는 기능을 함
• 문자열 뒤에 replace()라는 메소드를 쓰고 원본 객체에서 교체할 문자열을 첫번째 인자에 지정하고 두 번째 인자에는 교체할 새로운 문자열를 지정 
• replace() 같은 경우에는 일치하는 문자가 여러 개 있어도 첫 번째 일치하는 문자만 교체를 해줌
• 주어진 패턴과 일치하는 모든 부분을 교체를 하고 싶다면 replaceAll() 메소드 사용
• replace()와 똑같이 사용하고 동작하지만 일치하는 모든 문자열을 지정한 문자열로 교체할 수 있음

const str = '문장을 입력하시오문장을 입력하시오문장을 입력하시오';

console.log(str.replace('문장', '단어'));
console.log(str.replaceAll('문장', '단어'));

💣 substring()

• 주어진 시작 인덱스부터 주어진 종료 인덱스의 이전 인덱스까지를 새로운 부분 문자열로 반환하는 기능을 함
• substring()을 작성하고 첫 번째 인자에는 시작 인덱스를 두 번째 인자에는 종료 인덱스를 지정

const str = '문장을 입력하시오!';

console.log(str.substring(0, 5));

💣 split()

• 문자열을 주어진 구분자를 기준으로 잘라서 그 결과를 배열로 반환하는 메소드
• split() 메소드를 사용하면 쉼표를 기준으로 문자열을 다 잘라서 하나의 배열로 반환
• split()을 사용할 때는 split() 메소드를 사용
• 첫 번째 인자로 어떤 걸 기준으로 자를지 구분자로 텍스트 지정

const str = '월요일, 화요일, 수요일, 목요일, 금요일, 토요일, 일요일';

console.log(str.split(','));

💣 slice()

•  주어진 인자에 따라 문자열의 일부를 추출하여 새로운 문자열로 반환
• slice()는 시작 위치를 의미하는 필수인자 한 개와 종료 위치를 의미하는 선택적 인자 한 개를 가질 수 있음
• 문자열의 시작 위치만 지정하게 되면 문자열을 해당 시작 위치부터 끝까지 잘라서 새로운 문자열로 반환
• 지정한 시작 위치부터 지정한 끝 위치에 새로운 문자열로 반환
• 시작 위치와 종료 위치는 음수로도 표기할 수 있음
• 음수로 지정하게 되면 문자열을  반대방향으로  시작하여 문자열을 자르게 됨

const str = 'Hello World!';

console.log(str.slice(5))
console.log(str.slice(3, 5))
console.log(str.slice(-3))

💣 push()

• 배열에 새로운 요소를 추가하기 위헤 사용
• 인자로는 추가할 요소를 작성\
• 한 개를 추가할 수도 있고 여러 개의 요소를 한 번에 추가할 수도 있음

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

arr.push(6);
arr.push(7, 8);

console.log(arr);

💣 pop()

• 끝에서부터 하나의 요소를 제거하고 제거한 요소를 반환
• 맨 뒤에 있는 마지막에 추가된 배열의 인자부터 하나씩 꺼내고 삭제

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

arr.push(6);
arr.push(7, 8);

arr.pop();
arr.pop();

console.log(arr);

💣 unshift() / shift()

• unshift()는 배열의 앞부분에 추가를 하고 앞부분에서 삭제할 수 있는 메소드
• unshift()는 배열의 앞쪽에 적용되는 push() 메소드와 같음
• shift()는 인자의 앞부분에서 하나씩 삭제하는 메소드

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

arr.unshift(10, 20, 30);

arr.shift();
arr.shift();

console.log(arr);

💣 forEach()

• 주어진 함수를 배열 요소에 각각 실행하는 메소드
• 인자로 이 함수를 전달
• 메소드를 사용할 때는 실행할 함수가 반드시 전달되어야 함
• 실행을 하는 함수는 필수 인자로 현재 요소의 값을 의미하는 인자가 요구되고 선택적으로 인덱스도 사용할 수 있음
• 배열에 각각의 요소들의 인자로 주어진 프린트 함수를 각각 실행
• 화살표 함수를 사용하여 작성할 수도 있음
• 재사용의 의미가 없고 forEach() 메소드에 사용하기만 하면 됨
• 함수 부분만 떼어서 forEach() 메소드의 인자로 넣어줄 수 있음
• 원본 배열의 값을 변경하지도 않고 값을 리턴하지도 않음
• 새로운 배열을 얻을 수 없다는 특징이 있음

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

function print((number, index) => {
    console.log(`${index} 위치의 요소 : ${number}`);
}

arr.forEach(print);

arr.forEach((number, index) => {
    console.log(`${index} 위치의 요소 : ${number}`);
});

 

💣 map()

• map()이라는 메서드는 forEach와 비슷하게 동작
• 새로운 배열을 반환함
• 어떤 함수를 적용해서 처리한 결과를 저장

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

const newArr = arr.map((number, index) => number + 1);

console.log(newArr);

💣 includes()

• 배열에 주어진 요소가 포함되었는지 여부에 따라서 요소가 있으면 true, 없다면 false를 반환

const arr = ['hello', 'world'];

console.log(arr.includes('hello'));
console.log(arr.includes('xp'));

💣 find() / findIndex()

• find() 함수는 주어진 판별 함수를 만족하는  첫 번째 요소의 값을 반환
• find() 메소드는 인자로 어떤 조건을 가지게 됨
• 조건이 판별 함수라고 불리는 함수의 형태로 되어 있음
• 검색을 했는데 조건을 만족하는 경우가 없다면 언디파인트 출력

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

console.log(arr.find((number) => number > 3));

• findIndex는 값을 리턴해주는 것이 아닌 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스 값을 리턴
• 판별함수를 만족하는 요소룰 찾지 못한다면 -1 리턴

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

console.log(arr.findIndex((number) => number > 3));

 

💣 fill()

• 배열을 지정한 값으로 채워주는데 요소를 수정할 때 원본 배열 그 자체를 수정하게 됨
• 시작 인덱스와 종료 인덱스를 선택적으로 지정할 수 있음

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

arr.fill(10);
arr.fill(10, 3);
arr.fill(10, 1, 3);

console.log(arr);

💣 slice()

• slice()는 배열의 복사본을 조각내서 새로운 배열로 반환하는 기능
• slice() 메소드에 시작 인덱스 값만 지정하면 지정된 시작 인덱스부터 끝까지를 잘라서 새로운 배열로 변환
• 원본 배열은 변하지 않음
• 주어진 시작 인덱스부터 주어진 종료 인덱스의 이전 인덱까지 위치를 잘라서 새로운 배열로 반환

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

console.log(arr.slice(2))
console.log(arr.slice(2, 4));

💣 splice()

• 필수 인자로 시작 인덱스를 가지고 선택적인 인자로 배열에서 제거할 요소의 개수와 배열의 추가할 요소를 지정할 수 있음
• 필수인자인 시작인덱스만 한 번 지정한 후 원본 배열을 다시 출력을 해보면 지정한 시작 인덱스 위치부터 배열의 끝까지 모든 요소들을 제거하게  
• 두 번째 인자에다가 제거할 요소의 개수를 따로 지정할 수 있음
• 제거한 위치에 채워 넣을 요소도 지정할 수 있음
• 세 번째 인자의 추가할 요소를 지정

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

arr.splice(2);
arr.splice(2, 2);
arr.splice(2, 2, 99);

console.log(arr);

 

💣 join()

• 배열의 모든 요소를 이어붙여서 하나의 문자열로 반환하는 기능
• 배열 요소들의 값과 각각을 구분하는 쉼표까지 합쳐져서 새로운 문자열로 반환
• 선택적으로 각각의 요소를 구분할 구분자를 인자로 추가할 수 있음
• 생략할 경우에는 지금처럼 기본적으로 쉼표가 적용
• 지정을 해주면 지정한 문자를 구분자로 사용하는 새로운 문자열을 만들게 됨

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

console.log(arr.join());
console.log(arr.join(';'));

💣 concat()

• 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새로운 배열로 반환하는 기능을 함
• 배열을 만들어서 넣지 않고 문자열을 지정해줘도 기존 배열 뒤에 우리가 주어진 인자들의 새로운 요소를 집어넣어서 하나의 새로운 배열로 반환 

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

console.log(arr.concat(numbers));

console.log(arr.concat('xxx', 'zzz'));

💣 filter()

• 주어진 판별 함수의 결과값이 참인 요소들만 모아서 새로운 배열로 반환
• 필터링을 해주는 기능

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

console.log(arr.filter((number) => number > 3));

💣 reduce()

• arr.reduce(callback [,initialValue])
• 배열에 각 요소에 대해서 주어진 함수를 실행한 다음에 하나의 값을 반환
• 필수 인자인 누산기(acc), 현재 값(cur)을 가지고, 선택적으로 현재 인덱스, 원본 파일 인자를 가질 수 있음

const arr = [1, 2, 3, 4, 5];
const reducer = (acc, value) => acc + value;

console.log(arr.reduce(reducer));