length 자바스크립트 배열 문자열 차이점
메인 콘텐츠 생성 실패
같이보면 좋은 글!
질문 QnA
JavaScript에서 length 속성은 무엇인가요?
JavaScript에서 length 속성은 문자열(String) 또는 배열(Array)과 같은 객체의 길이를 나타내는 내장 속성입니다. 이 속성은 항상 0보다 크거나 같은 정수 값을 반환하며, 해당 데이터 구조가 포함하는 요소 또는 문자의 '수'를 의미합니다. 하지만 문자열과 배열에서 length가 의미하는 바와 작동 방식에는 중요한 차이가 있습니다.
JavaScript 문자열(String)의 length 속성은 어떻게 작동하나요?
문자열의 length 속성은 해당 문자열이 포함하는 UTF-16 코드 유닛(code unit)의 개수를 반환합니다. JavaScript는 내부적으로 문자열을 UTF-16으로 표현하기 때문에, 이 length 값은 실제 눈에 보이는 글자의 개수와 다를 수 있습니다. 특히 이모지(emoji)나 일부 아시아 언어 문자처럼 두 개의 UTF-16 코드 유닛(서로게이트 쌍, surrogate pair)으로 표현되는 문자의 경우, length는 1이 아닌 2로 계산됩니다. 문자열의 length 속성은 읽기 전용(read-only)이며, 값을 변경할 수 없습니다.
JavaScript 배열(Array)의 length 속성은 어떻게 작동하나요?
배열의 length 속성은 배열에 포함된 요소의 개수를 나타냅니다. 더 정확히는, 배열에서 가장 큰 인덱스(index) 값에 1을 더한 값과 같습니다. 예를 들어, [0, 1, 2] 배열의 length는 3입니다. 배열의 length 속성은 쓰기 가능(writable)합니다. 이 속성에 새로운 값을 할당하여 배열의 크기를 조절할 수 있습니다.
1. length를 줄이면: 배열의 length 값을 현재보다 작게 설정하면, 해당 인덱스 이후의 모든 요소가 배열에서 영구적으로 제거됩니다.
예시: let arr = [1, 2, 3, 4, 5]; arr.length = 2; // arr은 이제 [1, 2]가 됩니다.
2. length를 늘리면: 배열의 length 값을 현재보다 크게 설정하면, 새로운 길이만큼 배열이 확장되고, 새로 추가된 인덱스에는 '비어 있는 슬롯(empty slots)'이 생성됩니다. 이 슬롯들은 undefined와는 다릅니다.
예시: let arr = [1, 2]; arr.length = 5; // arr은 이제 [1, 2, empty, empty, empty]가 됩니다.
또한, 희소 배열(sparse array)의 경우, 정의되지 않은(undefined) 요소가 있더라도 length는 가장 큰 인덱스에 1을 더한 값으로 계산됩니다.
예시: let sparseArr = [1, , 3]; sparseArr.length; // 3을 반환합니다. (중간의 빈 슬롯도 길이에 포함)
문자열과 배열의 length 속성에는 어떤 주요 차이점이 있나요?
문자열과 배열의 length 속성은 다음과 같은 주요 차이점을 가집니다.
1. 의미하는 바:
- 문자열: UTF-16 코드 유닛의 개수를 의미합니다. 이는 시각적으로 보이는 글자 수와 다를 수 있습니다 (예: 이모지는 2).
- 배열: 배열에 포함된 요소의 총 개수를 의미합니다. 이는 가장 큰 인덱스에 1을 더한 값입니다.
2. 쓰기 가능 여부:
- 문자열: 읽기 전용(read-only) 속성입니다. length 값을 변경할 수 없습니다.
- 배열: 읽기/쓰기 가능(read/write) 속성입니다. length 값을 변경하여 배열의 크기를 동적으로 조절할 수 있습니다.
3. 특수 문자 처리:
- 문자열: 서로게이트 쌍(예: 이모지)과 같은 유니코드 문자는 length가 1이 아닌 2로 계산될 수 있어 주의가 필요합니다.
- 배열: 요소의 실제 값(undefined 포함)과 관계없이, 슬롯의 존재 유무에 따라 길이를 계산합니다. 특정 인덱스의 요소가 비어 있더라도 length에는 영향을 주지 않습니다.
4. 희소 배열(Sparse Arrays):
- 문자열: 해당 사항이 없습니다.
- 배열: 중간에 비어 있는 슬롯(undefined와 다름)이 있더라도, length는 가장 큰 인덱스에 1을 더한 값을 반환합니다.
length 속성을 사용할 때 주의해야 할 점은 무엇인가요?
length 속성을 사용할 때 다음과 같은 점들을 주의해야 합니다.
1. 문자열의 시각적 글자 수와 길이 불일치: 이모지나 특정 유니코드 문자의 경우, 하나의 글자가 2개 이상의 UTF-16 코드 유닛으로 표현될 수 있어 string.length는 눈에 보이는 글자 수와 다를 수 있습니다. 정확한 시각적 글자 수를 세려면 Array.from(str).length 또는 Intl.Segmenter API를 사용하는 것이 좋습니다.
2. 배열 length의 변경 부작용: 배열의 length 속성을 줄이면 해당 인덱스 이후의 모든 요소가 영구적으로 삭제됩니다. 이는 데이터 손실로 이어질 수 있으므로 신중하게 사용해야 합니다.
3. 배열 length 증가 시 'empty' 슬롯 생성: 배열의 length를 늘리면 새롭게 추가된 슬롯들은 empty 상태가 됩니다. 이는 undefined로 초기화된 것과는 다르게 작동하므로, 반복문 등을 돌릴 때 주의가 필요합니다.
이러한 차이점을 이해하고 사용하면 JavaScript에서 문자열과 배열의 길이를 효율적으로 다룰 수 있습니다.