언어/JavaScript (18) 썸네일형 리스트형 자바스크립트 객체(Object) 객체가 무엇인가요? 서랍장을 상상해보세요. 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어있는 이름표는 객체의 키라고 생각하세요. 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있습니다. 객체의 구성요소는? 중괄호를 이용해 만듭니다. 중괄호 안에는 key: value 쌍으로 구성된 property를 여러개 넣을 수 있습니다. key는 문자형, value엔 모든 자료형이 들어갈 수 있습니다. property key 는 property name이라고도 부릅니다. 객체 어떻게 만들어요? let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 리터럴과 프로퍼티 중괄호 안에는 key: value 쌍으로 구성된 property가 들어갑니다. pro.. 프로토타입 코어자바스크립트를 필사했습니다. 프로토타입 상속 개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 생깁니다. 사람에 관한 프로터티와 메서드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 가정해봅시다. 이때 "user의 메서드를 복사하거나 다시 구현하지 않고 user에 약간의 기능을 얹어 admin과 guest 객체를 만들 수 있지 않을까?"라는 생각이 들겁니다. 자바스크립트 언어의 고유 기능인 프로토타입 상속(prototypal inheritance)을 이용하면 위와 같은 생각을 실현할 수 있습니다. [[Prototype]] 자바스크립트의 객체는 명세서에서 명명한 [[Prototype]]이라는 숨김 프로퍼.. 함수 바인딩 코어자바스크립트를 필사한 것입니다. 사라진 this 객체 메서드를 콜백으로 전달할 때 this 정보가 사라지는 문제가 생긴다. 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다. let user = { firstName: "John", sayHi() { alert(`Hello, ${this.firstName}!`); } }; setTimeout(user.sayHi, 1000); // Hello, undefined! this.firstName이 "John"이 되어야 하는데, 얼럿 창엔 undefined가 출력된다 이렇게 된 이유는 setTimeout에 객체에서 분리된 함수인 user.sayHi가 전달되기 때문이다. 위 예시의 마지막 줄은 다음 코드와 같다. let f = us.. DOM 인터페이스와 테스팅 mdn을 필사한 것입니다. DOM interface 이 문서는 objects와 DOM에서 조작가능한 것들에 대해 설명하고 있다. 사람들은 HTML FORM element가 HTMLFormElement interface로부터 name property를 얻고, className property는 HTMLElement interface로 부터 얻는 것에 대해 별로 관심이 없는 것 같다. 두 가지 경우 모두, property는 form object 안에 있는 것이다. 하지만 DOM 안에 구현된 objects와 interfaces 사이의 관계는 혼동될 수 있다. 이 섹션에서는 DOM specification 안의 실제 interfaces와 그들을 어떻게 활용할 수 있는지에 대해 살펴보도록 하자. Interface.. DOM MDN을 필사한 것입니다. DOM 이란? 문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라.. Document Document Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. DOM 트리는 와 및 여러 다른 요소를 포함합니다. Document는 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공합니다. Document 인터페이스는 모든 종류의 문서에 대한 공통의 속성과 메서드를 묘사합니다. 문서의 유형(HTML, XML, SVG 등)에 따라서 더 다양한 API가 존재합니다. 메서드 Document.createAttribute() 새로운 Attr 객체를 생성하고 반환합니다. Document.createElement() 주어진 태그명을 사용해 새로운 요소를 생성합니다. Document.createEvent(.. Node.js로 입력값 받기 Readline readline 모듈은 process.stdin 등의 읽을 수 있는 스트림으로부터 데이터를 읽는데 필요한 인터페이스를 제공한다. 다음을 사용함으로써 접근할 수 있다. const readline = require('readline'); 다음은 기본적인 사용 예시이다. const readline = require('readline'); const rl = redline.createInterface({ input: process.stdin, output: process.stdout }); rl.question('What do you think of Node.js? ', (answer) => { // TODO: Log the answer in a database console.log(`Thank.. Array.from() MDN Web Docs를 그대로 필사한 포스팅입니다. Array. from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만듭니다. console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] 구문 Array.from(arrayLike[, mapFn[, thisArg]]) 매개변수 arrayLike 배열로 변환하고자 하는 유사배열 객체나 반복 가능한 객체 mapFn [Optional.. 이전 1 2 3 다음
