JavaScript 5

[JavaScript] 재귀 😵‍💫

재귀 호출(recursive call) 함수가 자기 자신을 호출하는 행위 재귀 함수 재귀 호출을 수행하는 함수 function recursive(input1, input2, ...) { // base case : 문제를 더 이상 쪼갤 수 없는 경우 if (문제를 더 이상 쪼갤 수 없을 경우) { return 단순한 문제의 해답; } // recursive case : 그렇지 않은 경우 return 더 작은 문제로 새롭게 정의된 문제; } ☄️ 재귀 함수 유의 사항 1. 재귀 호출은 반드시 멈춰야 한다 2. 재귀 호출로 문제를 간단하게 해결할 수 있을 때만 사용한다 호출된 각각의 재귀 함수는 다른 메모리 영역을 사용한다. 따라서 호출된 횟수만큼 메모리 소비량이 늘어난다. 반복문을 재귀 함수로 표현할 수 있..

JavaScript 2023.02.17

[JavaScript] 원시 자료형과 참조 자료형

✔️ 기본 개념 - 변수 : '변할 수 있는 무언가(데이터)' - 식별자 : 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명 ✔️ 데이터 타입의 종류 - 기본형(Primitive type) : Number, String, Boolean, null, undefined, Symbol - 참조형(Reference type) : Object(Array, Function, Date, RegExp(정규표현식), Map, WeakMap, Set, WeakSet) ✔️ 데이터 할당 - 기본형 기본형 데이터는 모두 불변값 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역의 메모리이다. (새로운 값이 할당되면 새로운 값을 넣은 데이터 영역을 만들고, 변수 영역의 값은 다른 주소를 가리킨다.) let a =..

JavaScript 2023.01.02

[JavaScript] HTML 요소의 내용을 읽고 쓰기 | textContent와 innerText 프로퍼티 📝

👩‍💻 textContent 요소의 내용을 웹 페이지에 표시했을 때 텍스트 정보를 표시 👨‍💻 innerText HTML 요소의 내용을 가리키며, 요소 안의 코드를 읽거나 쓸 수 있음 [textContent와 innerText 비교] 1) console.log(document.getElementById("test").innerHTML); 콘솔 창에 hi console.log(document.getElementById("test").textContent); 콘솔 창에 hi 2) document.getElementById("test").innerHTML=`JavaScript`; 웹 페이지에 JavaScript document.getElementById("test").textContent=`JavaScript..

JavaScript 2022.10.27

[JavaScript] 이벤트 리스너 | addEventListener 메서드 📝

🔔 addEventListener 메서드 이벤트가 발생했을 때 처리를 할 함수를 가리킴 같은 요소의 이벤트의 같은 이벤트에 이벤트 리스너를 여러 개 등록할 수 있음! 💻 addEventListener 메서드 DOM객체.addEventListener("이벤트명", 이벤트가 발생했을 때 실행할 함수, 이벤트 단계); [이벤트명] click 마우스로 클릭했을 때 dblclick 마우스로 더블클릭했을 때 mousedown 마우스 버튼을 눌렀을 때 mouseup 마우스 버튼에서 손가락을 떼었을 때 mouseover 마우스 포인터가 HTML 요소에 놓여 있을 때 mouseout 마우스 포인터가 HTML 요소를 벗어났을 때 mousemove 마우스 포인터가 HTML 요소 위에서 움직일 때 keydown 키보드의 키를..

JavaScript 2022.10.26

[JavaScript] HTML 노드 객체 가져오기 📝

1. id 속성으로 노드 가져오기 document.getElementById("id 이름"); 2. 요소의 이름으로 노드 가져오기 document.getElementsByTagName("태그명"); Elements (복수형)임에 주의! getElementsByTagName 메서드는 NodeList 객체를 반환 HTML 문서 안의 모든 태그 요소를 담아서 반환할 때에는 *를 사용해준다. let allElements = document.getElementsByTagName("*"); 3. class 속성 값으로 노드 가져오기 document.getElementsByClassName("클래스 이름"); 특정 class 속성 값을 가지는 요소들을 NodeList 객체로 반환 4. name 속성 값으로 노드 가져..

JavaScript 2022.10.26