전체 글
-
자바스크립트 __proto__ / prototype 차이JavaScript 2023. 2. 7. 22:12
객체를 생성하게 된다면 고유의 prototype을 가진다. // Func 객체는 prototype을 만든다. function Func(name, age) { this.name = "kwak"; this.age = 30; } // new를 통해 객체를 선언하면, // obj안에는 __proto__이 생기는데 이 __proto__는 Func의 prototype을 바라본다. const obj = new Func(); 큰 구조 1. 생성자 함수를 만든다. 2. 생성자 함수의 prototype이 생긴다. 3. 생성자 함수를 통해 객체 하나를 만든다. prototype : 함수 객체에 존재 __proto__ : 모든 객체에 존재
-
자바스크립트 prototype chain 상속JavaScript 2023. 2. 7. 22:09
프로토타입을 이용한 상속 let objFunc = function() { this.one = "one"; this.two = "two"; } let obj = new objFunc(); objFunc.prototype.two = "one"; objFunc.prototype.three = "three"; console.log(obj.one); // one console.log(obj.two); // one console.log(obj.three); // three console.log(obj.check); // undefined 기본적인 prototype chain function chain1() {} chain1.prototype.foo = "bar"; var chain2 = new chain1(); c..
-
자바스크립트 call, apply, bindJavaScript 2023. 2. 7. 22:07
call, apply, bind : this를 지정, 함수호출 방식과 관계없다. const kwak = { name : "kwak", }; function showName() { console.log(this.name); } showName(); showName.call(kwak); 객체 수정 - apply는 배열을 사용하는 것이 call과 다르다. function updateObj(age, gender) { this.age = age; this.gender = gender; } updateObj.call(kwak, 30, "M"); // updateObj.apply(kwak, [30, "M"]); console.log(kwak); bind : 함수의 this값을 영구히 바꿀 수 있다. const bin..
-
자바스크립트 setTimeout, setInterval, clearTimeout, clearIntervalJavaScript 2023. 1. 30. 10:47
setTimeout : 설정한 시간이 지난 후 함수를 실행 setInterval : 설정한 시간 간격으로 함수를 반복 clearTimeout : 예정된 setTimeout을 제거 clearInterval : 예정된 setInterval을 제거 - setTimeout function fn() { console.log("3"); } setTimeout(fn, 3000); /* 동일한 표현 setTimeout(function() { console.log("3"); }, 3000); */ // 파라미터 전달 function paramFunc(name) { console.log(name); } setTimeout(paramFunc, 3000, "kwak"); - setInterval & clearInterval ..
-
자바스크립트 함수, 함수 호출의 차이JavaScript 2022. 11. 24. 21:35
const minus = (x, y) => x - y; function result(fn, x, y) { return fn(x, y); } result(minus, 10, 1);// 9 // minus 대신 minus() 넣으면 result(x - y, 10, 1); 와 동일해진다. 함수 호출을 하면 return값이 대신 들어간다고 생각하면된다. minus()를 대신 넣으면 undefined - undefined가 된다. const click = () => () => { console.log("a"); }; document.querySelector("#id").addEventListner("click", click()); // 동일한 표현 document.querySelector("#id").addEve..
-
자바스크립트 배열, 배열 메서드JavaScript 2022. 11. 24. 21:09
// 배열은 문자 뿐만 아니라 숫자, 객체, 함수 등도 포함할 수 있다. let testArr = ['kkk', 3, false, {name:'aaa', age:111}, function() {console.log("testArr");}]; // 배열의 길이 console.log(testArr.length); // 배열의 메서드 testArr.push("push");// 배열 끝의 요소를 추가 testArr.pop();// 배열 끝의 요소를 제거 testArr.unshift("unshift");// 배열 앞에 요소를 추가 testArr.shift();// 배열 앞의 요소를 제거 testArr.unshift("a", "s", "d");// 한번에 여러개 추가 가능 // 배열의 반복문 for (let i =..
-
자바스크립트 NaN, null, undefinedJavaScript 2022. 11. 23. 21:11
자바스크립트를 사용하다보면 콘솔에 NaN, null, undefined가 나오는 경우가 있을 것이다. 이 3가지의 정확한 구분은 항상 숙지하고 있어야한다. NaN - Not a Number : 숫자가 아니다. const a = "aaa"; const x = a / 10; console.log(x);// NaN null, undefined - 변수 선언만 하고 아무것도 할당하지 않은 상태 const num1; const num2 = null; console.log(num1);// undefined console.log(num2);// null 추가) infinity const idx = 1/0; console.log(idx);// infinity
-
자바스크립트 동작원리JavaScript 2022. 11. 23. 20:52
호출스택 - 파일이 실행이 되면 호출 스택이 생성되고, anonymous가 아래에 깔린다. - anonymous가 맨 처음 생성되고 마지막에 사라진다. - 동기 코드만 존재하는 경우, 코드가 호출되는 순서대로 실행하면 된다. - 비동기 함수가 같이 있다면 백그라운드, 테스크 큐, 이벤트 루프도 같이 생각해야한다. * 예시 function one() { console.log("one"); } function two() { console.log("two"); } console.log("start"); setTimeout(one, 2000); setTimeout(two, 1000); console.log("end"); cf) [~~] : 쌓이는 것을 이미지로 표현 1. 호출 스택에 [Anonymous]가 먼저..