[자바스크립트] 강의 복습 객체와 DOM 요소

참조타입

• 내장 객체와 랩핑
• 메소드 체이닝과 옵셔널 체이닝
• 프로토타입과 프로토타입 체이닝

 

내장 객체

자바스크립트에는 다양한 객체가 미리 생성되어져 있음 ex. Number, String, Boolean, console, window 등

내방 객체의 프로퍼티(특별히 함수형 프로퍼티인 메소드!)를 많이 알면 알수록 생산성이 좋아진닷.

 

1. Number 객체 : Number라는 함수를 통해 만들 수 있다. (숫자 형변환이 이 원리로 된 것)

                            자주 쓰이는 메서드 - toFixed

 

 

2. String 객체 : String이라는 함수를 통해 만들 수 있다. (문자 형변환이 이 원리로 된 것)                          

 

 

 

3. Array 객체 : 순회와 변형 작업을 수행하는 메서드를 갖고,

                        자바스크립트의 배열은 길이, 요소의 자료형도 고정되어 있지 않다.

 

 

 

 

 

 

Array 객체는 Array 안쪽을 순회해야 해서, callback 함수 패턴으로 작성된 메서드들이 많음 !

 

 

 

참고 내용.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN

sort() 메서드의 콜백함수가 양수를 리턴하는지, 음수를 리턴하는지에 따라 정렬 방식이 정해짐.

 

 

https://en.wikipedia.org/wiki/Sorting_algorithm#Stability

Sorting algorithm - Wikipedia

 

정렬 알고리즘은 stable (앞쪽의 아이템부터 비교) 하지 않을 수 있다.

알고리즘마다 다른데, js의 sort알고리즘은 stable하지 않다 ! 

 

 

 

 

clEX1. 다음과 같이 동작하도록 findAge 함수를 구현해보기(고차함수, 객체 복습)

 

arr.find( findAge( 'park' ) ).age;     // 35
arr.find( findAge( 'lee' ) ).age;        // 40

 

find 메서드는 함수를 매개변수로 받는 메서드, 인수로 아이템을 넣으니 아이템들이 순회하면 하나씩

콘솔로그 메서드로 출력되고 있다. 

 

arr.find(findAge('park')).age; 에서 find() 메서드는 함수를 인자로 받으므로

                                                          findAge()의 반환값도 함수여야 할 것이다 !

 

find() 메서드의 콜백함수가 true를 리턴한다면,

                                                  해당 아이템을 반환하고 find() 메서드를 종료한다 !!

 

 

예를 들면,

item이 3이면 true를 반환하게 하는 함수를 find() 메서드가 콜백함수로 갖게 되면,

item이 3일 때, true를 반환하면서 그 때의(true를 반환할 때) 아이템인 3을 반환하고 find() 메서드를 종료하게 되는 것이다.

 

그래서, 결과적으로 조건에 부합하는 아이템이 발견되면 발견 즉시, 그 아이템을 반환하고 종료되므로

결국 find 검색의 기능이 되는 것이다.

 

다시 문제로 돌아와서,

 

 

 

clEX2. 다음과 같이 동작하도록 findAge 함수를 구현해보기(String 객체 메서드 복습)

findAge('  kAng');    // 20
findAge('  LeE     ');    // 40

 

 

 

 

 

DOM

 

window

브라우저에서 이미 선언되어 있는 모든 자바스크립트 변수는 window에 담겨 있음

window. 은 생략 가능해서 보통 생략함 ex. window.document.body → document.body

 

document

html 전체를 가리키는 변수

body나 head 등의 element에 접근 가능

createElement를 통해 (동적으로) element 생성 가능

 

element

자바스크립트가 html 문서 태그를 파싱해 만들어 낸 자바스크립트 객체Number, String 등 메소드들을 배웠을 때와 마찬가지로, 많은 프로퍼티 및 메소드를 암기할수록 생산성 향상됨

 

 

append 할때, 부모요소를 body로 두니 사실 script 뒤에 두려고 의도한 것이 아니었는데,

body의 맨 마지막 요소로 추가된 것을 볼 수 있다.

강사님 설명으로는, script태그는 원래 바디나 헤드안에 있어야 하는데 그 밖에 있어 브라우저가 해석할 때 임의로 바디에 넣은 거라고. 나머지 하나 더의 스크립트는  VS Code 확장프로그램에 의한 것이라고 하셨는데, 이 부분에 대해서는 보충적인 이해가 필요한 듯!

 

 

 

DOM에서 classList를 통해서 className들을 확인할 수 있었는데,

클래스리스트의 인덱스로 접근하여 클래스 이름을 하나씩 볼 수 있었고 값도 인덱스로 접근하여 수정해보았는데,

클래스리스트를 다시 확인을 해보니 변경이 안되어 있었다 ! 왜지??

 

강사님께 질문해보니,

classList는 readOnly로, 몇몇 내장 객체의 프로퍼티가 그래서 값 할당이 불가능한 경우가 종종 있다고 한다 ! 오호, 그렇구나

그러때는 메소드를 활용해보라고 하셔서, 무슨 의미인가 하다가 아래와 같이

 

add() 메서드나 remove() 메서드로 클래스 이름이 추가되기도 하고 삭제되기도 하는 것을 확인할 수 있었다 !