메소드들 예시로 정리하기 | concat(), indexOf(), includes(),reverse(), sort(),splice(),slice()
JavaScript
간단해보이지만 쓰려고 하면 와리가리 헷갈리는 것들...
유데미 강의 들으면서 콘솔창으로 연습한 예시들을 싹 정리해보려한다.
고고-
concat()
concat() 메소드는 새 배열을 만든다. 먼저 배열은 호출된 객체의 요소로 채워진다.
dogs.concat(cats)로 쓰면 ['rusty', 'happy', 'blue', 'kitty'] 순서로 나타난다.
indexOf()
indexOf() 는 문자열 안에 ()안의 값이 있는지 보고, 있다면 자리값을 알려준다.
찾고자 하는게 없다면 -1 이 출력된다.
사진이 잘렸는데..ㅠ
comboParty라는 배열에는 ['rusty', 'happy', 'blue', 'kitty']가 있다. 이처럼 indexOf() 는 글자 1개 뿐만 아니라 배열에서도 활용 가능하다.
includes()
include() 는 배열 안에 있는지 없는지를 true, false로만 나타낸다.
위와 동일한 변수를 사용했을 때, cats 라는 변수에 blue가 있어서 true가 나왔지만, Blue는 없기 때문에 false를 반환했다.
reverse()
reverse() 는 이름에서도 알 수 있듯이 순서를 반대로 바꾸는 메소드다.
sort()
sort() 는 정렬해주는 메소드인데, 주의할 점은 첫번째 자리 숫자만 기준으로 정렬을 한다.
제대로 정렬하려면 함수를 통해서 정렬해주어야한다.
splice(), slice()
splice() 와 slice() 는 갱장히.. 비슷하게 느껴졌다..!
우선 splice()예시를 보도록 하자
1. splice()
기존 요소를 삭제 또는 교체하거나 새 요소를 추가할 때 사용
color라는 배열에서 splice()를 활용해 일부를 제거하려한다.
- splice(num1,num2)에서 num1 은 배열의 변경을 시작할 인덱스 (여기서부터 시작)
- num2는 변경할 개수
따라서 위 예시에서는 5번째에 있는거 1개만 지우려는 것이고 해당 문자열은 'indigo'가 되었다.
결과를 보면 잘 삭제된 것을 볼 수 있다.
1-1. splice() 활용(추가)
위 예시처럼 원래 있던 배열에 특정위치에도 추가할 수 있다.
(1번 인덱스 위치에 'red-orange' 추가, 제거할 건 없으니까 0!)
1-2. splice() 활용(삭제와 추가)
이번에는 2번 위치에 'deleted'를 넣을건데 2개를 삭제할 예정이다.
그래서 'orange', 'light green'이 제거되고 그 자리에 'deleted' 가 추가되었다.
2. slice()
배열에서 시작부터 끝까지에 대해 복사본을 새로운 배열 객체로 반환한다.
⭐️ 원본 배열은 바뀌지 않는다.
⭐️ 끝 인덱스는 포함되지 않는다.
color.slice(3)은 3번 인덱스부터 포함해서 끝까지 반환하였고
color.slice(2,4) 이라고 작성하면 2번인덱스(yellow) 부터 3번인덱스(green)만 반환한다. (마지막 숫자 인덱스는 포함X)
원본 배열은 바뀌지 않고 복사만 했기 때문에 slice 한 값을 활용하려면 변수에 담아야한다.
(위 사진에서는 coolColors - *let 오타맞음ㅎㅎ)
메소드 종류는 너무 많고 정리하고보니 문자열 메소드 뭐 이것저것 섞인 듯하지만...! 일단 강의를 통해서 알고 정리해보고자 한 메소드는 여기까지!
계속 공부하면서 까다롭게 느껴지는게 있다면 그때그때 정리해두고 이해하고 넘어가자!!
**정확하지 않을 수 있으니 오류가 있다면 알려주세요!
