🙿🙿🙿🙿🙿🙿🙿🙿🙿🙿🙿🙿

* Generator: 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능. function 옆에 *을 쓰고 내부에 yield 키워드 사용하는데 yield 에서 함수 실행을 멈출 수 있음. Generator 함수를 실행하면 generator의 객체가 반환됨. 제너레이터는 다른 작업 하다가 다시 돌아와서 next() 해주면 진행이 멈췄던 부분부터 이어서 실행 - generator 객체는 next(), return(), throw() 메서드를 가지고 있음 * next를 호출하면 가장 가까운 yield 1을 만날때 까지 실행되고 데이터 객체 반환. function* fn(){ console.log(1); yield 1; console.log(2); yield 2; console.log(3); console.l..

* async, await를 사용하면 프로미스의 메인 메소드를 체이닝 형식으로 호출하는 것보다 가독성이 좋아짐. * async: 항상 프로미스를 반환 async function getName(){ return "Mike"; } console.log(getName()); - 함수를 호출하고 then을 사용할 수 있음 async function getName(){ return "Mike"; } getName().then((name)=>{ console.log(name); }); //Mike - 만약 반환 값이 Promise면 그 값을 그대로 사용 async function getName(){ return Promise.resolve("tom"); } getName().then((name)=>{ console..

* 프로미스(Promise): - new Promise로 생성, 함수를 전달받는데 여기서 인수는 resolve와 reject에 해당. resolve는 성공한 경우, reject는 실패했을 때 나타나는 함수. => 이렇게 어떤 일이 완료되어 실행되는 함수를 '콜백(callback)함수'라고 함. -new Promise 생성자가 반환하는 프로미스 객체는 state와 result를 프로퍼티로 받음 state : pending(대기) / result: undefined state는 초기에 pending이었다가 resolve(value)로 호출( 즉, 성공하면)되면 state: fulfilled(이행됨) / result: value 가 됨. (이때의 result는 resolve 함수에서 전달된 값.) 만약 rej..

* class: ES6에 추가된 스펙. class라는 키워드를 사용하고 내부에 constructor가 있음. new를 통해서 호출하면 자동으로 실행됨. - class에 있는 constructor 부분은 객체를 초기화하기 위한 값으로 인수를 넘겨받을 수 있는데 여기서는 name과 age가 만들어짐 - showName처럼 클래스를 정의한 메서드는 User2의 프로토타입을 잘라냄. const User = function(name,age){ this.name = name; this.age = age; this.showName = function () { console.log(this.name); }; }; const mike = new User("Mike",30); class User2 { constructor..

* hasOwnProperty: 객체에는 자신이 프로퍼티를 가지고 있는지 확인할 수 있는 메서드. true/ false로 결과 알려줌. (개발자 도구 이용해 확인) const user ={ name:'Mike' } undefined user.name 'Mike' user.hasOwnProperty('name') true user.hasOwnProperty('age') false console 창에서 usr 입력하고 name: "MIke" 에서 화살표를 누르면 __proto__: Object 라는 객체가 있음 -> 프로토타입 * 프로토타입: 숨겨진 프로퍼티. 객체에서 프로퍼티를 읽으려고 하는데 없으면 __proto__에서 찾음. 이를 이용해 중복 코드를 줄일 수 있음. - 만약 hasOwnProperty가..

*call, apply, bind: 자바스크립트에서는 일반적인 방법 외에도 함수를 어디서 어떻게 호출했는지와 관계없이 this가 무엇인지 지정할 수 있음 *call: 모든 함수에서 사용 가능하며 this를 특정값으로 지정할 수 있음 함수를 호출하면서 call을 사용하고, this로 사용할 객체를 넘기면 해당함수가 주어진 객체의 메서드인 것처럼 사용할 수 있음 call의 첫번째 매개변수는 this로 사용할 값이고 매개변수가 있으면 그 매개변수를 호출하는 함수로 전달됨 const mike = { name: "Mike", }; const tom = { name: "Tom", }; function showThisName(){ console.log(this.name); } //여기서 this는 window를 가리..

* setTimeout: 일정 시간이 지난 후 함수 실행 -2개의 매개변수를 받음 fn: 일정 시간이 지난 뒤 실행하는 함수 / 3000: 시간(=3s) function fn(){ console.log(3) } setTimeout(fn,3000); setTimeout(function(){ console.log(3) },3000); //동일하게 동작 -인수가 필요할 경우 시간 뒤에 , 추가해서 적으면 됨 -showName: 함수 / 3000: 시간 / 'Mike': 인수. 해당 함수의 첫번째 인수로 전달 function showName(name){ console.log(name); } setTimeout(showName,3000,'Mike'); ◎ clearTimeout(tId): 예정된 작업을 없애줌. ..

* Closure(클로저): 함수와 렉시컬 환경의 조합 - 함수가 생성될 당시의 외부 변수를 기억하고 생성된 이후에도 계속해서 접근 가능 - 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있음 * 자바스크립트는 어휘적 환경(Lexical environment)를 갖고 있음 예시1) let one; one = 1; function addOne(num) { console.log(one + num); } addOne(5); //6 코드를 실행하면 스크립트 내에서 선언한 변수들이 Lexical 환경에 올라감 - let으로 선언한 변수 -> one: 초기화가 안 되어 있음 = >사용 못함 - 함수선언문 -> 변수와 달리 바로 초기화 됨 -> addOne: fuction..

* 인수 전달 자바스크립트에서 넘겨주는 함수의 인수 갯수는 제한 X 인수의 갯수는 정해놓고 함수를 만들어도 실제 호출 시 정확히 그 갯수를 맞춰 줄 필요 X 아무것도 전달하지 않아도 됨 -> undefined로 나옴(에러발생 x) function showName(name){ console.log(name); } showName('Mike'); //'Mike' showName('Mike','Tom'); //'Mike' showName(); //undefined 함수의 인수를 얻는 방법 1. arguments로 접근: 과거 사용 방법, 화살표 함수에서는 사용 불가 2. 나머지 매개 변수 사용: 다양한 방법 있음 1. arguments - 함수로 넘어 온 모든 인수에 접근할 수 있음 - 함수 내에서 이용 가능..

- Destructuring assignment: 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 - 배열 구조 분해 let [x,y] = [1,2]; console.log(x); //1 console.log(y); //2 let user1은 let users[0] 요소와 동일 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; console.log(user1); //'Mike' console.log(user2); //'Tom' console.log(user3); //'jane' split 이용해도 가능 let str = "Mike-Tom-Jane"; let [user1, use..