분류 전체보기 (104) 썸네일형 리스트형 [javascript] var VS let VS const 수업을 들으면서 가장 이해가 안 가는 부분이라 개념을 확실하게 잡고자 유튜브 '생활코딩'을 참조해서 공부했더니 정리가 잘 되었다. ----------------------------------------------------------------------------------------------------- 예전: var 최신: let, const var 보다 let, const 쓰는걸 권유 let- 값이 바뀔 수 있는 변수/ const- 값이 바뀔 수 없는 변수(상수) ****호이스팅(hoisting)**: 자바스크립트에서 함수가 실행되기 전에 안에있는 변수들을 범위의 최상단으로 끌어올려서 읽는것. → 호이스팅시 변수의 선언과 초기화( undefined) 같이 시켜버림. 따라서 변수에 값이 할당되기.. 자바스크립트 중급 18 - Generator *Generator : 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능 function* fn() { console.log(1); yield 1; console.log(2); yield 2; console.log(3); console.log(4); yield 3; return "finish"; } catch (e) { console.log(e); } const a = fn(); next(), return(), throw() iterable -Symbol.iterator 메서드가 있다. -Symbol.iterator 는 iterator를 반환해야 한다. iterator -next 메서드를 가진다. -next 메서드는 value와 done속성을 가진 객체를 반환한다. -작업이 끝나면 done은 true가.. 자바스크립트 중급 17 - async, await async function getName() { //return Promise.resolve("Tom"); throw new Error("err..."); } getName().catch((err) => { console.log(err); }); //await : async함수 내부에서만 사용가능 function getName(name) { return new Promise ((resolve, reject) => { setTimeout(() => { resolve(name); }, 1000); }); } async function showName(){ const result = await getName('Mike'); console.log(result); } console.log("시작"); showNa.. 자바스크립트 중급 16 - 프로미스(Promise) const pr = new Promise((resolve, reject) => { (resolve: 성공했을 때 실행되는 함수, reject: 실패했을 때 실행되는 함수) //code }); → 어떤 일이 완료된 이후 실행되는 함수: callback 함수 state: pending(대기) result: undefined ↓ resolve(value) ☞ state: fulfilled(이행됨) result: value (resolve로 전달받은 값) reject(error) ☞ state: rejected(거부됨) result: error ex) const pr = new Promise((resolve, reject) => { setTimeout(()=>{ resolve('OK') }, 3000) }); .. 자바스크립트 중급 15 - 클래스(Class) //생성자 함수 const User = function (name, age){ this.name = name; this.age = age; //this.showName = function() { // console.log(this.name); //}; }; User.prototype.showName = function (){ console.log(this.name); }; const mike = new User("Mike", 30); class User2 { constructor(name, age) { //constructor: 객체를 만들어주는 생성자 메소드 this.name = name; this.age = age; } showName(){ //클래스 내에 정의된 메소드는 User2의 프로토타입에 저.. 자바스크립트 중급 14 - 상속, 프로토타입(Prototype) const car = { wheels : 4, drive() { console.log("drive.."); }, }; const bmw = { color : "red", navigation : 1, }; const benz = { color : "black", }; const audi = { color : "blue", }; bmw.__proto__ = car; //bmw는 car에 상속 const x5 = { color : "white", name : "x5", }; x5.__proto__ = bmw; //x5는 bmw에 상속 //Prototype Chain ▶ for ...in 을 이용해서 객체의 프로퍼티 순환하기 for (p in x5){ console.log(p); } x5 : {color: "w.. 자바스크립트 중급 13 - call, apply, bind *call, apply, bind: 함수 호출 방식과 관계없이 this 를 지정할 수 있음. 1. call call메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다. const mike = { name : "Mike", }; const tom = { name : "Tom", }; function showThisName() { console.log(this.name); } showThisName(); //this = window showThisName.call(mike); //this = mike const mike = { name : "Mike", }; const tom = { name : "Tom", }; function showThisName() { console.log.. 자바스크립트 중급 12 - setTimeout / setInterval *setTimeout : 일정 시간이 지난 후 함수를 실행 *setInterval : 일정 시간 간격으로 함수를 반복 function fn(){ console.log(3) } setTimeout(fn, 3000); //fn: 일정시간 지난 후 실행되는 함수 // 3000 = 3s setTimeout(function(){ console.log(3) }, 3000); = 위 함수와 똑같은 내용 //함수에 인수가 존재할 때 function showName(name){ console.log(name); } setTimout(showName, 3000, 'Mike'); //→Mike는 name의 첫번째 인수로 전달 // 함수 시간 인수 clerTimeout은 예정된 작업을 없앰. function showName(.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음