초중고등학생 자바스크립트 교재

📘 7.4.4 배열의 모든 친구들을 하나씩 만나보기 - forEach()어느 조용한 오후, 서랍 속에서 오래된 앨범을 꺼내어 펼쳐보는 순간을 떠올려보세요. 그 앨범 속 사진들을 한 장씩 넘기며, 각각의 추억과 다시 만나는 그런 시간 말이에요. 첫 번째 사진에 잠시 머물고, 두 번째 사진에서 미소 짓고, 세 번째 사진에서 눈물을 글썽이며, 마지막 사진까지 빠짐없이 모든 순간들과 인사하는 거죠.우리가 지금까지 배운 배열에서도 이런 순간들이 필요해요. 특정한 보물을 찾는 것(indexOf(), includes())도 중요하지만, 때로는 배열 안의 모든 친구들을 하나씩 차례대로 만나고 싶을 때가 있어요. 오늘 만날 forEach()는 바로 그런 따뜻한 만남을 도와주는 친구예요.🧠 새로운 단어들과 친해지기새로..

📘 7.4.3 배열에서 보물찾기 게임하기 - indexOf()와 includes()어떤 오후, 낡은 상자 속에서 어린 시절의 추억들을 찾고 있었어요. "저 작은 인형이 어디 있을까?", "그때 그 편지는 어디 갔을까?" 하면서 하나하나 들여다보았죠. 때로는 그것들이 정확히 몇 번째에 있는지 알고 싶었고, 때로는 단순히 있는지 없는지만 궁금했어요.우리가 지금까지 배운 배열에서도 이런 순간들이 있어요. 넣고, 빼고, 복사하고, 편집하는 것도 중요하지만, 때로는 그 안에 우리가 찾고 있는 무언가가 있는지, 그리고 그것이 어디에 있는지 알아야 할 때가 있어요. 오늘 만날 두 명의 탐정 indexOf()와 includes()가 바로 그런 일을 도와주는 친구들이에요.🧠 새로운 단어들과 친해지기새로운 개념과 만날..

📘 7.4.2 배열에서 필요한 부분만 복사해서 가져오기 - slice()어느 늦은 오후, 도서관에서 두꺼운 책을 읽고 있던 중에 특별히 인상 깊은 몇 페이지를 발견했다고 상상해보세요. 그 부분을 친구와 나누고 싶지만, 책 전체를 빌려줄 수는 없어요. 그럴 때 우리는 복사기를 찾아가서 필요한 페이지만 조심스럽게 복사하죠. 원본 책은 그대로 두고 말이에요.우리가 지난 시간에 배운 splice()는 원본 배열을 직접 수정하는 강력한 도구였어요. 하지만 때로는 원본을 그대로 간직하며, 필요한 부분만 조용히 복사해가고 싶을 때가 있어요. 바로 그런 순간을 위해 slice()가 우리 곁에 있습니다.🧠 새로운 단어들과 친해지기새로운 개념을 이해하는 첫걸음은 그 개념이 품고 있는 단어들과 친해지는 것이에요. 마치 ..

📘 7.4.1 배열의 어느 곳에서든 자유자재로 편집하기 - splice()아이들이 놀이터에서 줄을 서 있는 모습을 보면, 때때로 중간에 있는 친구가 다른 곳으로 가야 하거나 새로운 친구가 중간에 끼어들어야 하는 일이 생기죠. 그럴 때면 아이들은 자연스럽게 자리를 만들어주고, 새로운 순서를 만들어냅니다. 우리가 지금까지 배운 배열 조작 방법들은 마치 줄의 맨 앞이나 맨 뒤에서만 친구들이 들어오고 나가는 것과 같았어요. 하지만 때로는 정말로 줄의 한가운데서 무언가 일어나야 할 때가 있습니다. 바로 그런 순간을 위해 splice()라는 도구가 우리 곁에 있어요.🧠 먼저 용어를 알아볼까요?언어는 때로 우리의 마음을 담는 그�그릇이 되기도 하고, 때로는 복잡한 개념을 단순하게 만들어주는 다리가 되기도 해요. ..

📘 7.3.1 배열 안에 몇 개나 들어있을까? - length 속성push, pop, unshift, shift와 함께한 시간들이 이어져 왔습니다. 값을 넣고, 빼고, 다시 넣고, 다시 빼면서 배열이 변해가는 모습을 지켜보았습니다. 이제 우리는 하나의 자연스러운 질문에 답해야 할 때가 온 것 같습니다. "이 배열 안에 도대체 몇 개나 들어있을까?"length라는 속성은 참으로 직관적인 이름을 가지고 있습니다. 영어로 길이를 뜻하지만, 배열에서는 물리적인 길이가 아니라 들어있는 요소의 개수를 의미합니다. 마치 서랍 안에 들어있는 물건의 개수를 세는 것처럼, 자연스럽고 필요한 일이지요.이 속성을 이해하면 우리는 배열이 비어있는지 확인할 수 있고, 사용자에게 몇 개의 항목이 있는지 알려줄 수 있고, 배열의 ..

📘 7.2.4 배열의 맨 앞에서 값 꺼내기 - shift()push, pop, unshift와 함께한 시간들이 차례로 이어져 왔습니다. 이제 우리는 마지막 하나의 이야기를 더 나누어야 할 것 같습니다. 배열의 맨 앞에서 값을 조용히 꺼내오는 shift라는 기능에 대해서 말이지요.unshift가 배열의 앞에 새로운 값을 넣어주는 일을 한다면, shift는 그와는 정반대로 배열의 맨 앞에 있는 값을 꺼내어 주는 일을 합니다. 마치 줄을 서 있는 사람들 중에서 맨 앞의 사람이 자연스럽게 한 걸음 앞으로 나가는 것처럼요.shift라는 이름 안에는 "이동한다"는 뜻이 담겨있습니다. 맨 앞의 값이 사라지면서 나머지 값들이 모두 앞으로 한 자리씩 이동하기 때문에 이런 이름을 갖게 되었습니다.이 기능을 이해하면 우리..

📘 7.2.3 앞에 추가하기 (unshift) - 맨 앞에 새로운 값 넣기push와 pop에 대한 이야기를 나누었던 지난 시간이 아직도 생생합니다. 그때 우리는 배열의 뒤에서 값을 넣고 빼는 방법을 배웠습니다. 이번에는 그와는 반대편 이야기를 해보려 합니다. 배열의 맨 앞에 새로운 값을 넣어주는 unshift라는 기능에 대해서 말이지요.생각해보면 참 흥미로운 일입니다. 줄을 서 있는 사람들 앞에 누군가 새로 들어오는 모습을 말이에요. 모든 사람들이 자연스럽게 한 자리씩 뒤로 물러나면서 새로운 사람에게 맨 앞자리를 내어주는 것처럼, unshift도 그런 방식으로 작동합니다.unshift라는 이름은 처음 들으면 조금 낯설 수 있습니다. 하지만 이 안에는 "shift"라는 단어가 들어있지요. 이동한다는 뜻입..

📘 7.2.2 뒤에서 빼기 (pop) - 마지막 것을 쏙 꺼내는 방법지난 시간 우리는 push라는 기능을 통해 배열에 새로운 것들을 더해가는 이야기를 나누었습니다. 그 경험이 아직도 마음에 남아있을 것 같습니다. 이번에는 그와는 정반대의 이야기를 해보려 합니다. 배열에서 무언가를 조용히 꺼내오는 이야기를 말이지요.pop이라는 기능은 참으로 솔직한 이름을 가지고 있습니다. 영어로 '펑' 하고 터뜨린다는 뜻이지요. 하지만 우리가 사용할 때는 거칠게 터뜨리는 것이 아니라, 배열의 맨 마지막에 있는 값을 조심스럽게 꺼내오는 것입니다.생각해보세요. 책상 위에 쌓인 책들 중에서 하나를 가져가야 할 때, 우리는 자연스럽게 맨 위에 있는 책부터 가져가지 않나요? pop도 정확히 그런 방식으로 작동합니다. 배열에서 가..

📘 7.2.1 뒤에 추가하기 (push) - 자동 확장 목록 만들기여러분과 함께 이 순간을 보내고 있습니다. 지금까지 배열이라는 상자를 만들어보고, 그 안에 들어있는 것들을 하나씩 꺼내어 보는 시간을 가졌습니다. 이제 우리는 조금 다른 이야기를 써보려 합니다. 배열에 새로운 것들을 넣어주는 이야기를 말이지요.생각해보세요. 학교에서 돌아와 책상에 앉아 일기를 쓰는 여러분의 모습을. 처음에는 빈 종이였지만, 하루의 이야기들이 하나씩 줄을 채워나가면서 온전한 하루가 됩니다. 그렇게 우리의 배열도 처음엔 작았지만, 필요한 것들이 하나씩 더해져 가면서 의미 있는 목록이 되어갑니다.push라는 기능은 참 정직한 이름을 가지고 있습니다. 영어로는 '밀어넣다'라는 뜻이지요. 마치 서랍 안에 물건을 정리할 때, 빈 공..

📘 7.1.3 인덱스로 꺼내기 - 정확한 자리에서 정보 찾기안녕하세요, 여러분. 이제 배열을 만들고 정보를 넣는 방법을 배웠으니, 이번에는 배열에서 원하는 정보를 정확하게 꺼내는 기술을 익혀볼 차례입니다. 마치 도서관에서 도서 번호를 보고 원하는 책을 조용히 찾아내거나, 아파트에서 호수 번호를 보고 친구 집을 자연스럽게 찾아가는 것처럼, 배열에서도 인덱스를 사용해서 원하는 자리의 정보를 정성스럽게 꺼낼 수 있습니다.인덱스는 배열의 각 자리를 구분하는 특별한 주소와 같습니다. 이 주소를 잘 활용하면 배열의 어떤 자리든 자유자재로 접근할 수 있고, 나중에 배울 반복문과 함께 사용하면 배열의 모든 정보를 차례차례 처리하는 아름다운 일도 할 수 있어요. 오늘은 이런 인덱스의 활용법을 차근차근 알아보겠습니다.?..