문자열의 글자에는 0부터 시작하는 자리 번호(인덱스, index)가 붙어 있습니다. s[0]처럼 번호로 한 글자를 꺼내고, s.at(-1)처럼 음수를 주면 뒤에서 셉니다. s.slice(1, 3)처럼 시작과 끝 번호를 주면 그 사이를 잘라 내는데, 끝 번호의 글자는 들어가지 않습니다.
날짜 '2026-10-15'에서 월만 떼어 내거나, 전화번호의 가운데 네 자리를 가리려면 글자의 자리를 짚어 꺼내야 합니다.
자리 번호는 1이 아니라 0부터 세고, 자르기는 끝 번호를 빼고 꺼냅니다. 또 없는 자리를 짚어도 오류가 나지 않고 undefined가 나와, 틀린 값이 조용히 다음 줄로 넘어갑니다.
1자리 번호는 0부터
문자열 'python'의 글자마다 앞에서부터 0, 1, 2, … 번호가 붙습니다. 번호는 '첫 글자에서 몇 칸 떨어져 있나'를 셉니다. 첫 글자는 0칸 떨어져 있어 0번입니다.
| 글자 | p | y | t | h | o | n |
|---|---|---|---|---|---|---|
| 번호 | 0 | 1 | 2 | 3 | 4 | 5 |
| 뒤에서 | -6 | -5 | -4 | -3 | -2 | -1 |
이름 뒤 대괄호에 번호를 넣으면 그 자리의 글자 하나를 꺼냅니다.
const s = 'python';
console.log(s[0]);
console.log(s[1]);
console.log(s[5]);
console.log(s.length);p
y
n
6여섯 글자의 마지막 번호는 6이 아니라 5입니다. 마지막 번호는 늘 s.length - 1입니다.
2뒤에서 세기: at()
뒤에서 세려면 at()에 음수 번호를 넣습니다. 마지막 글자가 -1, 그 앞이 -2입니다. 0은 이미 첫 글자라 뒤에서는 -1부터 셉니다.
const s = 'python';
console.log(s.at(-1));
console.log(s.at(-2));
console.log(s[-1]);n
o
undefined대괄호에 음수를 넣으면 뒤에서 세지 않습니다. 4번 줄의 s[-1]은 '-1이라는 자리'를 찾다가 그런 자리가 없어 undefined를 줍니다. 뒤에서 셀 때는 at()을 씁니다.
3자르기: slice(시작, 끝)
slice(시작, 끝)은 시작 번호부터 끝 번호 바로 앞까지 잘라 새 문자열을 만듭니다. 이것을 자르기라 하고, 자료에 따라 슬라이싱(slicing)이라고도 부릅니다.
const s = 'python';
console.log(s.slice(1, 3));
console.log(s.slice(0, 2));
console.log(s.slice(2));
console.log(s.slice(-3));yt
py
thon
hon2번 줄의 slice(1, 3)은 1번 y와 2번 t만 꺼냅니다. 끝 번호 3의 h는 들어가지 않고, 꺼낸 글자 수는 끝 − 시작, 곧 3 − 1 = 2입니다.
끝을 비우면 4번 줄처럼 끝까지 자르고, 시작에 음수를 쓰면 5번 줄처럼 뒤에서 센 자리부터 자릅니다.
s.slice(0, 2)와 s.slice(2)는 2번 자리에서 정확히 갈려, 둘을 이으면 처음 문자열이 됩니다. 자르기는 새 문자열을 만들 뿐이라 이름 s는 그대로 'python'에 붙어 있습니다.
4없는 자리는 undefined
'python'에는 10번 자리가 없습니다. 없는 자리를 꺼내 쓰면 무엇이 찍히고, 몇 번 줄에서 멈출까요?
const s = 'python';
const c = s[10];
console.log(c);
console.log(c.length);실행 결과 보기
undefinedmain.js:4console.log(c.length); ^ TypeError: Cannot read properties of undefined (reading 'length') at main.js:4:15예상과 다르면 그곳이 배울 곳입니다. 2번 줄은 없는 자리를 꺼냈는데도 멈추지 않고 이름 c를 undefined에 붙입니다. 3번 줄은 그것을 찍고, 오류는 그 값으로 글자 수를 읽으려 한 4번 줄에서 납니다.
TypeError 줄의 설명은 'undefined의 속성을 읽을 수 없다(length를 읽다가)', 곧 undefined에서 .length를 꺼내려 했다는 뜻입니다. 수에서 .length를 읽으면 undefined를 줄 뿐이지만(문자열 잇기와 길이), undefined에서는 무엇을 읽어도 이렇게 TypeError로 멈춥니다.
오류 자리는 4번 줄이지만 고칠 곳은 undefined를 만든 2번 줄입니다. 그래서 이 오류를 보면 그 이름의 값을 만든 앞줄로 올라갑니다.
자르기는 범위를 벗어나도 오류도 undefined도 없이 있는 글자까지만 꺼냅니다. s.slice(4, 10)은 'on'이고, 하나도 없으면 s.slice(10)처럼 빈 문자열 ''입니다.
예제
전화번호의 가운데 네 자리를 별표로 가립니다. 앞 네 글자와 뒤 네 글자를 잘라 가운데에 '****-'를 끼워 잇습니다.
const phone = '010-1234-5678';
const head = phone.slice(0, 4);
const tail = phone.slice(-4);
const mid = '****-';
console.log(head + mid + tail);
console.log(phone);010-****-5678
010-1234-56782번 줄의 phone.slice(0, 4)는 0~3번 '010-'이고, 3번 줄의 phone.slice(-4)는 뒤에서 네 글자 '5678'입니다. 5번 줄이 그 사이에 '****-'를 끼워 새 문자열을 만듭니다.
6번 줄처럼 phone은 그대로입니다. 자르기와 +는 새 문자열을 만들 뿐 원래 문자열을 바꾸지 않습니다.
자주 틀리는 곳
틀린 생각: slice(1, 3)은 3번 자리까지 꺼낸다.
'1부터 3까지'로 읽으면 3번 글자도 드는 것 같지만, 자르기는 끝 번호의 글자를 넣지 않습니다.
const s = 'python';
console.log(s.slice(1, 3));
console.log(s.slice(1, 4));yt
ythslice(1, 3)은 1번 y와 2번 t 두 글자, slice(1, 4)는 3번 h까지 세 글자입니다.
맞는 규칙: 자르기는 끝 번호 바로 앞에서 멈춥니다. 그래서 끝 번호는 꺼낼 마지막 글자의 다음 번호로 쓰고, 끝까지 꺼낼 때는 비웁니다.
틀린 생각: 첫 글자의 자리 번호는 1이다.
글자를 셀 때는 하나, 둘 하고 1부터 세니 첫 글자가 1번 같지만, 자리 번호는 0부터입니다. s[1]은 둘째 글자 y를 꺼내고, 첫 글자 p는 s[0]으로 꺼냅니다.
맞는 규칙: 자리 번호는 첫 글자에서 몇 칸 떨어져 있는지를 세어 첫 글자가 0번입니다. 첫 글자는 s[0], 마지막 글자는 s.at(-1)로 꺼냅니다.
틀린 생각: 없는 자리를 꺼내면 그 줄에서 바로 오류가 난다.
번호가 틀렸으면 꺼내는 줄에서 멈출 것 같지만, 4절처럼 없는 자리는 오류 없이 undefined를 줍니다. 대괄호에 음수를 넣은 s[-1]도 끝 글자가 아니라 undefined입니다.
const s = 'python';
console.log(s[10]);
console.log(s[-1]);
console.log(s.at(-1));undefined
undefined
n2번 줄과 3번 줄은 멈추지 않고 undefined를 찍고, 끝 글자는 4번 줄의 at(-1)만 꺼냅니다.
맞는 규칙: 자바스크립트는 없는 자리를 꺼내도 멈추지 않고 undefined를 주고, 오류는 그 값을 쓰는 줄에서 납니다. 끝 글자는 at(-1)로 꺼내고, 찍힌 undefined를 보면 그 값을 만든 줄로 올라갑니다.
확인 문제
1. 예제의 1번 줄을 const phone = '010-9876-5432';로 바꿨습니다. 무엇이 찍힐까요? 두 줄을 글자 그대로 쓰세요.
const phone = '010-9876-5432';
const head = phone.slice(0, 4);
const tail = phone.slice(-4);
const mid = '****-';
console.log(head + mid + tail);
console.log(phone);힌트
글자마다 번호를 적어 보세요. 6번 줄이 찍는 phone이 어느 값에 붙어 있는지도 보세요.
정답
010-****-5432
010-9876-5432앞 네 글자 '010-'와 뒤 네 글자 '5432' 사이에 '****-'가 들어갑니다. phone은 바뀌지 않아 둘째 줄은 처음 번호 그대로입니다.
흔한 오답은 둘째 줄도 가려진 번호로 쓰는 것입니다. 자르기와 잇기는 새 문자열을 만들 뿐입니다.
2. 날짜에서 월 '10'만 꺼내 찍도록 빈칸에 들어갈 자르기 번호를 쓰세요.
const date = '2026-10-15';
console.log(date.slice(____));힌트
글자마다 번호를 적어 보세요. '10'의 1은 몇 번 자리이고, 끝 번호는 어디의 번호여야 할까요?
정답
5, 7입니다. date.slice(5, 7)이 '10'을 찍습니다.
'1'이 5번, '0'이 6번이라 6번까지 꺼내려면 끝 번호는 그다음 7입니다.
뒤에서 센 번호로 -5, -3이라 써도 '10'을 꺼냅니다. 앞뒤를 섞은 5, -3과 -5, 7도 같습니다.
흔한 오답은 5, 6입니다. 끝 번호의 글자도 든다고 본 것입니다(끝도 든다는 생각). slice(5, 6)은 '1' 한 글자만 꺼냅니다.
3. 학번 앞 네 자리는 입학 연도, 그다음 세 자리는 학과 번호입니다. 무엇이 찍힐까요? 세 줄을 글자 그대로 쓰세요.
const sid = '20261057';
const year = sid.slice(0, 4);
const num = sid.slice(4, 7);
console.log(year);
console.log(num);
console.log(sid[8]);힌트
여덟 글자에 0~7번을 붙여 보세요. slice(4, 7)의 끝 번호 7이 어느 글자인지, 8번 자리가 있는지도 보세요.
정답
2026
105
undefinedslice(0, 4)는 0~3번 '2026', slice(4, 7)은 4~6번 '105'입니다. 여덟 글자의 번호는 0~7뿐이라 sid[8]은 오류 없이 undefined입니다.
흔한 오답은 둘째 줄의 1057과 셋째 줄의 7입니다. 7번 자리까지 든다고 본 것(끝도 든다는 생각)과 마지막 글자를 8번으로 센 것(첫 글자를 1번으로 셈)입니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
3절의 코드(다섯 줄)를 main.js에 저장해 돌립니다. 그다음 2번 줄의 slice(1, 3)을 slice(1, 4)로 바꾸면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.