오전
코테 스터디정리까지
자스 심화 강의 4-5강 끝내기- 3강 this...복습
오후
- W3 css 노트정리 하기
자스 스터디 (어제분 이해못해서 그거까지 읽기)TIL
reduce()
MDN을 봐도 뭐라는지 잘 이해가 안된다
너 map이랑 뭐가 다르니..?
프로그래머스 코테
문제: 정수 num과 k가 매개변수로 주어질 때, num을 이루는 숫자 중에 k가 있으면 num의 그 숫자가 있는 자리 수를 return하고 없으면 -1을 return 하도록 solution 함수를 완성해보세요.
입출력 예
| num | k | result |
|---|---|---|
| 29183 | 1 | 3 |
| 232443 | 4 | 4 |
| 123456 | 7 | -1 |
function solution(num, k) {
var answer = 0;
var numString = num.toString();
//var numString = String(num);
//이것도 OK.
var numArr = Array.from(numString);
for (i = 0; i < numArr.length; i++) {
if (numArr[i] == k) {
answer = i + 1;
break;
}
//아래의 예외처리가 없어서 결과가 이상하게 나왔던듯..
//배열을 다돌았는데도 없으면 return -1을 하라~
//그냥 else문을 쓸게 아니라 이렇게 쓰면 된당.
if(i == numArr.length -1) {
return -1;
}
}
return answer;
}이 문제를 풀기 위해
숫자 - 문자 변환
String()/변수.toString()
문자열 - 배열 변환 메서드Array.from()
을 검색했다.이렇게 풀면 되겠다! 하고 코드쓰려니까 어렴풋해서.. 바로 쓰지 못하고 구글링하는 수준..ㅜ 따흑..
1. 콜백함수
a. 다른 코드의 인자로 넘겨주는 함수
b. 콜백함수를 넘겨받은 코드는 이 콜백함수를 필요에 따라 적절한 시점에 실행(제어권)
c. 예시 알람을 세팅하고 -> 6시 알람을 듣는다
- 알람을 설정하는 함수(알람시계)를 호출했고, 해당 함수(알람시계)가
알아서정해놓은 시간이 됐을 때알람이 울리는 결과를 반환!!
제어권: 알람시계callback = call(부르다) + back(되돌아오다) = 되돌아와서 호출해줘잉
✅ 콜백함수는 다른코드(함수 or 메서드)에게
인자로 넘겨줌으로써 그 제어권도 함께위임한 함수. 콜백 함수를 위임받은 코드는자체적으로내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행
콜백 함수 제어권
여기까지.. 이해가 되나? 나는 70프로밖에 안된다. 제어권에서 자꾸 되돌이표가 걸린다.
그런데~ 아래 코드와 테이블을 보자 ⬇
var count = 0;
var cbFunc = function () {
console.log(count);
if (++count > 4) clearInterval(timer);
};
var timer = setInterval(cbFunc, 300);
// 실행 결과
// 0 (0.3sec)
// 1 (0.6sec)
// 2 (0.9sec)
// 3 (1.2sec)
// 4 (1.5sec)| code | 호출 주체 | 제어권 |
|---|---|---|
| cbFunc(); | 사용자 | 사용자 |
| setInterval(cbFunc, 300); | setInterval | setInterval |
map 함수
✅ map() : 콜백함수 내의 로직을 배열의 첫 번째 요소부터 돌리면서 새로운 객체를 리턴해주는 메서드
//Array.prototype.map(callback[, thisArg])
//-> this 생략하면 전역객체 바인딩
//callback: function(currentValue, index, array)
//map : 배열의 모든 요소를 꺼내어 처음부터 끝까지 콜백함수 반복호출 + 새로운 배열 리턴
var newArr = [10, 20, 30].map(function (currentValue, index) {
console.log(currentValue, index);
return currentValue + 5;
});
console.log(newArr);
//자, 그럼 콜백함수의 인자 2개의 위치가 바뀐다면 어떻게 될까요?📌 .map(function (currentValue, index)
map함수 내부의 콜백함수 function 인자들의 위치가 중요!
첫 번째 인자 : 지금 현재 value
두 번째 인자 : 인덱스
이름은 중요하지 않아..
this
✅콜백함수도 함수다. 따라서 this가 전역객체를 참조하고 있다
✅제어권을 넘겨받을 코드에서 콜백함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조함
a. 콜백 함수로 객체의 메서드(obj.method)를 전달하더라더도, 그 메서드는 메서드가 아닌 함수로 호출!
var obj = {
vals: [1, 2, 3],
logValues: function(v, i) {
console.log(this, v, i);
}
};
//method로써 호출
obj.logValues(1, 2);
//callback => obj를 this로 하는 메서드를 그대로 전달한게 아니에요
//단지, obj.logValues가 가리키는 함수만 전달한거에요(obj 객체와는 연관이 없습니다)
[4, 5, 6].forEach(obj.logValues);동기와 비동기
a. 동기 : 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식
b. 비동기(async) : 실행 중인 코드의 종료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
- setTimeout, addEventListner
- 별도 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
- 서버통신, API통신...
💡 비동기 작업의 동기적 표현
알쏭달쏭
- 서버통신, API통신...
Promise는 현재에는 당장 얻을 수는 없지만 가까운 미래에는 얻을 수 있는 어떤 데이터에 접근하기 위한 방법을 제공합니다. 당장 원하는 데이터를 얻을 수 없다는 것은 데이터를 얻는데까지 지연 시간(delay, latency)이 발생하는 경우를 말합니다
I/O나 Network를 통해서 데이터를 얻는 경우가 대표적
1. Promise(1)
new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행돼요
그 내부의 resolve(또는 reject) 함수를 호출하는 구문이 있을 경우
resolve(또는 reject) 둘 중 하나가 실행되기 전까지는
다음(then), 오류(catch)로 넘어가지 않아요
따라서, 비동기작업이 완료될 때 비로소 resolve, reject 호출하는 방법으로 비동기 -> 동기적 표현이 가능합니다
2. Promise(2)
3. await/ async
async/await 키워드를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있습니다.
✅ await는 async가 붙은 함수 내부에서만 사용가능
비동기 함수가 리턴하는 Promise로 부터 결과값을 추출
결과값을 얻을 때까지 기다림
📌 async가 붙은 함수를 호출하면 명시적으로 Promise객체를 생성해서 리턴하지 않아도 Promise객체가 리턴됨!
✅ 예외처리 try/catch
클로저
렉시컬 환경
📌복기 [스코프 체인] : 식별자 유효 범위를 안에서 바깥으로 검색해나가는 것
environment record : 변수 (호이스팅) ⬅
여기서 먼저 찾고, 없으면
outer environment reference : 실행 컨텍스트가 호출되는 시점의 그 외부 환경을 저장 ⬅외부에서 찾음
Js엔진은 어디서 호출했는지가 X, 어디에 함수를 정의했는지에 따라 상위스코프를 결정
렉시컬 스코프에선 정의된 곳과 실행된 곳을 분리해서 생각해야 함
const x = 1;
function foo() {
const x = 10;
bar();
};
function bar() {
console.log(x);
};
foo(); // ?
bar(); // ?
클로저라 함은~
function foo() {
const x = 1;
const y = 2;
// 클로저
// 중첩 함수 bar는 외부 함수보다 더 오래 유지되며 상위 스코프의 식별자를 참조한다.
function bar() {
debugger;
console.log(x);
}
return bar;
}
const bar = foo();
bar();
중첩 함수 bar는 외부 함수보다 더 오래 유지되며 상위 스코프의 식별자를 참조한다.
✅상위 스코프의 식별자를 참조하면서return 되어외부에서도 호출될 수 있는 조건을 갖춘 함수
// 카운트 상태 변경 함수
const increase = (function () {
// 카운트 상태 변수
let num = 0;
// 클로저
return function () {
return ++num;
}
}());
// 이전 상태값을 유지
console.log(increase()); //1
console.log(increase()); //2
console.log(increase()); //3
즉시 실행 함수의 return 값이 increase에 전달!
전달된 function은 클로저다
상위 스코프의 식별자를 참조하고 있기에
➡ 자신이 정의된 위치에 의해 결정된 상위 스코프인 즉시 실행 함수의 렉시컬 환경을 기억함
클로저는 상태가 의도치 않게 변경되지 않도록 안전하게은닉(information hiding) 하고특정 함수에게만상태 변경을 허용하여 상태를안전하게 변경, 유지하기 위해 사용됨
참고 블로그 링크
