지식루프

📌 JavaScript 배열의 기본 메서드 정리JavaScript의 배열(Array)은 여러 개의 데이터를 저장하고 조작할 수 있는 다양한 메서드(method) 를 제공합니다. 아래에서 자주 사용되는 배열 메서드 15가지를 설명해드리겠습니다.✅ 배열 요소 추가 및 제거 메서드1️⃣ push(요소) - 배열 끝에 요소 추가배열의 끝에 새로운 요소를 추가합니다. let arr = ["a", "b"];arr.push("c"); console.log(arr); // ["a", "b", "c"]2️⃣ pop() - 배열 끝 요소 제거 & 반환배열의 마지막 요소를 제거하고 그 값을 반환합니다. let arr = ["a", "b", "c"];let removed = arr.pop();console.log(arr);..

❌ arguments는 배열이 아니므로, 일반적인 배열 메서드(map, forEach, filter 등)를 직접 사용할 수 없다.✅ 하지만 배열로 변환하면 사용할 수 있다. 1️⃣ arguments는 배열이 아닌 유사 배열 객체 (Array-like Object) 📌 즉, arguments는 length 속성이 있고, 인덱스를 통해 접근 가능하지만, 배열(Array)이 아니다!  2️⃣ 배열 메서드 사용 불가능한 예시  📌 에러 발생! → arguments.map is not a function이유: arguments는 배열이 아니라서 map()을 직접 사용할 수 없음. 3️⃣ arguments를 배열로 변환하는 방법 (배열 메서드 사용 가능하게 만들기)✅ arguments를 배열로 변환하면 map,..

상황 이해하기먼저 두 개의 코드를 비교하며 문제를 살펴보겠습니다.1. 문제 코드무슨 일이 일어나는지?countdown 변수에 함수가 할당됩니다. 이 함수는 재귀적으로 countdown(n - 1)을 호출해 카운트다운을 수행합니다.myFunction에 countdown을 복사합니다. 이때 myFunction은 countdown이 가리키는 함수를 참조하게 됩니다.countdown = null로 설정하면, countdown 변수가 더 이상 함수를 가리키지 않고 null을 가리키게 됩니다.myFunction(5)를 호출하면 함수가 실행되면서 countdown(n - 1)을 호출하려고 하지만, countdown은 이미 null이 되었기 때문에 "countdown is not a function"이라는 TypeEr..

자바스크립트에서 함수 선언(Function Declaration)과 함수 표현식(Function Expression)은 함수를 정의하는 두 가지 주요 방식입니다. 이 둘은 비슷해 보이지만 몇 가지 중요한 차이점이 있습니다. 1. 정의 방식함수 선언 (Function Declaration)형태: function 키워드로 시작하며, 함수 이름이 필수적으로 명시됩니다.예시 함수 표현식 (Function Expression)형태: 함수를 변수에 할당하는 방식으로 정의합니다. 함수는 익명 함수(이름이 없는 함수)일 수도 있고, 이름을 가질 수도 있습니다.예시함수 표현식은 함수를 생성한 후 변수에 할당하는 방식입니다. 함수 자체는 익명일 수 있지만, 변수 이름으로 호출합니다. 2. 호이스팅(Hoisting) 동작의..

아래 코드를 실행했을 때 콘솔에 출력되는 결과로 올바른 것은?  console.log(age);var age = 3;console.log(age);  1번ReferenceError 2번   33 3번undefined3 4번null3    [정답] 3번- ES2015 이전에 변수를 만들 때 사용했던 var 키워드는 선언 부분이 호이스팅이 되는 특징 때문에, 선언을 한 부분 이전에 사용을 할 수도 있음.- 단, 선언과 동시에 값을 할당하면, 할당된 값은 선언 이후에 사용할 수가 있는데요. 결과적으로 2번 줄에서 할당한 3은 2번 줄 이후부터 유효하기 때문에 1번 줄에서는 선언 부분만 호이스팅 되어서 undefined 값이 출력되고, 3번 줄에서는 값이 할당된 3이 출력됨.   *참고 : 호이스팅은 자바스크립..

🔍 classList란?classList는 JavaScript에서 HTML 요소의 클래스를 조작할 수 있도록 해주는 속성입니다.즉, HTML 요소의 class 속성을 쉽게 추가, 제거, 토글할 수 있도록 해주는 객체입니다.📌 classList의 주요 메서드 이걸 왜 쓰는 것일까?  CSS에 미리 특정 상황이 되었을 때의 양식변화를 작성한 후, JS에서 클래스를 조건에 따라 추가했다가 삭제를 함으로써, 화면상의 이미지를 움직이게 하는 효과를 낼 수 있습니다.  아래는 마우스를 클릭함에 따라 깃발이 위로 올라갔다가 내려가게 하는 JS 예시입니다.  아래는 css 파일입니다.   이런식으로 하면 .up 상태가 될 때 이미지가 움직이고, 아닐 때에는 다시 원래자리로 복귀하여, 마우스 클릭시마다 깃발이 움직이..

도널드 트럼프 전 미국 대통령이 최근 캐나다가 미국의 51번째 주가 되기를 바란다는 발언을 반복하며 화제가 되고 있다. 이는 단순한 농담으로 치부하기에는 그 구체성과 진지함이 점점 더 두드러지고 있다. 트럼프는 자신의 소셜미디어 플랫폼 '트루스 소셜'을 통해 "캐나다가 우리의 소중한 51번째 주가 되는 것이 유일하게 말이 되는 해법"이라며, "그렇게 된다면 모든 관세와 기타 문제들이 완전히 사라질 것"이라고 주장했다. 심지어 캐나다 당국자들마저 이를 진지한 위협으로 받아들이고 있으며, 캐나다인들 사이에서는 반미 감정이 고조되고 있다는 보도도 나오고 있다. 이는 트럼프의 비즈니스맨적 사고방식이 정치적 리더십과 결합될 때 어떤 결과가 초래되는지를 보여주는 대표적인 사례로 평가된다. 본 글에서는 트럼프의 최근..

1. innerHTML선택한 요소의 내부 HTML 콘텐츠를 가져오거나 설정할 때 사용합니다.즉, 태그 내부의 내용을 조작하는 역할을 합니다.기존의 내용을 변경할 수도 있고, 새로운 HTML 요소를 삽입할 수도 있습니다.  2. outerHTML선택한 요소 자체를 포함한 전체 HTML을 가져오거나 변경할 때 사용합니다.즉, 해당 요소 자체를 완전히 새로운 HTML로 대체할 수도 있습니다. 정리즉, innerHTML은 내부 콘텐츠만 바꾸고, outerHTML은 요소 자체를 바꿉니다.

이벤트 핸들러를 등록하는 2가지 방법 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기 HTML 태그의 onclick 속성에 바로 표시하기

자바스크립트에서 이벤트(event), 이벤트 핸들링(event handling), 그리고 이벤트 핸들러(event handler)는 웹 페이지에서 사용자 상호작용을 다루는 핵심 개념이에요. 하나씩 자세히 설명해볼게요.1. 이벤트(Event)란?이벤트는 사용자나 브라우저가 발생시키는 특정 행동이나 상태 변화를 의미해요. 예를 들어, 버튼을 클릭하거나, 키보드를 누르거나, 페이지가 로드되는 등의 상황이 이벤트예요.이벤트의 예사용자 행동: click (클릭), keydown (키 누름), mouseover (마우스 올림).브라우저 상태: load (페이지 로드 완료), resize (창 크기 변경), scroll (스크롤).폼 관련: submit (폼 제출), change (입력값 변경).이벤트 객체이벤트가 ..