자바스크립트 코딩 일기

오늘은 수업을 배우면서 어려웠던 내용을 다시 한번 복습하겠습니다.

자바스크립트 요소(Element) 객체는 HTML 요소를 나타내는 객체입니다. 이 객체를 사용하여 HTML 요소의 속성, 스타일, 클래스 등을 변경하거나 이벤트를 처리할 수 있습니다. 요소 객체는 다음과 같은 속성과 메서드를 가지고 있습니다.

속성

• id: 요소의 고유 식별자를 나타냅니다.
• className: 요소의 클래스 이름을 나타냅니다.
• innerHTML: 요소의 내부 HTML 코드를 나타냅니다.
• outerHTML: 요소의 외부 HTML 코드를 나타냅니다.
• textContent: 요소의 내부 텍스트를 나타냅니다.
• value: 입력 요소의 값(value)을 나타냅니다.
• style: 요소의 스타일을 나타내는 객체입니다.
• attributes: 요소의 속성을 나타내는 NamedNodeMap 객체입니다.
• parentElement: 요소의 부모 요소를 나타내는 객체입니다.
• childNodes: 요소의 자식 노드를 나타내는 NodeList 객체입니다.

메서드

• querySelector(): CSS 선택자를 사용하여 요소를 선택합니다.
• querySelectorAll(): CSS 선택자를 사용하여 여러 요소를 선택합니다.
• getAttribute(): 요소의 속성 값을 가져옵니다.
• setAttribute(): 요소의 속성 값을 설정합니다.
• removeAttribute(): 요소의 속성을 제거합니다.
• appendChild(): 자식 노드를 요소에 추가합니다.
• removeChild(): 자식 노드를 요소에서 제거합니다.
• addEventListener(): 요소에 이벤트를 등록합니다.
• removeEventListener(): 요소에 등록된 이벤트를 제거합니다.

요소 메서드 : 선택자 : document.querySelector() : 요소 선택자
요소 메서드 : 선택자 : document.querySelectorAll() : 모든 요소 선택자
요소 메서드 : 선택자 : document.getElementById() : 아이디 요소 선택자
요소 메서드 : 선택자 : document.getElementsByClassName() : 클래스 요소 선택자
요소 메서드 : 선택자 : document.getElementsByTagName() : 클래스 요소 선택자
요소 메서드 : 텍스트 : element.innerText() : 요소 텍스트 설정하기
요소 메서드 : 텍스트 : element.textContent() : 요소 텍스트 설정하기
요소 메서드 : 텍스트 : element.innerHtml() : 요소 텍스트(태그포함) 설정하기
요소 메서드 : 텍스트 : element.outerHtml() : 요소 텍스트(태그포함, 자식포함) 설정하기
요소 메서드 : 클래스 : element.classLIst.add() : 클래스 추가하기
요소 메서드 : 클래스 : element.classLIst.remove() : 클래스 삭제하기
요소 메서드 : 클래스 : element.classLIst.toggle() : 클래스 추가/삭제하기
요소 메서드 : 클래스 : element.classLIst.contains() : 클래스 존재 여부 확인
요소 메서드 : 클래스 : element.style.속성명 : CSS 스타일 설정
요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로값(마진/보더 미포함)
요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 세로값(마진/보더 미포함)
요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축 값(부모 기준)
요소 속성 : 크기 및 위치 : element.clientleft : 요소의 X축 값(부모 기준)
요소 속성 : 크기 및 위치 : element.offsetWIdth : 요소의 가로 값(보더/패딩 포함)
요소 속성 : 크기 및 위치 : element.offsetHeight : 요소의 세로 값(보더/패딩 포함)
요소 속성 : 크기 및 위치 : element.offsetTop : 요소의 Y축 값(문서 기준)
요소 속성 : 크기 및 위치 : element.offsetLeft : 요소의 X축 값(문서 기준)
요소 메서드 : 크기 및 위치 : element.getBoundingClientRect : 요소의 크기 및 위치 값을 설정

 

자바스크립트 배열(Array) 객체는 여러 개의 값을 저장하고 관리하기 위한 객체입니다. 이 객체를 사용하여 데이터를 저장하고, 추가하거나 삭제하며, 검색하거나 정렬할 수 있습니다. 배열 객체는 다음과 같은 속성과 메서드를 가지고 있습니다.

메서드

• push(): 배열의 끝에 하나 이상의 요소를 추가합니다.
• pop(): 배열의 끝에서 요소를 제거하고 반환합니다.
• shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.
• unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가합니다.
• concat(): 두 개 이상의 배열을 결합합니다.
• join(): 배열의 모든 요소를 문자열로 변환합니다.
• slice(): 배열의 일부를 추출하여 새로운 배열을 만듭니다.
• splice(): 배열에서 요소를 추가하거나 삭제합니다.
• reverse(): 배열의 요소를 역순으로 바꿉니다.
• sort(): 배열의 요소를 정렬합니다.
• indexOf(): 배열에서 지정된 값과 일치하는 첫 번째 요소의 인덱스를 반환합니다.
• lastIndexOf(): 배열에서 지정된 값과 일치하는 마지막 요소의 인덱스를 반환합니다.
• forEach(): 배열의 각 요소에 대해 지정된 함수를 실행합니다.
• map(): 배열의 각 요소에 대해 지정된 함수를 실행하고, 새로운 배열을 반환합니다.
• filter(): 배열에서 지정된 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환합니다.
• reduce(): 배열의 모든 요소를 하나의 값으로 줄입니다.

 

* map() 메서드와 forEach() 메서드의 차이점

자바스크립트에서 map()과 forEach() 메서드는 배열 객체의 각 요소에 대해 반복 작업을 수행하는 데 사용됩니다. 그러나 두 메서드 간에는 몇 가지 차이가 있습니다.

forEach()는 배열의 각 요소에 대해 주어진 함수를 실행하고, 반환값을 사용하지 않습니다. map()은 배열의 각 요소에 대해 주어진 함수를 실행하고, 각 요소의 반환값으로 새로운 배열을 생성합니다. 즉, map()은 새로운 배열을 반환하며, 기존 배열은 변경하지 않습니다.

다음은 간단한 예제를 사용하여 두 메서드의 차이를 보여줍니다.

const numbers = [1, 2, 3, 4, 5];

// forEach 메서드 사용 예제
numbers.forEach(num => console.log(num * 2));
// 출력 결과: 2 4 6 8 10

// map 메서드 사용 예제
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers);
// 출력 결과: [2, 4, 6, 8, 10]

위 예제에서 forEach()를 사용하여 배열의 각 요소를 2배로 만들었지만, 새로운 배열을 반환하지 않았습니다. 반면에 map()을 사용하여 각 요소를 2배로 만들고, 이를 새로운 배열로 반환했습니다.

따라서, 만약 배열의 요소를 변경하고 싶지 않고 각 요소에 대해 수행할 작업이 부수 효과(side effect)만 있는 경우에는 forEach()를 사용하면 됩니다. 하지만 새로운 배열을 생성하고 싶은 경우에는 map()을 사용해야 합니다.

 

 

자바스크립트에서, 모든 객체는 prototype 이라는 속성을 가집니다. 이 속성은 해당 객체를 생성하는데 사용된 생성자(constructor) 함수의 prototype 객체를 참조합니다.

prototype 객체는 해당 생성자 함수로부터 생성된 모든 객체에서 공유되는 속성과 메서드를 정의하는데 사용됩니다. 이를 통해 객체 지향 프로그래밍의 상속 개념을 구현할 수 있습니다.

예를 들어, 다음은 Person 생성자 함수와 Person 객체의 prototype 속성을 사용하여 name 속성과 greet 메서드를 정의하는 방법입니다.

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log('Hello, my name is ' + this.name);
};

var person1 = new Person('John');
var person2 = new Person('Jane');

person1.greet(); // 출력: "Hello, my name is John"
person2.greet(); // 출력: "Hello, my name is Jane"

이 예제에서, Person 생성자 함수는 name 속성을 가진 객체를 생성합니다. 그리고 Person.prototype 객체를 사용하여 greet 메서드를 정의합니다. 이 greet 메서드는 Person 생성자 함수로부터 생성된 모든 객체에서 사용할 수 있습니다. 따라서 person1.greet()와 person2.greet() 모두 "Hello, my name is ..."와 같은 출력을 생성합니다.

이와 같은 방식으로, prototype을 사용하여 객체에 공유 속성과 메서드를 추가하고 상속 개념을 구현할 수 있습니다.