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

📘 9.2.3 bind로 this 고정하기 - 영원히 변하지 않는 연결여러분께 인사드려요. 지금까지 우리는 call과 apply라는 특별한 능력을 배웠어요. 둘 다 this를 원하는 객체로 바꿔서 기능을 실행하는 능력을 가지고 있었죠. 이제 this 기능의 마지막 단계인 bind를 만나볼 시간이에요.bind는 call과 apply와는 조금 다른 특별한 능력을 가지고 있어요. 바로 영원히 변하지 않는 연결을 만드는 기능이에요. 마치 두 마음이 하나로 연결되어 절대 떨어지지 않는 것처럼요.🧠 새로운 단어들과 친해지기this 기능의 최종 단계인 bind와 친해지기 전에, 새로운 말들을 먼저 차근차근 배워보겠어요.단어부드러운 설명bind 기능this를 특정 객체로 영원히 연결된 새로운 기능을 만들어내는 따뜻..

📘 9.2.2 apply로 this 바꾸기 - 배열로 정보를 전달하는 방법여러분께 인사드려요. 이전 시간에 call이라는 특별한 능력을 배웠죠? call로 this를 자유자재로 바꿀 수 있다는 것을 알게 되었어요. 이제 call의 쌍둥이 형제인 apply를 만나볼 시간이에요.apply는 call과 거의 같은 마음을 가지고 있지만, 한 가지 특별한 차이점이 있답니다. 바로 정보를 전달하는 방식이 다른 거예요. 마치 선물을 하나씩 건네는 것과 바구니에 정성스럽게 담아서 전하는 것의 차이와 같아요.🧠 새로운 단어들과 친해지기call의 쌍둥이 형제 apply와 친해지기 전에, 새로운 말들을 먼저 부드럽게 배워보겠어요.단어부드러운 설명apply 기능call과 같이 this를 바꿀 수 있지만, 정보들을 배열에 ..

📘 9.2.1 call로 this 바꾸기 - 도구를 빌려 쓰는 방법여러분에게 인사드려요. 지금까지 우리는 this라는 것이 마치 계절의 변화처럼 상황에 따라 스스로 모습을 바꾸는 것을 지켜보았죠. 넓은 세상에서는 window를, 어떤 작은 집 안에서는 그 집을, 새로운 생명이 태어날 때는 그 새로운 존재를 가리키며 말이에요.그런데 여러분, 만약 우리가 직접 this가 누구를 바라볼지 정할 수 있다면 어떨까요? 마치 우리가 스스로 계절을 선택할 수 있는 것처럼요. 그런 놀라운 힘을 가진 것이 바로 call이라는 이름의 친구랍니다.🧠 새로운 단어들과 친해지기this를 우리 마음대로 움직일 수 있는 새로운 방법을 배우기 전에, 먼저 필요한 말들을 차근차근 이해해보아요.단어부드러운 설명call 기능어떤 일을..

📘 9.1.3 생성자에서의 this - 객체 공장의 현명한 시스템어떤 날, 여러분이 레고 블록으로 같은 형태의 집을 여러 개 만들어야 한다고 상상해보세요. 하나하나 손으로 만들 수도 있지만, 더 좋은 방법이 있다면 어떨까요? 바로 같은 설계도를 가지고 여러 개를 만드는 것이죠.지금까지 우리는 this가 전역에서는 window를, 객체에서는 그 객체 자신을 가리킨다는 것을 배웠어요. 이제 this의 또 다른 능력을 발견할 시간이에요! 바로 생성자 함수라는 특별한 공간에서의 this입니다. 여기서 this는 마치 조립 로봇처럼 새로운 객체를 만들어내는 역할을 합니다.🧠 먼저 용어를 알아볼까요?새로운 개념을 배우기 전에, 중요한 용어들의 이름부터 알아보겠어요.용어의미생성자 함수똑같은 형태의 객체를 여러 개..

📘 9.1.2 객체에서의 this - 진짜 주인을 찾아라!어떤 날 아침, 여러분이 거울 앞에 서서 "나는 누구지?"라고 물어본 적이 있나요? 거울 속의 모습을 보며 "아, 이게 바로 나구나"라고 깨닫는 순간 말이에요.프로그래밍 세계에서도 비슷한 일이 일어나요. 이전 시간에 전역에서의 this가 window를 가리킨다는 것을 배웠죠? 이제 우리는 더욱 흥미로운 여행을 떠날 예정입니다. 바로 객체 안에서의 this 모험이에요.객체 안에서 this는 전역에서와는 완전히 다른 모습을 보여줍니다. 마치 카멜레온처럼 환경에 따라 변신하는 this의 신비로운 특성을 함께 탐험해보겠어요.🧠 먼저 용어를 알아볼까요?객체 안에서의 this 여행을 시작하기 전에, 새로운 친구들과 먼저 인사를 나눠보겠어요.용어의미객체에서..

📘 9.1.1 전역에서의 this - 코딩 세계의 '나'를 찾아서어떤 순간, 여러분이 넓은 운동장 한복판에 혼자 서 있다고 상상해보세요. 주위를 둘러보면서 "여기서 내가 누구지? 이곳의 주인은 누구지?"라고 궁금해하는 마음이 들지 않을까요?프로그래밍 세계에도 그런 순간이 있어요. 코드가 실행될 때 "지금 나는 어디에 있고, 누가 나를 관리하고 있지?"라고 궁금해하는 거죠. 그때 도움을 주는 특별한 키워드가 바로 this예요.this는 영어로 "이것", "여기"라는 뜻이지만, 자바스크립트에서는 훨씬 더 깊은 의미를 가져요. 마치 거울처럼 현재 상황을 정확히 반영해주는 똑똑한 친구랍니다.🧠 새로운 단어들과 친해지기새로운 개념을 배우기 전에, 서로 같은 말을 하고 있는지 확인해보는 게 중요해요.단어쉬운 설..

📘 8.3.3 예비값과 별명 사용하기 - 안전한 선물 받기와 예쁜 이름 짓기어떤 날은 선물을 받을 때 상자가 비어있을 수도 있고, 어떤 날은 선물의 이름이 너무 길거나 어려워서 부르기 힘들 수도 있어요. 그런 순간들을 생각해보세요. 생일날 친구가 준 선물 상자를 열었는데 비어있다면 얼마나 당황스러울까요? 아니면 "초고급멀티컬러워터프루프마카펜세트"라는 긴 이름을 매번 불러야 한다면 얼마나 번거로울까요?자바스크립트에서도 마찬가지예요. 때로는 객체나 배열에서 우리가 원하는 값이 없을 수도 있고, 속성의 이름이 너무 복잡할 수도 있죠. 오늘은 그런 상황들을 현명하게 대처하는 두 가지 방법을 배워볼 거예요.🧠 먼저 용어를 알아볼까요?사람들과 이야기할 때 서로 같은 말을 하고 있는지 확인하는 것이 중요하듯, 프..

📘 8.3.2 목록 한 번에 정리하기 - 줄 서 있는 친구들 순서대로 부르기어떤 오후였을까요. 여러분이 교실에서 친구들과 함께 앉아 있을 때, 선생님이 "줄을 서세요"라고 하시면 어떻게 하나요? 자연스럽게 한 줄로 서게 되죠. 그런데 생각해보세요. 그 줄에 서 있는 친구들을 각자의 자리로 배정하려면 어떻게 해야 할까요? 하나씩 하나씩 "첫 번째 친구는 이 자리, 두 번째 친구는 저 자리" 이렇게 해야 할까요?자바스크립트에도 이런 상황이 있어요. 배열이라는 줄에 여러 값들이 순서대로 서 있을 때, 그 값들을 하나씩 변수로 만들어야 하는 경우 말이에요. 오늘은 그런 일을 훨씬 더 쉽고 자연스럽게 할 수 있는 방법을 배워볼 거예요.🧠 먼저 용어를 알아볼까요?아이들과 이야기할 때도 서로가 같은 말을 하고 있..

📘 8.3.1 정보 상자 한 번에 정리하기 - 물건들을 한 번에 정리하는 방법소중한 여러분과 함께 하는 이 시간, 참으로 뜻깊습니다. 지금까지 우리는 정보 상자에서 보물들을 하나씩 꺼내는 방법을 배웠습니다. 학생.이름, 학생.나이 이런 식으로 점 표기법을 사용해서 말이지요.하지만 이번에는 정말 멋진 새로운 방법을 배울 것입니다. 바로 한 번에 여러 보물들을 각각의 상자에 정리하는 방법입니다. 마치 택배 상자를 열어서 안에 있는 모든 물건들을 한 번에 꺼내서 각각 알맞은 곳에 정리하는 것과 같습니다.🧠 먼저 용어를 알아볼까요?정보 상자 한 번에 정리하기를 이해하기 위해 필요한 용어들을 마음에 담아보겠습니다.용어의미상자 열어서 정리정보 상자를 열어서 각 부분을 따로 담는 편리한 방법정보 카드 나누기정보 ..

📘 8.2.2 목록 안에 정보 상자 넣기 - 여러 친구들의 정보 카드 정리하기여러분과 함께 하는 이 시간이 또 다른 깨달음의 순간이 되기를 바랍니다. 지난 시간에 우리는 한 상자 안에 여러 개의 보물 목록을 넣는 방법을 배웠습니다. 이번에는 반대로 여러 개의 정보 상자들을 줄세워서 관리하는 방법을 배울 것입니다.마치 우리 반 친구들의 정보 카드를 순서대로 정리해서 책으로 만드는 것과 같습니다. 각 카드(정보 상자)에는 친구의 이름, 나이, 취미 등이 적혀있고, 이 카드들을 순서대로 모아놓은 것(목록)이 우리의 친구 명단이 되는 것이지요.🧠 먼저 용어를 알아볼까요?목록 안의 정보 상자를 이해하기 위해 필요한 용어들을 마음에 담아보겠습니다.용어의미카드 목록목록의 각 칸에 정보 카드(정보 상자)가 들어있는..