Achievement Goals
- 메서드를 이용해 문자열과 숫자를 원하는 형태로 만들 수 있다.
- 메서드를 이용해 배열과 객체를 구분할 수 있다.
- 객체의 키 및 값의 존재 여부를 확인할 수 있다.
- 배열의 앞/뒤에 element를 추가 또는 삭제할 수 있다.
- 불변성의 의미를 이해하고, 어떤 메서드가
Mutable혹은Immutable한지 구분할 수 있다. - for 문을 대체하여,
forEach,filter,map,reduce,slice등의 메서드를 이용해 배열을 원하는 형태로 만들 수 있다. - 불변성을 유지하는 것이 왜 좋은지 이해할 수 있다.
- 함수형 프로그래밍의 특징을 이해할 수 있다.
- 함수를 인자로 넘기는 방법에 대해 이해할 수 있다.
- 메서드의 인자로 익명 함수를 즉시 넘기는 방법에 대해 이해할 수 있다.
callback에 대해 이해할 수 있다.
문자열 다루기
기본 사용법
문자에 접근하기
문자열의 문자는 배열에 접근하는 것처럼 인덱스를 통해 읽을 수 있다. 인덱스가 벗어나면 undefined를 반환한다.
let str = 'CodeStates';
console.log(str[0]); // 'C'
console.log(str[3]); // 'e'
console.log(str[str.length - 1]); // 's'
console.log(str[10]); // undefinedlength 프로퍼티는 문자열의 전체 길이를 반환한다. 그러므로 전체 길이 - 1은 맨 마지막 인덱스가 된다.
문자열은 read-only이므로 인덱스 접근을 통해 값을 수정할 수 없다. 수정하려면 새로운 string을 할당해야 한다.
str[0] = 'G'
console.log(str); // 'CodeStates'
str = 'newString'
console.log(str); // 'newString'문자열 합치기
+ 연산자 또는 concat() 메서드를 이용해 여러 문자열을 합칠 수 있다. 만약 number, boolean 등과 같은 다른 타입의 값과 합치면 string으로 자동 형변환하고 합쳐진다.
const str1 = 'Code';
const str2 = 'State';
console.log(str1 + str2); // 'CodeState'
console.log(str1 + 0); // 'Code0'
console.log(str1.concat(str2)); // 'CodeState'문자열 메서드
문자열 메서드는 모두 immutable하다. 호출된 메서드가 원본에 영향을 주지 않는다.
배열 메서드에서는 immutable과 mutable이 구분되어 있기 때문에 주의하여야 한다.
indexOf(searchValue)
문자열에서 특정 문자나 문자열을 찾고 싶을 때 사용한다.
- arguments: 찾고자 하는 문자열
- return value: 앞부터 시작해서 일치하는 index, 찾고자 하는 문자열이 없으면 -1
'CodeStates'.indexOf('States'); // 4
'CodeStates'.indexOf('states'); // -1
'CodeStates'.indexOf('e'); // 3lastIndexOf메서드는 문자열의 뒤부터 시작한다.includes(searchValue)도 비슷한 동작을 하지만 true 혹은 false를 반환한다.
'CodeStates'.lastIndexOf('e'); // 8
'CodeStates'.includes('States'); // truesplit(separator)
문자열을 구분 기호에 의해 분리하고 싶을 때 사용한다.
- arguments: 분리 기호. 분리 기준이 될 문자열
- return value: 분리된 문자열이 포함된 배열
const str = 'Welcome to my velog!';
console.log(str.split(' ')); // ["Welcome", "to", "my", "velog!"]csv(comma-separated values) 형식을 처리할 때 유용하다.
substring(start, end)
문자열에서 일부 문자열만 가져오고 싶을 때 사용한다.
- arguments: 시작 index, 끝 index 혹은 시작 index 혹은 없음
- 끝의 인덱스는 포함하지 않는다.
- 시작과 끝의 순서가 바뀌어도 동일하다.
- 음수를 입력하면 0으로 취급한다.
- 하나만 입력하면 시작 index부터 끝까지 가져온다
- index 범위를 벗어나면 마지막 인덱스로 취급한다.
- 인수를 아무것도 넣지 않으면 새로운 문자열을 만든다.
- return value: 시작과 끝 index 문자
const str = '123456789'
console.log(str.substring(0, 3)); // '123'
console.log(str.substring(3, 0)); // '123'
console.log(str.substring(-3, 3)); // '123'
console.log(str.substring(3)); // '456789'
console.log(str.substring(0, 100)); // '123456789'
console.log(str.substring()); // '123456789'slice도 같은 동작을 하지만,substring과 달리 arguments로 음수를 받을 수 있다. 또한 시작이 끝보다 크면 빈 문자열을 반환한다.
console.log(str.slice(-1)); // 9
console.log(str.slice(3, 0)); // ''마지막 인덱스만 가져오고 싶을 때 유용하다.
toLowerCase(), toUpperCase()
문자열의 영문자를 모두 소문자 혹은 대문자로 바꾸고 싶을 때 사용한다.
- arguments: 없음
- return value: 대, 소문자로 변환된 문자열
console.log('CodeStates'.toLowerCase()); // 'codestates'
console.log('CodeStates'.toUpperCase()); // 'CODESTATES'trim
문자열의 양 끝에 공백을 제거하고 싶을 때 사용한다.
- arguments: 없음
- return value: 공백이 제거된 문자열
const str = ' CodeStates ';
console.log(str.trim()); // 'CodeStates'padStart
문자열의 시작 앞부분에 다른 문자열을 추가하고 싶을 때 사용한다.
- arguments: 원하는 문자열의 목표 길이, (추가할 문자열=' ')
- return value: 목표 길이를 만족하는 문자열
'abc'.padStart(10); // " abc"
'abc'.padStart(10, 'foo'); // "foofoofabc"
'abc'.padStart(5, 'foo'); // "foabc"
'abc'.padStart(1); // "abc"padEnd
문자열의 끝 뒷부분에 다른 문자열을 추가하고 싶을 때 사용한다.
- arguments: 원하는 문자열의 목표 길이, (추가할 문자열=' ')
- return value: 목표 길이를 만족하는 문자열
'abc'.padEnd(10); // "abc "
'abc'.padEnd(10, 'foo'); // "abcfoofoof"
'abc'.padEnd(5, 'foo'); // "abcfo"
'abc'.padEnd(1); // "abc"match
문자열이 정규식과 매치되는 부분을 검색하고 싶을 때 사용한다.
- arguments: 정규식
- 정규식이 아닌 객체가 전달되면
new RegExp(객체)로 생성한 정규식을 암묵적으로 전달한다. - 비워두면 빈 문자열을 가진 배열을 반환한다.
- 정규식이 아닌 객체가 전달되면
- return value: 문자열이 정규식과 일치하면, 일치하는 전체 문자열을 첫 번째 요소로 포함하는 배열을 반환한다.
replace
문자열의 일부분을 대체하고 싶을 때 사용한다.
- arguments: 대체될 문자열, 대체할 문자열
- return value: 대체된 문자열
const str = 'The quick brown fox jumps over the lazy dog.'
console.log(str.replace('lazy', 'fat'));