본문 바로가기

JavaScript

 (16)
Today I am
자바스크립트에서 this 1. 단독으로 쓴 this 단독으로 this를 호출하는 경우에는 global object를 가리킨다. 'use strict'; var x = this; console.log(x); //Window 2. 함수 안에서 쓴 this - 함수 안에서 this는 함수의 주인인 window객체에 바인딩된다.! //예시1 function myFunction() { return this; } console.log(myFunction()); //Window //예시2 var num = 0; function addNum() { this.num = 100; num++; console.log(num); // 101 console.log(window.num); // 101 console.log(num === window.num..
JavaScript의 class ✅ 자바스크립트에 class가 추가되기 전 !!! ES6 이전 !!! 함수 : 함수기반 단위 - 포장 : 특정 기능을 하는 변수+ 알고리즘 - 기능 : 기능 단위의 코드 그룹화, 기능 단위의 중복 코드 제거, 코드 재사용성 클래스 (생성자 함수) : 클래스 기반 단위 - 포장 : 연관 있는 변수와 함수 포장 - 기능 : 객체 단위로 변수와 함수를 그룹화, 객체 단위의 중복 코드 제거, 코드 재사용 자바스크립트에서 클래스 만들기 - 사실 자바스크립에는 객체지향 프로그래밍 언어에서 기본적으로 제공하는 클래스라는 개념을 제공하지 않는다. - `생성자 함수`가 다른 언어에서의 클래스(Class)와 유사한 개념이기 때문에 클래스를 사용할 수 있는 방법이 있다. 그렇기 때문에 자바스크립트에서는 클래스는 없지만 OO..
[JavaScript 강의 노트(3)] Promise / async, await javascript 강의 노트 | Byte Degree [2주차] promise(1/4) - ES6부터 표준내장객체로 추가되었다. - 생성자를 통해 프로미스 객체를 만들 수 있다. - 생서자의 인자로 executor 라는 함수를 이용한다. new Promise(/*excutor*/); - executor함수는 resolve와 reject를 인자로 가진다 (resolve, reject) => {...} new Promise(/*excutor*/(resolve, reject)) => {...}); - resolve와 reject는 함수이다. - 생성자를 통해 프로미스 객체를 만드는 순간 pending(대기) 상태가 된다. new Promise((resolve, reject)) => {...}); //pend..
[JavaScript 강의 노트(2)] class javascript 강의 노트 | Byte Degree [2주차] 클래스 (1/4) class - ES6에 추가된 문법 class의 선언식 vs 표현식 //선언적방식 class A {} console.log(new A()); //class 표현식을 변수에 할당 const B = class{}; console.log(new B()); //선언적 방식이지만 호이스팅은 일어나지 않는다. 생성자 constructor //constructor class A {} console.log(new A()); // A {} class B{ constructor(){ console.log('constructor'); } } console.log(new B); //constructor,B {} class C construct..
[JavaScript 강의 노트(1)] 데이터 타입, 변수, 조건문, 반복문 javascript 강의 노트 | Byte Degree [1주차] javascript - 스크립트언어 - 인터프리터 언어 마지막문장에는 세미콜론을 붙이지 않아도 된다. 조건문, 반복문 마지막 블록에 세미콜론을 붙이지 않는다. 키워드&예약어 키워드 (ex) var) -자바스크립트에서 특정한 목적을 위해 사용하는 단어. -예약어로 지정되어있다. 예약어 (ex) return, for) -프로그램을 작성할떄 변수면 함수명 등을 이미 정해져 있는 단어 reserved keywords -이미 특정한 목적을 위해 사용하기 떄문에 사용할 수 없는 예약어 future reserved keywords -앞으로 특정한 목적을 위해 사용할 가능성이 있어서 사용할 수 없는 예약어 식별자 - 코드 내의 변수, 함수, 혹은 속성을..
2048 | ZeroCho 💫 JavaScript | 2048 게임 1. 4*4 테이블 만들기 const 테이블 = document.querySelector("#table"); const 데이터 = []; function 초기화(){ const fragment = document.createDocumentFragment(); [1,2,3,4].forEach(function(열){ let 열데이터 = []; 데이터.push(열데이터); const tr = document.createElement("tr"); [1,2,3,4].forEach(function(행){ 열데이터.push(0); const td = document.createElement("td"); tr.appendChild(td); }); fragment.appendCh..
call by value, 생성자 1. call by value, call by reference, call by sharing let obj = {a:1,b:2}; let obj2 =Object.assign({}, obj); obj2 //{a: 1, b: 2} //a: 1b: 2__proto__: Object //1단계깊은복사 JSON.parse(JSON.stringify(obj)) //{a: 1, b: 2}a: 1b: 2__proto__: Object //완전한 깊은복사, 성능이 안좋다, 프로토타입을 복사할 수 없다 function 함수(매개변수){ 매개변수 = 10; console.log(매개변수); } let 인자 = 5; 함수(인자); console.log(인자); //10 //5 - 원시 값은 복사가 돼서 매개변수에 들어간다...
팩토리 패턴, 프로토타입 🔷 팩토리 패턴 function 카드공장 (name, att, hp){ return{ name:name, att:att, hp:hp, type:'카드', attack:function(){}, defend:function(){}, }; } let card = 카드공장('토끼',10,10); card //{name: "토끼", att: 10, hp: 10, type: "카드", attack: ƒ, …} //att: 10 //attack: ƒ () //defend: ƒ () //hp: 10 //name: "토끼" //type: "카드" //__proto__: Object let card2 = 카드공장('거북이',20,20); card2 //{name: "거북이", att: 20, hp: 20, type: "카..

티스토리툴바