헷갈리는 자바스크립트 문자열/배열의 메서드 정리

자바스크립트(JavaScript)의 문자열과 배열의 주요 메서드(method)들을 비교 정리해보았다.

 

 

메서드가 아닌 것 : length 프로퍼티

 - length : property로 ( ) 없이 사용한다. 

 - 배열의 length : 배열 내 요소 개수가 아닌 가장 큰 인덱스 + 1 이다.

 

 

문자열 메서드 비교 정리

기능 요약	메서드 / 구문		설명	반환값	원본 변경	음수 인자	응용 / 기타
문자 추출	str[idx]	- idx: index	index가 idx인 문자를 추출한다.	추출한 문자	X	빈문자열 반환함	- 현재 더 많이 사용 - 위치에 글자 없으면 undefined 반환함
	str.charAt(idx)	- idx: index					- 위치에 글자가 없는경우 빈문자열 반환함
부분 문자열 찾기	str.indexOf(substr,idx)	- substr : 찾고자 하는 문자열 - idx : 찾기 시작하는 인덱스 (기본값 0) (옵셔널)	문자열 str를 인덱스 idx부터 시작해서 substr을 찾는다.	substr 존재하면 해당 index / 없으면 -1	X	0으로 취급
	str.lastIndexOf(substr,idx)		위와 동일하나 문자열의 끝에서부터 찾는다.			0으로 취급
	str.includes(substr, idx)	- substr : 찾고자 하는 문자열 - idx : 찾기 시작하는 인덱스 (기본값 0) (옵셔널)	문자열 str를 인덱스 idx부터 시작해서 substr을 찾는다.	true / false	X	가능
	str.startWith(substr)	- substr : 찾고자 하는 문자열	문자열 str이 substr으로 시작하는지 여부 확인		X	-
	str.endWith(substr)		문자열 str이 substr으로 끝나는지 여부 확인			-
부분 문자열 추출	str.slice(start [, end])	- start : 시작 인덱스 - end : 종료 인덱스 (end 미포함) (옵셔널)	문자열 str의 start에서 end(end 미포함)까지의 문자열 추출	추출한 문자열	X	가능 (문자열 끝에서부터 카운팅 시작)	start가 end보다 클 경우 빈문자열 반환함
	str.substring(start [, end])		문자열 str의 start와 end(end 미포함)사이의 문자열 추출			0으로 취급	start가 end보다 커도 된다.
	str.substr(start [, length])	- start : 시작 인덱스 - length : 추출할 개수	문자열 str의 start부터 length개의 문자 추출			가능 (끝에서부터 카운팅)	호스트 환경에서 동작안할수 있음
문자열 비교	str.codePointAt(idx)	- idx : 인덱스	idx 위치 문자의 코드 포인트 추출	코드포인트 값	X
	String.fromCodePoint(code)	- code : 코드포인트값	코드포인트에 대응하는 문자 반환	문자
	str.localeCompare(str2)	- str : 문자열 - str2 : 비교하는 문자열	str과 str2를 비교	str < str2 : 음수 str > str2 : 양수 str == str2 : 0			문자열의 정확한 비교

 

 

배열의 메서드 비교 정리

기능 요약	메서드 / 구문		설명	반환값	원본 변경	음수 인자	응용 / 기타
배열 요소 추가 제거	arr.push(...items)		배열 끝에 item추가	변경된 배열의 길이	O	-
	arr.pop()		배열끝의 요소 제거	제거된 요소		-
	arr.shift()		배열 앞의 요소 제거	제거된 요소		-
	arr.unshift(...items)		배열 앞에 item 추가	변경된 배열의 길이		-
	arr.splice(idx, deleteCount, ...items) - index : 조작 시작 인덱스 - deleteCount : 제거 요소 개수 - ...items : 추가 요소		index 부터 delectCount만큼의 요소를 삭제후 items을 추가한다.	삭제된 요소로 구성된 배열	O	가능 (끝에서부터 센 갯수)	deleteCount 0으로 사용시, 삭제없이 추가 가능
	arr.slice(start, end) - start : 시작 인덱스(옵셔널) - end : 끝 인덱스 (end 미포함) (옵셔널)		start~end(end 미포함)의 요소를 추출한다.	추출한 구간의 요소를 복사한 새로운 배열	X	가능 (끝에서부터 센 갯수)	str.slice() 로 배열 복사 가능
	arr.concat(arg1, arg2, ....) - arg1~ : 배열 혹은 값		기존배열에 있는 요소에 arg1~ 에 속한 모든 요소를 더하여 새로운 배열 생성한다.	결합한 새로운 배열	X	값으로 인식	유사배열 객체에 특수 프로퍼티 (Symbol.isConcatSpreadable)있으면 객체를 배열처럼 취급하여 객체 프로퍼티의 값이 더해짐
배열 탐색	arr.indexOf(item, idx) - item : 찾는 요소 - idx : 시작 인덱스 (옵셔널 / 기본값 0)		배열에서 item을 찾음	찾으면 해당 인덱스 / 없으면  -1	X	0으로 취급
	arr.lastIndexOf(item, idx) - item : 찾는 요소 - idx : 시작 인덱스 (옵셔널 / 기본값 마지막)		배열의 끝에서부터 item을 찾음			가능 (끝에서부터 센 갯수)
	arr.inclues(value) - value : 찾는 요소		배열에서 value를 찾음	true / false		-	NaN 처리 제대로 함
	arr.find(func(item, index, array)) - item – 함수를 호출할 요소 - index – 요소의 인덱스 - array – 배열 자기 자신		특정 조건(func)에 부합하는 요소 찾기	찾으면 해당 요소 / 없으면 undefined	X		요소 하나 찾기
	arr.findIndex(func(item, index, array))			찾으면 해당 인덱스 / 없으면  -1
	arr.filter(funci(tem, index, array))		특정 조건(func)에 부합하는 요소들 찾기	조건에 맞는 요소 전체를 담은 배열 / 없으면 빈배열			요소 여러개 찾기
배열 순회	arr.forEach(func(item, index, array))		모든 요소에 func을 호출	forEach는 X , callback함수가 반환/변형할 수 있음
배열 변형	arr.map(func(item, index, array))		모든 요소에 func을 호출하고 결과를 반환	함수 호출 결과를 새로운 배열로 반환	X
	arr.sort(func) - func : 비교 함수 (정렬의 기준) (옵셔널)		정렬	정렬된 배열	O		정렬함수 없을 경우 문자열로 변환하여 코드포인트에 따라 비교
	arr.reverse()		배열 뒤집기	뒤집힌 배열	O
	str.split(delim) arr.join(delim) - delim: 구분자		구분자를 기준으로 문자열을 배열로 쪼개거나 / 배열을 문자열로 합친다.	배열 / 문자열	X
	arr.reduce(func(accumulator, item, index, array), initial) - accumulator : 이전 함수 호출의 결과. initial은 함수 최초 호출 시 사용되는 초깃값을 나타냄(옵션) - item : 현재 배열 요소 - index : 요소의 위치 - array : 배열		요소를 순회하면서 func를 호출하고, 반환값을 다음 함수 호출에 전달, 누산기능	하나의 값	X
배열 확인	Array.isArray()		배열인지 감별	true / false	X

 

배열 메서드와 thisArg

- 함수를 호출하는 대부분의 메서드 (map, find, filter 등 / sort 제외)는 thisArg를 함수 다음의 매개변수로 받을 수 있다 (옵셔널)

- 역할 : 콜백함수의 this가 된다.