Cute Bow Tie Hearts Blinking Pink Pointer

백엔드/Javascript

[Javascript] 문자열, 배열 메서드

청포도 에이드 2022. 1. 6. 16:53
728x90

목차

 

-문자열 메서드

replace

replaceAll

repeat

includes
indexof
substring
substr
concat
valueof
slice

 

 

-콜백함수

-arrow 화살표 함수

-배열 메서드

1.forEach
2.filter
3.map
4.reduce

-switch case 문

 

 

replace

str_text.replace ("찾을 문자열", "변경할 문자열")

예시

let date = "2021-01-06";
 
let str = date.replace("-", "");

replaceAll

let str = "dog dog hello"
str.replaceAll("dog","monkey")

 

repeat

let str3 = "*"
console.log(str3.repeat(6))

includes

특정 문자열을 포함하는지 확인하는 메서드

 

string.includes( searchString, length )
//(찾는글자, 배열시작위치(인덱스))

searchString : 검색할 문자열로 필수 요소. 대소문자를 구분.

length : 검색을 시작할 위치. 선택 요소로, 값이 없으면 전체 문자열을 대상으로함.

 

예시

 

'abzcd'.includes( 'z' )
'abzcd'.includes( 'z', 3 )
//cd가 z를 포함하는지 검사. z를 포함하지 않으므로 false를 반환.

indexOf

 

string.indexOf(search, position)


search : 필수 입력값, 찾을 문자열

 

position : 선택사항, 기본값 0, string에서 search를 찾기 시작할 위치

 

 

찾는 문자열이 없으면 -1을 리턴한다. 문자열을 찾을 때 대소문자를 구분한다.

 

        let str = "abcd"
        console.log(str.indexOf('b'))
        // 1이 출력된다.

 

 

 

substr

 

substr("시작 위치", "길이(선택)") 또는 substr("시작 위치")

 

        let str2 = '자바스크립트';

        console.log(str2.substr(2, 4));
        
        //'스크립트' 출력

 

substring

 

substring("시작 위치", "종료 위치(선택)") 또는 substring("시작 위치")

 

문자열을 '슬라이싱' 해준다. slice 함수랑 비슷

 

        console.log(str2.substring(2, 4));
        
        //'스크' 출력

 

concat 

 

두 개의 문자열을 하나의 문자열로 만들어줌


입력값을 문자열 대신 배열을 사용하면 두 개의 배열을 하나의 배열로 만들어주기도 한다.

 

        str.concat(str2)

        // 'abcd자바스크립트' 출력

배열 concat

        arr1.concat(arr2)

        // [1, 2, 3, 4] 출력

valueof

 

valueOf 와 toString 은 배열의 구성요소를 문자열 형태로 돌려준다.

 

[배열명].valueOf();

 

[배열명].toString();

 

코드를 입력했을 때 뭐가 달라지는 건지 아직 잘 모르겠다.

 

배열에 있는 반복문 메서드


1.forEach
2.filter
3.map
4.reduce

 

 

 

forEach

 

https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Array-forEach

 

자바스크립트 Array forEach

이번 글에서는 자바스크립트 Array(배열) 객체의 메서드인 forEach에 대해 작성하겠습니다. forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다. 하지만 for문처럼 index와 조건식, inc

yuddomack.tistory.com

for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다.

하지만 for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있다.

 

 

콜백함수?

 

파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다.

 

콜백함수는 이름이 없는 '익명의 함수'를 사용한다. 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.

 

 

filter

 

filter 함수는 명칭과 같이 callbackFunction의 조건에 해당하는 모든 요소가 있는 배열을

새로 생성하는 기능이다.


map

 

들어가기 전, allow 함수(화살표 함수)에 대해 알자.

 

https://velog.io/@ki_blank/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98Arrow-function

그냥 여길 참고하자...

 

내가 이해한 바를 간단하게 적자면,

 

변수 선언하고 = (  ) =>  ;

 

대게 이 형식인데, 말로 간단히 설명하자면

(  )에 입력값을 넣어서, => ~로 출력되게 하여라. 를 줄인 듯.

 

단 => 뒤에 {}를 사용하려면 반드시 return을 사용해야한다.

 

이제 map에 대해 알아보자.

 

기본 원리는 간단하다. 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어 주는 것이다.

 

참고 링크

 

https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

 

(JavaScript) map, reduce 활용하기 - 함수형 프로그래밍

안녕하세요. 이번 시간에는 map과 reduce 메서드에 대해 알아보겠습니다. 배열에 있는 바로 그 map과 reduce 맞습니다. 많은 분들이 forEach는 사용하시는데 map과 reduce는 잘 안 쓰시더라고요. 그리고 redu

www.zerocho.com

 

정리하자면, map은 배열을 1대1로 짝짓되 기존 객체를 수정하지 않는 메서드이다.

 

내가 이해한 바: 배열 안에 요소들을 for문 돌리는 것 마냥.. 하나하나씩 돌려서 함수를 적용해주는 것.

 

여기서 나온 결과 값은 새로운 배열(객체)에 저장됨.

 

reduce

 

이것도 윗 링크 참고

 

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

 

반복되는 모든 것에는 reduce를 쓸 수 있다는 것을 기억하면 된다.

 

switch ~ case 문

 

복수의 if문과 바꿔서 사용 가능

 

https://ko.javascript.info/switch

 

switch문

 

ko.javascript.info

주의점 : case문 안에 break문이 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 case문을 실행한다.

 

728x90