2.2 문자열

jude·2022년 1월 29일
0

you don't know js

목록 보기
7/30
post-thumbnail

문자열과 배열은 닮았지만 자바스크립트에서는 같지 않다.

닮아있긴 하다.

var a = 'jude';
var b = ['j','u','d','e'];

a.length; // 4
b.length; // 4

a.indexOf('u'); // 1
b.indexOf('u'); // 1

var c = a.concat('kim'); // 'judekim'
var d = b.concat('k','i','m'); // ['j','u','d','e','k','i','m']

a === c // false
b === d // false

a; // 'judekim'
b; // ['j','u','d','e','k','i','m']

둘 다 문자의 배열 이라고 할 수 있을까? 그렇지 않다.

var a = 'jude';
var b = ['j','u','d','e'];

a[1] = '0'
b[1] = '0'

a; // 'jude' - 값이 변경되지 않는다.
b; // ['j','0','d','e']; - 값이 변경된다.

문자열은 불변(Immutable), 배열은 가변(Mutable) 값이다.

문자열은 불변 값이기 때문에 문자열 메소드는 원본 문자를 훼손하지 않고 항상 새로운 문자열을 반환한다.

var a = 'jude';
var b = ['j','u','d','e'];

var c = a.toUpperCase();
a === c // false

a; // 'jude'
c; // 'JDUE'

b.push('!');
b; // ['j','u','d','e', '!']

문자열에 쓰면 좋을만한 배열의 메소드를 쓰고 싶을 때가 있다.
call()을 이용하여 빌려 써보자.

var a = 'jude';
var b = ['j','u','d','e'];

a.join; // undefined
a.map; // undefined

var c = Array.prototype.join.call(a, '-');
var d = Array.prototype.map.call(a, function(v) {
  return v.toUpperCase() + '.';
}).join('');

c; // 'j-u-d-e'
d; // 'J.U.D.E.'

배열의 map 메소드는 배열의 각 원소를 커스텀하여 새로운 배열을 반환할 수 있다.
여기서는 ['j','u','d','e'] 라는 배열의 각 원소를 대문자로 변경하고 뒤에 . 을 하나씩 추가하여 ['J.','U.','D.','D.'] 라는 배열을 반환하고 join('')을 이용하여 문자열로 반환


var a = 'jude';
var b = ['j','u','d','e'];

a.reverse; // undefined

b.reverse(); // ['e','d','u','j']
b; // ['e','d','u','j']

문자열은 불변이라 reverse 와 같은 원본을 수정하는 메소드는 사용할 수도 없고, 빌려 쓸 수도 없다.

Array.prototype.reverse.call(a); // 읽기 전용이라서 변경할 수 없다고 에러 발생

// 귀찮지만 방법은 있다.
// 문자열을 배열로 바꾸고, 뒤집고, 다시 문자열로 변경하는 작업
var c = a.split('').reverse().join('');
c; // 'eduj'
profile
UI 화면 만드는걸 좋아하는 UI개발자입니다. 프론트엔드 개발 공부 중입니다. 공부한 부분을 블로그로 간략히 정리하는 편입니다.

0개의 댓글