JS - Array(배열) 과 String(문자열) 착각과 오해를 불러 일으킬 수 있는 부분들 바로 이해하기

자바스크립트(javascript) - Array(배열) 과 String(문자열) 비슷한 메서드 분석

 

 

문자열과 배열은 엄연히 다르고 사용하는 방법도 다르지만

문자열과 배열은 같은 메서드가 존재해서 약간 오해를 불러일으키는 혹은 실수를 할 수 있기 때문에

이 부분에 대해서 확실히 집고 넘어가 보자.

 

var A = 'abc';

var B = ['a', 'b', 'c'];

 

 

이런 코드가 있다고 가정해보자.

 

string(문자열) / array(배열)이 가지고 있는 메서드 length, indexOf, concat 문자열과, 배열의 이 메서드는 성격이 비슷하다. 

 

확인해보자.

 

var A = 'abc';

var B = ['a', 'b', 'c'];

// 첫번째 확인
console.log(A.length); // 3
console.log(B.length); // 3


// 두번째 확인
console.log(A.indexOf('b')); // 1
console.log(B.indexOf('b')); // 1


// 세번째 확인
var AA = A.concat('TEST'); 
var BB = B.concat(['T', 'E', 'S', 'T']); 

console.log(AA); // abcTEST
console.log(BB); // ['a', 'b', 'c', 'T', 'E', 'S', 'T']


// 네번째 확인
console.log(A[1]); // b
console.log(B[1]); // b

 

이렇듯 실제 동작하는 건 같기 때문에 오해를 일으킬 수 있다.

하지만 이제부터 무엇이 차이점이 있는지 확인해보자.

 

▶문자열을 변경하려면 새롭게 반환받아야 한다.

이 의미는 A라는 변수에 'abc'라는 문자열을 대문자로 변경하고 서로 비교해보자.

 

var A = 'abc';

var Tmp = A.toUpperCase();

console.log(Tmp === A); // false

console.log(Tmp); // ABC
console.log(A); // abc

 

문자열 abc를 담고 있는 변수 A는 toUppserCase라는 메서드로 소문자에서 대문자로 변경했다.

여기서 잘 봐야 할 것은 A.toUpperCase()의 구문으로만 소문자가 대문자로 변경이 되었는지 아닌지

확인을 해봐야 한다는 말이다.

 

즉, 무슨 말이냐면 A.toUpperCase() 메서드를 실행하고 console.log(A)를 찍어보면

소문자 'abc'가 찍히는 걸 알 수 있다.

 

즉, 해당 변수에 abc라는 소문자가 toUpperCase()라는 메서드를 통해서

대문자로 변경된 문자열을 바로 A 변수에 담을 수 없다는 얘기이다.

 

즉, 문자열은 변경이 안된다는 말이다. 변경된 것(소문자 -> 대문자)을 새로운 변수에 담아야지만

변경된 것을 확인할 수 있다.

 

그래서 문자열을 변경시키려면 해당 문자열에서는 안되고 새로운 변수에 담아

그 변환한 값을 넣어야지만 가능하다는 것이다.

그래서 문자열을 변경하려면 새롭게 반환받아야 한다는 말이 이 뜻이다.

 

하지만 배열은 다르다. 

배열은 현재 들어있는 값을 변경을 하면 바로 적용이 가능해진다. 

 

확인해보자.

var B = ['a', 'b', 'c'];
B.push('d');

console.log(B); // ['a', 'b', 'c', 'd']

 

이렇듯 보면 B 배열에 push로 값을 추가했지만 따로 어떤 변수를 추가해서 넣지는 않았다.

즉, B변수에 들어있는 배열이 추가가 되었다. 바로 B라는 변수 제자리에서 배열을 수정한 것이다.

 

이것 외에 배열과 문자열은 지원하는 메서드도 차이가 있다.

배열은 지원하지만 문자열은 지원하지 않는다.

 

 

반응형

---

 

▶배열은 지원하지만 문자열은 아니다

배열에 들어있는 원소를 반대로 바꾸는 메서드가 있다. reverse()라는 메서드인데

 

 

var A = 'abc';
var B = ['a', 'b', 'c'];

A.reverse(); // "TypeError: A.reverse is not a function
B.reverse();

console.log(B); // ["c", "b", "a"]

 

 

확인을 해보면 배열 안에 순서가 반대로 적용되어 있는 걸 확인할 수가 있고,

문자열에 reverse() 메서드를 사용하면 에러가 발생이 된다.

reverse라는 메서드가 없다는 문구와 함께...

 

이렇게 자바스크립트에서는 문자열과 배열이 비슷한 메서드가 존재하고

또한 이 메서드들이 동작하는 것이 매우 유사하기 때문에 우린 오해하기가 쉽기 때문에

 

개발을 진행하다가도 어? 이게 왜 안되지?라는 상황이 생길 수가 있어서

이 부분에 대해서 확실히 짚고 넘어가야 하지 않나 라는 생각이 든다.

 

만약 문자열을 배열처럼 수정하고 추가하고 변경하고 싶다면 불가능 하진 않다.

여러 가지를 거치면 가능하다.

 

var A = 'abc';

var OtherA = A.split(''); 

OtherA.reverse();

A = OtherA.join('');

console.log(A); // cba

 

문자열은 변경을 못한다고 했다. 하지만 위처럼 하면 배열처럼 변경이 가능하다.

 

문자열 → split 메서드를 이용하면 배열로 변경됨 → 변경된 배열을 reverse() 메서드 실행 → reverse()가 완료된 배열을 join 메서드로 문자열로 변환 → 다시 A 변수에다가 넣음

 

위 과정을 거치면 A라는 변수에 담긴 문자열 'abc'는 reverse 가 된 결과를 얻을 수 있다.

 

여기서 왜 문자열을 split 하는데 배열로 변경이 되었냐고 질문이 나온다면

저 string 메서드가 split는 반환 값을 배열로 반환한다. 

 

즉 문자열을 끊어내서 반환하는 값은 배열로 반환을 하기 때문에 배열로 변경이 되는 것이다.

잠깐 테스트해보겠다.

 

 

var testString = '나는 자바 스크립트 공부를 열심히 하고 있습니다.';

var OtherTestString = testString.split(' ');

console.log(OtherTestString); // ["나는", "자바", "스크립트", "공부를", "열심히", "하고", "있습니다."]

 

 

보았는가? 이렇게 split를 이용하면 반환된 값은 배열 자체로 반환을 받는다.

즉, 위 코드를 설명하자면 split 메서드를 띄어쓰기(공백)로 문자열을 끊어서 배열에 담아 반환받은 것.

 

이처럼 문자열과 배열은 메서드가 비슷해서 개발하다 보면 비슷하게 사용하는 메서들 때문에 오해를 일으킬 수 있는 소지가 있기 때문에 이렇게 문자열과 배열은 다르다는 것을 확인하고 인지해야 한다.