본문 바로가기

분류 전체보기

 (39)
8.4 프로토타입 메서드와 __proto__가 없는 객체 프로토타입 메서드 ◾️ __proto__ 대신 사용 할 수 있는 모던한 메서드 Object.create(proto, [descriptors]) : [[Prototype]]이 proto를 참조하는 빈 객체를 만든다. 이 때, 프로퍼티 설명자를 추가로 넘길 수 있다. Object.getPrototypeOf(obj) : obj의 [[Prototype]]을 반환한다. Object.setPrototypeOf(obj, proto) : obj의 [[Prototype]]이 proto가 되도록 설정한다. let animal = { eats: true }; // 프로토타입이 animal인 새로운 객체를 생성 let rabbit = Object.create(animal); console.log(rabbit.eats); //..
8.3 네이티브 프로토타입 ◾️ 모든 내장 생성자 함수에서 prototype을 프로퍼티로 사용한다. Object.prototype let obj = {}; alert( obj ); // "[object Object]" ◾️ obj는 비어 있는데도 [object Object] 문자열을 출력한다. ◾️ obj = new Object()를 줄이면 obj = {}가 된다. ◾️ Object는 내장 객체 생성자 함수인데, 이 생성자 함수의 prototype은 toString을 비롯한 다양한 메서드가 구현되어있는 거대한 객체를 참조한다. ◾️ new Object()를 호출하거나 리터럴 문법 { ... }을 사용해 객체를 만들 때, 새롭게 정의된 객체의 [[Prototype]]은 Object.prototype을 참조한다. ◾️ obj.toSt..
Webpack Webpack_생할코딩을 보고 정리한 내용입니다. Webpack 수업소개 여러개의 리소스 파일(js, css, jpg)을 하나의 js 파일로 묶어주는 도구인 웹팩의 사용법을 소개해드리는 수업입니다. 웹팩은 이런 점에서 좋습니다. 여러개의 파일을 하나로 묶어주기 �� www.opentutorials.org 1. Webpack ➡️ 여러개의 리소스 파일을 하나의 js파일로 묶어주는 도구. static module bundler Webpack의 장점 1. 여러개의 파일을 하나로 묶어주기 때문에 네트워크 접속의 부담을 줄일 수 있다. (더 빠른 서비스 제공) 2. 여러개의 서로 다른 패키지들이 서로 같은 이름의 전역 변수를 사용하면 프로그램은 오동작을 하게 된다. 이런 문제를 극복하기 위해서 등장한 것이 모듈이..
8.2 함수의 prototype 프로퍼티 함수의 prototype 프로퍼티 ◾️ new F()와 같은 생성자 함수를 이용하면 새로운 객체를 만들 수 있다. ◾️ F.prototype이 객체면 new 연산자는 F.prototype을 사용해 새롭게 생성된 객체의 [[Prototype]]을 설정한다. ⚠️ 자바스크립트가 만들어졌을 때는 프로토타입 기반 상속이 주요 기능중 하나였다. 과거에는 프로토타입에 직접 접근할 방법이 없었다. 생성자 함수의 prototype프로퍼티를 이용하는 방법을 이용했다. ◾️ F.prototype에서 prototype은 F에 정의된 일반 프로퍼티이다. 프로토타입 객체와는 다르다. let animal = { eats: true }; function Rabbit(name) { this.name = name; } Rabbit.p..
8.1 프로토타입 상속 📢 기존에 있는 기능을 가져와 확장해야 하는 경우 사람에 관한 프로퍼티와 메서드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 할 때, user의 메서드를 복사하거나 다시 구현하지 않고 프로토타입 상속(prototypal inheritance)을 이용하면 user에 약간의 기능을 얹어 admin과 guest객체를 만들 수 있다. [[Prototype]] ◾️ 자바스크립트 객체는 명세서에서 명명한 [[Prototype]]이라는 숨김 프로퍼티를 가진다. ◾️ 숨김 프로퍼티 값은 null이거나 다른 객체에 대한 참조가 되는데, 다른 객체를 참조하는 경우 참조 대상을 프로토타입(prototype)이라고 한다. ◾️ 프로토타입 상..
Level1_비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 (" 벽#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 과 라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다. 지도 1과 는 각각 정수 배열로 암호화되어 있다. 암호화된 배열은 지도의 각 가로줄에서 벽 부분을 1, 공백 부분을 0으로 부호화했을 때 얻어지는 이진..
화살표 함수 구문 화살표 함수에서 혼란스러운 중괄호 주로 react에서 map메소드를 사용할 때 자주 에러가 나는 부분이기 때문에 간단히 정리해보자 Statements와 Expressions 1. Expression (표현식) ◾️ 단일 값을 생성하는 코드 console.log(2 + 2 * 3 / 2); // 5 2. Statements (문장) ◾️ 작업을 수행하는 코드 ◾️ 반복문, 조건문 등 for(let i = 0; i { statements } (param1, param2, …, paramN) => expression // { return expression; } -> return과 중괄호..
6.10 화살표 함수 다시 살펴보기 📢 화살표 함수는 단순히 함수를 짧게 쓰기 위한 용도로 사용되지 않는다. 독특하고 유용한 기능을 제공한다. ◾️ 멀리 떨어진 곳에서 실행될 작은 함수를 작성해야 하는 상황 ◾️ 예시 arr.forEach(func) - func는 forEach가 호출될 때 배열 arr의 요소 전체를 대상으로 실행된다. setTimeout(func) - func는 내장 스케줄러에 의해 실행된다. ◾️ 함수를 어딘가에 전달하게 되면 함수의 컨텍스트를 읽을 수 있다. ➡️ 화살표 함수를 사용하면 현재 컨텍스트를 잃지 않는다. 화살표 함수에는 'this'가 없다 ◾️ 화살표 함수 본문에서 this에 접근하면, 외부에서 값을 가져온다. let group = { title: '1모둠', students: [ '시목', '여진', '..
6.10 함수 바인딩 📢 객체 메서드를 콜백으로 전달할 때 this 정보가 사라지는 문제가 생긴다. 사라진 'this' ◾️ 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다. let user = { firstName: 'suzu', sayHi() { console.log(`Hello! ${this.firstName}!`); } }; setTimeout(user.sayHi, 1000); // Hello, undefined! ◾️ setTimeout에 객체에서 분리된 함수인 user.sayHi가 전달되기 때문에 undefined가 출력된다. let f = user.sayHi; setTimeout(f, 1000); // user context를 잃어버림 ◾️ 브라우저 환경에서 setTimeout메서..
Level1_가장 큰 수 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 입출력 예 설명 [1, 5, 2, 6, 3,..

티스토리툴바