.index와 .length가 같이 있을때 알쏭달쏭해지기 시작하는 — 나만 어려운 거 아니지?

.length는 길이를, .index는 0부터 시작하는 위치(순번)를 의미해요.

Copy to Clipboard
Syntax Highlighterstr2.substring(0, str.length - 3)

그런데 위의 코드처럼 이렇게 둘이 함께 쓰일 때면, 헷갈리기 시작하죠.
“도대체 어디까지 잘라지는 거지?” 머릿속이 복잡해지기 쉬운 부분이에요.

괜찮아요. 지금부터 차근차근 베이비 스탭으로하나씩 함께 이해해보아요.

1단계. 문자열은 글자들이 줄 서 있는 것

Copy to Clipboard
Syntax Highlighterlet str = "HELLO";

“HELLO”라는 단어가 있는데,
이건 “H”, “E”, “L”, “L”, “O”라는 다섯 개의 글자가 나란히 줄지어 있는 모습이에요.
각 글자가 한 칸씩 자리를 차지하며, 순서대로 줄을 서 있는 거예요.

2단계. index는 글자의 자리번호 (0부터 시작)

글자	H	E	L	L	O
index 번호	0번	1번	2번	3번	4번

인덱스(index)는 0부터 시작해요.
우리는 순서를 1부터 세지만
컴퓨터는 0부터 숫자를 세는 습관이 있어요.
인덱스는 컴퓨터가 사용하는 번호.

그래서 “H”는 0번째 자리, “O”는 4번째 자리에 있어요.
프로그래밍에서는 숫자를 0부터 세기 때문에 “H”가 첫 번째 글자지만, 인덱스는 0이에요.
처음엔 조금 낯설지만, 익숙해지면 훨씬 편해질 거예요. :)

3단계. length는 글자 수 (개수)

글자	H	E	L	L	O
글자 수	1개	2개	3개	4개	5개

“HELLO”는 총 몇 글자인가요?
맞아요! 5글자죠!
그래서 .length는 5가 돼요.

글자	H	E	L	L	O
글자 수	1개	2개	3개	4개	5개
인덱스 번호	0번	1번	2번	3번	4번

그런데 .index는 0부터 시작하니까,
마지막 글자의 인덱스 번호는 길이 5보다 하나 작은 숫자인 4가 되는 거예요.

last index = (lenght – 1)
마지막 글자의 인덱스 번호 = (글자수 – 1)

이렇게 “길이 / 개수 (length)”와 “위치 (index)”를 구분해서 생각해보면,
헷갈리던 부분이 하나씩 풀리기 시작할 거예요.

4단계. substring은 자르는 도구 ✂️

substring(시작번호, 끝번호)
시작번호부터 끝번호 바로 앞까지 자르기

Copy to Clipboard
Syntax Highlighterstr.substring(0, 2)

이 코드는 index 0부터 시작해서, index 2 “바로 전까지” 잘라서 가져와요.

글자	H	E	L	L	O
index 번호	0번	1번	2번	3번	4번

substring(0, 2)는 “HE”0번, 1번 글자까지만 포함되고, 2번은 포함되지 않아요.
즉, 시작 인덱스는 포함되고, 끝 인덱스는 포함되지 않아요.

조금 헷갈릴 수 있지만, .substring()에서는
“끝나는 인덱스는 포함되지 않는다”는 점만 기억해두면 괜찮아요.

연습문제: “HELLO”.substring(1, 4)

정답보기

1번째 글자부터 시작해서, 4번째 글자 바로 전까지 잘라요.
그래서 결과는 “ELL”

글자	H	E	L	L	O
index 번호	0번	1번	2번	3번	4번

5단계. str2.substring(0, str.length – 3)

Copy to Clipboard
Syntax Highlighterlet str = "HELLO";			 // str은 "HELLO"이고 길이는 5
let str2 = "WORLD"		   // str2는 "WORLD"
str2.substring(0, str.length - 3)

그럼 이건 무슨 뜻일까요?

Copy to Clipboard
Syntax Highlighterstr.length = 5
str.length - 3 = 2

str.length는 “HELLO”의 길이이므로 5.
str.length – 3는 5-3 = 2

“HELLO”에서 뒤에서 3글자인 “LLO”를 잘라낸 나머지, 바로 “HE”에 해당돼요.
(HELLO – LLO = HE)

Copy to Clipboard
Syntax Highlighterstr.substring(0, 2) // → "HE"

그래서 substring(0, 2)처럼 처음부터 시작해서,
마지막 3글자를 제외한 앞부분만 가져오면 되는 거죠.

글자	W	O	R	L	D
index 번호	0번	1번	2번	3번	4번

str2.substring(0, 2)는 “WORLD”에서 0번 인덱스부터 2번 인덱스 바로 전까지를 자르는 거예요.
즉, “WORLD”에서 처음 2글자인 “WO”를 잘라낸 거예요.

연습문제 : “HELLO”.substring(0, “HELLO”.length – 4)

정답보기

하나씩 뜯어볼게요:

“HELLO”.length는 5예요.
거기서 4를 빼면 → 5 – 4 = 1

따라서 이 코드는 다음과 같아져요

“HELLO”.substring(0, 1)

이건 0번째 글자부터, 1번째 글자 바로 전까지 자르는 거예요.
그래서 정답은 “H”

글자	H	E	L	L	O
index 번호	0번	1번	2번	3번	4번

기억할 것

개념	의미	예시
length	글자의 길이는 글자의 총 개수	"HELLO".length = 5
index	글자의 위치 번호 (0부터 시작)	"L"은 index 2
substring(a,b)	a부터 b 바로 전까지 자름 (앞은 포함, 뒤는 안 포함!)	substring(1,4)→ "ELL"