자바스크립트 문자열(String) 익히기 - 배열(Array)과 공통점&차이점

배열(Array)과 문자열(String)의 공통점

배열과 문자열은 닮은 구석이 있는데,바로 둘 다 index를 가지고 있다는 것이다.

const arr = ['h', 'e', 'l', 'l', 'o'];
const str = 'hello';
console.log(arr.length); //outputs:4
console.log(str.length); //outputs:4

자바스크립트에서는 배열을 좀 더 편하게 다룰 수 있게 다양한 메서드들이 존재하는데,Array-Javascript|MDN

문자열도 index를 가지고 있기에 배열에서 사용할 수 있는 여러 메소드들(indexOf,slice등등)을 사용할 수가 있다.

@ 문자열값에 index값으로 원하는 문자열 찾아오기

const str = 'overwatch';
console.log(str[2]); //outputs:"e"
console.log(str.charAt(4)); //outputs:"w"

@ 문자열값으로 index값 찾아오기

const str = 'tanker:sigma';
console.log(str.indexOf('i')); //outputs: 8
console.log(str.lastIndexOf('a')); //outputs: 11

배열(Array)과 문자열(String)의 차이점

가장 결정적인 큰 차이는 배열은 객체(Object)이자 참조형(Reference) 타입의 데이터형이고 문자열은 문자(String)이자 원시형(primitive)타입의 데이터형이라는 것이다.

참조형(Reference)데이터 타입 & 원시형(Primitive)데이터 타입 이해하기

@ typeof 연산자로 확인해보자.

const arr = ['1','2','3'];
const str = '123';
console.log(typeof arr); //outputs: "object"
console.log(typeof str); //outputs: "string"
console.log(arr == str); //outputs: false
console.log(arr === str); //outputs: false

위의 링크에서 자세한 설명이 나와있긴 하지만 참조형 데이터 타입인 객체는 생성된 값을 할당하게 되면 해당 변수에 '값의 주소'와 '값에 접근할 수 있는 길'을 만들어준다.

반대로 원시적 데이터 타입인 문자열은 값이 생성되고 변수에 할당하게 되면 해당 변수 박스에 '값을 담아준다.'

아래와 예제와 같이 배열의 index요소 값을 수정이 가능하기에 mutable:(형)바뀔 수 있는 속성이라 부르고 문자열은 index요소 값을 수정이 불가능하기에 immutable:(형)바뀔 수 없는 속성이라고 부른다. (문자열은 값을 수정하려면 전체값을 수정해줘야 한다.

let arr = ['z','a','y','r','a'];
let str = 'zayra';
arr[2] = 'd';
console.log(arr); //ouputs: ['z','a','d','r','a']
str[2] = 'd';
console.log(str); //outputs: 'zayra'
str = 'zadra';
console.log(str); //outputs: 'zadra'