본문 바로가기
반응형

JavaScript 기초23

[JavaScript] element.childNodes, element.children, Node.contain 오늘은 element.childNodes, element.children, Node.contain에 대해서 공부했다. 동적으로 생성한 html 요소를 조회하는데 유용한 기능들이었다. element.childNodes 는 주어진 요소의 자식 노드 모음( collection )을 반환해주고, element.children은 호출된 요소의 모든 자식 노드의 elements를 담고있는 실시간 HTMLCollection을 반환한다. (비 요소 노드 제외) childNodes와 children의 역할이 헷갈려서 둘의 차이를 알아봤는데 childNodes의 경우 요소가 아닌 비 요소 노드도 포함해주는 반면, element.children은 요소 노드만 배열 형태로 반환해준다. (HTML DOM은 노드(node)라고 .. 2020. 10. 5.
[JavaScript] apply(), call(), bind()와 this 키워드 오늘은 .apply(), .call(), .bind() 함수와 this 키워드에 대해서 알아보았다. apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출해준다. call()과 기능이 거의 동일하지만 call()은 인수 목록을 받는 반면에 apply()는 인수 배열 하나를 받는다. bind() 메서드는 호출되면 새로운 함수를 생성한다. bind()의 첫 인자는 this 키워드로 설정하고, 이어지는 인자들은 바인드 된 함수의 인수에 제공된다. 여기서 this는 함수가 실행되는 동안 자동적으로 생성되는 특수한 식별자로 함수의 범위를 나타낸다고 보면된다. (또는 부모 객체) 설정이 안 되어있는 경우 기본적으로는 window 객체를 가리킨다고 한다... 2020. 10. 1.
[JavaScript] Array.prototype.sort() 배열 내장함수 - 정렬 오늘은 배열의 내장 함수 중 sort()에 대해서 알아보았다. sort() 함수를 이용해 배열의 요소들을 쉽게 정렬할 수 있는데 , 기본으로는 오름차순으로 정렬해준다. 또한 sort()함수의 인자로 function을 넣어주면 원하는 형태로 정렬이 가능하다. let array = [1, 4, 2, 5, 3, 6, 7]; array.sort(); // [1, 2, 3, 4, 5, 6, 7]; function compareReverse(a, b){ return b - a; // b - a 값이 양수인지 판별하여 b를 a보다 낮은 색인으로 정렬 (내림차순 정렬) // return a -b; -> a-b값이 음수인지 판별하여 a를 b보다 낮은 색인으로 정렬 (오름차순 정렬) // 만약 a === b 이면 a - .. 2020. 10. 1.
[JavaScript] 배열의 기초 2 - 배열의 내장함수들과 내장 고차 함수 오늘은 배열을 다루면서 각종 내장 함수들을 공부했다. 내장 함수들을 리턴하는 고차 함수를 공부했는데 고차 함수란 함수를 인자로 받거나 함수를 리턴하는 함수들을 뜻한다. 그런데 자바스크립트에서는 내장 고차함수들이 있었고 그 쓰임새가 다양하였다. 잘 알아두면 여러가지로 사용이 가능할 것 같아서 정리해보았다. 1. Array.prototype.filter() Array의 내장 함수인 filter를 이용하면 filter의 인자 값으로 들어오는 함수를 적용하여 true, false를 반환하는데 (적어도 filter는 true, false를 반환하길 기대한다고 한다. ) true로 반환된 요소들만 새로운 배열로 반환해준다. const nums = [1, 2, 3, 4, 5, 6, 7]; const result = .. 2020. 9. 26.
반응형