본문 바로가기

개인공부/JAVA script(JS)

 (29)
22.09.30 JS 중급 - Generator Generator 란 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능을 의미한다. 함수의 작성은function바로 뒤에 * 붙여 성립하며, 내부에 yield 키워드를 사용한다. 생성된 함수는 Generator객체로 반환되며, next method를 이용해서 호출 가능하다. a.next()로 반환된 객체는 value 와 done 두가지 property를 가지는데, value는 yield 오른쪽에 입력한 값이고, 값이 없을땐 undefined 를 반환한다. done 은 해당 함수가 끝났음을 알려주고, 실행이 끝났으면 true을 반환한다. Generator는 next() method 외에 return() 과 throw() method를 가지고 있다. return() method 는 해당 함수의 done 값..
22.09.23 JS 중급 - Promise(2), async와 await async 를 사용하면, .then 을 사용하는 Promises channing 보다 가독성이 좋아진다. 사용법은 function 문 앞에 붙여서 사용하며, 항상 promise를 반환한다. 즉 async function 에서 "Mike"값을 반환 받으려면, 매개변수가 필요하다. 즉 "Mike"를 a로 반환하고, 그 반환된 a를 보여준다. 만약 return 값이 promise 일 경우 그 매개변수를 그대로 반환한다. 함수 내부에서 예외의 상황이 발생하게 되면, reject 상태의 값이 반환된다. (reject 값을 출력하기 위해 then을 catch로 바꿔주었다.) await는 async 내부에서만 사용가능하며, 단독사용이 불가능하다. await 오른쪽에는 반드시 Promise 함수만 사용 가능하며, 받아..
22.09.23 JS 중급 - promise(1) promise는 미리 약속된 동작을 성공, 또는 실패에 따라 동작하게 만들어 준다. 또한 어떤일이 완료된 후 실행되는 함수를 callback 함수라고 한다. new Promise가 반환하는 Promise는 state와 result 객체를 갖는다. 즉 result는 undefined 에서, 성공(revolse) 또는 실패(reject)에 따라 그 값을 다르게 가져간다. 위의 예시에서는 실행된 직후에는 state는 대기상태이다가, 3초 후에 각 ok 값과 err 라는 값을 반환하게 된다. then 이후에 사용 가능한 것이 catch 와 finally 이다. .catch는 reject인 경우에 실행이 된다. 이렇게 catch문을 사용하면, 가독성도 좋아지고, 첫번째 함수를 실행해 따라 발생하는 에러도 알 수 ..
22.09.23 JS 중급 - Class 비슷한 형태의 객체를 만들기 위해서는 생성자 함수를 사용하면 가능하다. class를 사용하여도 생성자 함수와 같이 새로운 객체를 만드는게 가능하다. 둘다 비슷한 느낌이지만, showName()의 저장 위치가 달라진다. codepen.io 의 console 창에서 보이듯이 tom에서는 showName()이 보이지 않는다. 즉, class의 경우 저 showName()이 prototype으로 저장된다. 하지만 생성자 함수에서도 showName을 따로 prototype으로 지정해 주면, 같은 결과값을 얻을 수 있다. 1. 차이점 그렇다면 생성자 함수와 class는 단순 문법의 차이 일까? 그렇지 않다. 먼저 해당 생성자 함수와 class를 new 를 빼고 입력해보면, 그 차이가 분명히 나온다. 위와 같이, c..
22.09.23 JS 중급 - 상속, prototype 객체에는 자신이 해당 property를 가지고 있는지 확인하는 method 가 존재한다. 이는 obj.hasOwnProperty()로 확인 가능하다. 그런데 우리는 hasOwnProperty를 만든적이 없다. 이는 어디에 존재하는 걸까? Codepen.io 에서는 확인할 수 없었기에, 크롬창의 개발자 모드를 이용하였다. 저것을 prototype 이라고 하며, 객체에서 해당 property를 읽으려고 하는데, 해당 키가 없으면 prototype에서 찾게 된다. 반대로 객체안에 해당 property가 있으면, 바로 그 값을 반환하여 보여준다. 그렇다면 prototype은 어떻게 작동하는 것일까? 이를 확인하기 위해서는 상속 이라는 개념이 필요하다. 다음과 같이 비슷한 형태의 객체가 3개가 있다. 다음 객체들..
22.09.22 JS 중급 - call, apply, bind 1. call method call method 는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다. 객체 mike 와 tom, 그리고 showName 이라는 함수를 만들었다. showName()을 호출해 보면, this를 특정할 수 없기 때문에, CodePen 이라고 출력되었다. (codepen.io 사이트에서 설정된 기본값인것 같다.) 하지만, call method를 이용해 mike를 입력해 주면, showName 함수안의 this가 mike를 지칭하여 mike.name 즉 "Mike"가 호출 된다. 다음과 같이 update 라는 함수를 만들었다. 두개의 매개변수를 받아서 사용하며, this는 call method 에 입력된 변수명을 지칭하게 된다. 2. apply apply는..
22.09.22 setTimeout 과 setInterval 1. setTimeout 일정 시간이 흐른 뒤 함수를 실행하게 해준다. 위의 코드는 3초 뒤에 3을 출력해준다. 즉, setTimeout 은 두개의 매개변수를 받는데, 첫번째는 작동할 함수이고, 두번째는 시간이다 (여기서 시간은 ms 단위이다) 또한 첫번째 매개변수에 함수를 직접 작성해도, 이상없이 작동한다. 함수에 인수가 필요가 경우가 있는데, 이때는 제일 마지막에 적어주면, 해당 함수의 인수로 적용된다. clearTimeout()도 있는데, 이는 timeId를 반환하는데, 이를 이용하여 setTimeout 을 취소할 수 있다. 여담으로 표시시간을 0으로 설정해도, 메세지는 바로 출력되지 않는다. 이유는 브라우저의 응답속도가 4ms 이기 때문에, 어느정도의 delay는 항상 발생한다. 또한, 현재 실행..
22.09.22 JS 중급 - 클로저(Closure) 자바스크립트는 어휘적 환경(lexical Environment)를 갖는다. 해당 함수 선언문의 동작 원리를 살펴보면 1. let one; (one 변수를 선언, 아직 값 없음) 2. one = 1; (one 변수는 1) 3. 함수 선언 (내용은 one + num인수) 4. addOne(5) ( 5+ 1 = 6) 이라고 생각하기 쉽지만, 앞서 공부한 내용에 따라 함수는 호이스팅 되어 가장 먼저 작동한다. 그래서, 1. 함수 선언( 내용은 one + num 인수) 2. one 이 함수내에 존재 하지 않음, 찾기 실패 (내부 어휘적 환경) 3. one 이 함수 외부에 존재 함. 함수 성립 (외부 어휘적 환경, 지금은 전역 어휘적 환경) 의 선행작업이 먼저 이루어 진다. 다른 예를 보며 다시 이해해 보자. 조금..

티스토리툴바