스터디7 자바스크립트 논리 연산자 정리 자바스크립트의 논리 연산자 자바스크립트에는 세가지 논리 연산자가 있다. - && (and), || (or), ! (not) - 피연산자로 모든 타입의 값을 받을 수 있고, 연산 결과도 모든 타입이 될 수 있다. 논리 연산자 사용 Boolean형 피연산자 다른형의 피연산자 || (OR) a || b a, b 하나라도 true이면 true 둘다 false이면 false 첫번째 truthy를 반환 없을 경우 마지막 피연산자를 반환 - 피연산자를 boolean형으로 변환 후 연산한다. - 반환시 형변환전 원래 값으로 반환한다. - 단락 평가를 진행함(반환 직후 평가 중단됨) && (and) a && b a, b 모두 참일때 true 둘 중 하나라도 false이면 false 첫번째 falsy를 반환 없을 경우 마.. 2022. 11. 9. DOM 노드 탐색 프로퍼티의 비교 (childNodes vs. children) DOM 노드란? 문서 객체 모델(DOM, Document Object Model)을 구성하는 객체 - 모든 HTML 태그는 객체로 노드이다. - 요소내의 문자, 공백, 개행 등의 특수 문자는 모두 텍스트 노드이다. [주요 노드 타입] - document node(문서 노드) : DOM의 진입점이 된다. - element node(요소 노드) : HTML 태그에서 만들어 진다. DOM 트리를 구성한다. - text node(텍스트 노드) : 텍스트를 포함하는 노드이다. - comment node(주석 노드) : 주석 노드로, 화면에 보이지는 않으나 주석 노드도 DOM으로부터 정보를 읽을 수 있다. DOM 노드 탐색하기 이러한 노드는 프로퍼티로 탐색하거나 수정할 수 있다. 그 중 주요 탐색 프로퍼티를 비교해.. 2022. 11. 9. [스터디] JavaScript Proxy Proxy Proxy 의 사전적 정의는 대리인, 대용물이다. 자바스크립트에서의 Proxy도 대리인처럼, 특정 객체를 감싸 객체에 가해지는 작업을 중간에 가로채고 재정의 한다. 문법 let p = new Proxy(target, handler) Proxy: proxy객체 생성자 target : proxy할 원본 객체로 함수, 클래스, 다른 프록시 등 모든 객체 가능 handler : 동작을 가로채는 메서드인 '트랩(trap)'이 담긴 객체, 여기서 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의한다. 즉, 여기서 proxy 설정을 한다. 트랩이 없는경우, target에 작업이 수행된다. 트랩이 있는 경우, 트랩이 실행되어 proxy가 작업을 처리한다. 사용하기 트랩의 역할 JS의 객체에 작업을 하면.. 2022. 10. 25. [스터디] 자바스크립트 모듈 모듈이란? 자바스크립트로 개발하는 애플리케이션이 커지면서, 파일을 분리하여 사용하게 되었고, 이 때 분리된 파일을 모듈이라고 한다. 즉, 클래스 하나/ 복수의 함수로 구성된 라이브러리 하나로 구성된 파일이라고 보면 된다. 역사 이전에는 자바스크립트 자체적으로 모듈 시스템을 지원하지 않아서 아래의 모듈 시스템들이 사용되었었다. AMD CommonJS UMD 2015년, 모듈 시스템이 표준으로 등재되었고, 아래에서 모듈을 사용하는 방법을 소개하도록 하겠다. 모듈 내보내기 / 가져오기 모듈은 export / import 지시자를 통해서 내보내고 가져올수 있다. 그 방법은 개체가 여러개일때와 한개일때의 경우로 나눠서 소개하겠다. 1. 여러개의 함수가 있는 라이브러리 형태의 모듈 1.1 내보내기 1) 선언부 앞.. 2022. 10. 19. 자바스크립트의 에러 (에러객체 / try...catch) 자바스크립트에서 에러가 발생하면, 스크립트가 즉시 중단되고 콘솔에 에러가 출력된다. Error 객체 런타임 오류 발생시 JS는 에러 객체를 생성하고 이를 던진다. 에러 객체에는 에러에 대한 상세 내용이 담겨있다. 1. 생성자 Error( ) - new Error( ) - 매개변수로 message, fileName, lineNumber를 넣을수도 있다.(옵셔널) - 함수로 호출할 수도 있다. 2. 인스턴스 속성 name - 오류 타입 설명을 위한 이름 (초기값: Error) message - 오류 메시지, 사람이 읽을 수 있는 오류 설명 stack - 스택 추적을 위한 비표준 속성 - 디버깅 목적으로 주로 사용됨 3. 오류 타입 name 설명 SyntaxError 문법적으로 유효하지 않는 코드 해석시 발생.. 2022. 10. 11. [스터디/퀴즈] Class 학습 후 확인을 위해 문제를 만들어 보았다. 정답 및 해설은 더보기에 작성하였다. 1. 다음 코드에서 console에 출력되는 것은? class Student { constructor(name) { this.name = name; } test() { console.log(`${this.name}은/는 시험을 봅니다`); } } console.log(typeof Student); 정답 및 해설 ▼ 더보기 정답: function 클래스는 함수이다. 2. 위의 코드에서 새로운 Student 인스턴스를 생성하기 위해 아래의 코드를 작성하였으나, 에러가 발생하였다. 에러 없이 인스턴스를 생성되도록 하려면 어떻게 수정해야 할까? const Potter = Student('Potter'); 정답 및 해설 ▼ 더보기 .. 2022. 10. 3. 헷갈리는 자바스크립트 문자열/배열의 메서드 정리 자바스크립트(JavaScript)의 문자열과 배열의 주요 메서드(method)들을 비교 정리해보았다. 메서드가 아닌 것 : length 프로퍼티 - length : property로 ( ) 없이 사용한다. - 배열의 length : 배열 내 요소 개수가 아닌 가장 큰 인덱스 + 1 이다. 문자열 메서드 비교 정리 기능 요약 메서드 / 구문 설명 반환값 원본 변경 음수 인자 응용 / 기타 문자 추출 str[idx] - idx: index index가 idx인 문자를 추출한다. 추출한 문자 X 빈문자열 반환함 - 현재 더 많이 사용 - 위치에 글자 없으면 undefined 반환함 str.charAt(idx) - idx: index - 위치에 글자가 없는경우 빈문자열 반환함 부분 문자열 찾기 str.index.. 2022. 9. 14. 이전 1 다음
