Javascript
-
this개발/Javascript 2022. 2. 26. 20:22
크롬 브라우저 기준으로 설명하겠습니다. 자바스크립트에서의 this는 C++과 Java와는 조금 다릅니다. 이 둘 언어에서는 this 해당 변수나 함수를 소유하고 있는 클래스의 인스턴스를 의미합니다. 이 사실은 불변합니다. 하지만 자바스크립트에서는 함수가 일급 객체이기 때문에 상황에 따라서 this가 가리키는 객체가 달라질 수 있습니다. 여기서 말하는 상황이란 함수가 속하는 객체의 변화입니다. 해당 함수를 호출하는 경우와 생성자 함수로 활용해서 객체를 만들 때로 나뉩니다. 다음 코드를 보겠습니다. function Test() { this.name = 'kim'; console.log(this); } Test(); 무엇이 출력될까요? Test와 관련된 어떤 것? 다음이 결과입니다. 정답은 window 객체입..
-
firstChild vs firstElementChild개발/Javascript 2022. 1. 30. 02:42
위와 같은 DOM 구조가 있다고 할 때 ul은 div의 firstChild일까요 firstElementChild일까요? 이름에서 대략적으로 유추할 수 있듯이 firstElementChild입니다. 각 태그가 Element이거든요. firstChild의 경우 Element를 포함한 모든 Node를 가리킵니다. 와 사이에는 공백(whitespace)가 존재하며 공백은 #text 노드를 만들기 때문에 firstChild를 출력해보면 #text가 나타납니다.
-
split()개발/C·C++ 2021. 9. 11. 23:26
C#, Java, JavaScript에 있는 문자열 자르기 함수인 split()이 C++에는 없습니다. 필요하면 만들어 써야 합니다. 막상 급하게 필요할 때 문자열 함수가 익숙하지 않다면 생각보다 오래 걸릴 수 있습니다. 미리 만들어서 사용합시다. split() vector split(string s, string delim) { size_t off = 0; vector result; while (true) { size_t pos = s.find(delim, off); size_t count = pos - off; string str = s.substr(off, count); result.push_back(str); off += count + 1; if (0 == off) break; } return r..
-
[Design Pattern] Observer개발/C·C++ 2021. 5. 30. 20:19
옵저버 패턴에 대해 조금 더 깊게 알아야 한다면 다른 글을 참고해주세요. 혹은 GoF나 헤드퍼스트의 디자인 패턴 책을 보면 더욱 자세하고 정확한 설명을 읽을 수 있습니다. 옵저버 패턴은 관찰자(observer)와 관찰 대상(oberservable)이 존재합니다. 관찰자는 관찰 대상의 상태가 변경되면 통지를 받습니다. [헤드퍼스트 디자인 패턴]을 보면, 관찰 대상이 관찰자들에게 notify 함수를 통해 알려주는 부분이 나옵니다. 때문에 관찰자 클래스는 공통된 인터페이스를 상속받아 구현해야 하며, 관찰대상 클래스에서 관찰자를 동적 배열에 추가합니다. 관찰대상이 상태가 업데이트되면 배열에서 객체를 꺼내 필요한 함수를 호출해줍니다. 관찰 대상이 관찰자를 등록할 때 관찰자가 꼭 객체일 필요는 없습니다. 함수를 넣..
-
Arrow fuction expressions개발/Javascript 2021. 2. 28. 15:40
화살표 함수를 사용할 때 body 부분이 표현식(expression)일 경우에는 return을 붙이지 않아도 되지만 문장을 이룰 때는 return을 써야 한다. (param1, paramN) => expression param => { let a = 1; return a + param; } 객체를 반환할 때 객체 리터럴({})을 사용하면 되는데, 이 때 반드시 ()으로 감싸줘야 한다. param=>{bar:1} 으로 한다면 bar:1을 하나의 객체가 아니라 중괄호로 감싼 statement로 판단하기 때문이다. param=>({bar:1})
-
[sort] Array.prototype.sort()개발/Javascript 2021. 2. 16. 00:28
이 함수는 원본을 바꿉니다. 복사본이 만들어지지 않는다는 점을 유의해야 합니다. 매개변수로 compareFunction을 넣어주지 않으면 각 요소를 문자열로 바꾼 뒤에 비교하여 정렬합니다. 9와 80을 정렬하면 80이 9보다 먼저 나오게 됩니다. 숫자로 정렬하고 싶다면 compareFunction을 넣어줘야 합니다. compareFunction의 반환값에 따라서 정렬됩니다. compareFunction(a, b)이 0보다 작은 값을 반환하면 a를 b보다 낮은 색인으로 정렬합니다. compareFunction(a, b)이 0을 반환하면 서로에 대해 변경하지 않습니다. compareFunction(a, b)이 0보다 큰 경우 b를 a보다 낮은 색인으로 정렬합니다. b가 먼저 옵니다.
-
lastElementChild 프로퍼티개발/Web 2020. 5. 26. 17:36
번호 제목 작성자 테이블의 객체 정보를 table 변수에 얻고 table.lastElementChild.firstElement 프로퍼티의 값을 찍어보면 어떤 엘리먼트가 담길까? 코드만 보면 td가 나올 것 같지만 크롬 브라우저에서 개발자 모드를 켜고 확인해보면 생각과 다르다. tbody 태그가 추가되어 있어 console.log로 찍어보면 다음과 같은 결과가 나온다. td 태그에 텍스트를 넣는 것이기 때문에 구하려고 했던 태그가 아니다. tbody를 고려해서 td 태그를 얻어야 한다. 다음과 같이 해도 되고, var tbody = section.querySelector("table tbody"); var td = tbody.lastElementChild.firstElementChild; 아래처럼 해도 된..