콜백 함수 다른 함수의 인자로 넘겨지는 함수 (함수가 부른 다른 함수) 콜백 함수를 둘러싼 콜백 수신 함수에 의해서 특정 시점에 실행이 된다. 동기 콜백 함수라면 호출 즉시 실행되지만, 비동기 콜백 함수라면 특정 조건을 만족했을 때 실행된다. 아래 코드처럼 userInput의 인자로 넘겨지고 있는 greeting 함수를 콜백 함수라고 할 수 있다. function greeting(name) { console.log("안녕하세요" + name); } function userInput(callback) { const name = prompt("이름을 입력하세요."); callback(name) } userInput(greeting); 비동기 콜백 함수의 예시로는 크게 아래 3가지를 들 수 있다. 1. se..
원시 데이터 타입(Primitive data types) 컴퓨터 프로그래밍 언어에서 기본적으로 제공되는 데이터 타입 JS에서 원시 데이터 값은 오브젝트가 아니라 '값'이며 함수를 갖고 있지 않다. 원시 데이터 타입으로는 숫자형, 문자형, 불리언, null, undefined, 그리고 심볼이 있다. 참고로 null, undefined는 래퍼 객체가 없다. 그래서 값으로만 쓰이는 것이다. 원시 데이터 타입은 변수에 직접 값을 할당하거나 함수의 매개변수로 전달할 수 있다. 또 값 복사에 의해 전달되며, 변경 불가능해서 값을 직접 변경할 수 없다. 원시 데이터 타입은 메모리의 스택에 저장된다. 예컨대 아래 코드를 보면 num 변수에 100만 할당되었다. 이 100을 원시값이라고 한다. const num = 10..
yield의 반복 이전 게시글에서 next() 메서드로 호출될 때마다 yield 구문의 값을 반환한다고 했다. yield가 반복되면 어떻게 될까? (이런 생각은 해보지도 않았는데 역시 진짜 개발자들은 다르군) 아래 코드는 yield를 반복하는 형태로 구성되었다. let status = true; function* sports() { let count = 0; while (staus) { yield ++count; }; }; const obj = sports(); console.log(obj.next()); // {value: 1, done: false} console.log(obj.next()); // {value: 2, done: false} status = false; console.log(obj.n..
Generator 이터러블을 생성하는 함수 이터레이션 프로토콜을 준수해 이터러블을 생성하는 것보다 간편하게 이터러블을 구현할 수 있다. function* () 형태로 생성 Generator 함수를 호출하면 함수 블록을 실행하지 않고 Generator 오브젝트를 생성해 반환한다. Generator 오브젝트는 이터레이터 오브젝트다. // function* 선언문 function* sports(one) { }; // function* 표현식 const book = function* (one) { }; // Generator Function const music = Object.getPrototypeOf( function* () {}).constructor; const get = new music(); func..
이번 건 웹 개발에서 사용하는 부분이 많지 않다. 그냥 참고 삼아 적어둔다. Math.trunc() : 소수를 제외한 정수를 반환한다. console.log(Math.trunc(12.56), Math.floor(12.56)); // 12, 12 console.log(Math.trunc(-12.56), Math.ceil(-12.56)); // -12, -12 console.log(Math.trunc("12.56"), Math.floor(true)); // 12, 1 Math.sign() : 값의 부호에 해당하는 값을 반환한다. 양수일 경우 1, 음수일 경우 -1, 0은 부호와 관계 없이 0으로 반환한다. console.log(Math.sign(5), Math.sign(-5)); // 1, -1 consol..
Array.prototype.entries() Array 오브젝트를 Array 이터레이터 오브젝트로 생성하고 반환한다. 배열의 엘리먼트를 [key, value] 형태로 변환한다. for-of문으로 전개할 수 있다. 이터레이터는 다시 반복할 수 없다. Array 이터레이터 오브젝트는 [key, value] 형태로, 배열의 인덱스가 key가 되고 엘리먼트 값이 value가 된다. 끝까지 읽은 이터레이터 오브젝트는 다시 읽을 수 없고, 전부 읽고 나면 undefined가 뜬다. 그래서 아래 코드에서 한 번 더 콘솔을 찍으면 undefined가 찍힌다. const iterator = ["A", "B"].entries(); console.log(iterator.next().value); // [0, 'A'] co..
Array.prototype.find() 배열의 엘리먼트를 하나씩 읽어가며 콜백 함수를 호출한다. 콜백 함수에서 true를 반환하면 종료된다. 1번째 파라미터: 콜백 함수 (파라미터: 엘리먼트, 인덱스, 배열 전체) 2번째 파라미터(opt): 콜백 함수에서 this로 참조할 오브젝트 반환: 배열 엘리먼트 OR undefined 아래처럼 find는 콜백 함수를 파라미터로 사용하며 해당 콜백 함수는 3가지 파라미터를 사용한다. const list = ["A", "B", "C"]; const cb = (val, idx, all) => val === "B"; const result = list.find(cb); console.log(result) // B const list = ["A", "B", "C"]; c..
Array.prototype.copyWithin() 범위 값을 복사해 같은 오브젝트에 설정한다. 변경된 Array 오브젝트를 반환한다. 파라미터는 총 3개로 1번째만 필수다. 1번째 파라미터: 복사한 값을 설정할 시작 인덱스 2번째 파라미터: 복사 시작 인덱스 3번째 파라미터: 복사 끝 인덱스 (바로 앞까지) 3번째 파라미터를 작성하지 않은 경우 복사한 값을 설정할 시작 인덱스는 1이고, 복사를 시작할 인덱스는 3이다. 즉 list의 1번째 인덱스부터 복사 값을 붙여 넣을 건데, 2번째 파라미터에서 3번째 인덱스부터 복사를 시작할 거고 어디까지 복사를 끝낼지 3번째 파라미터를 설정하지 않았기 때문에 "D"부터 끝까지 복사하게 된다. 따라서 D부터 끝까지 값을 복사해서 1번째 인덱스에 붙여넣는다는 말! c..
템플릿 리터럴(Template Literal) `문자열` `문자열 ${표현식} 문자열` tag(함수 이름) `문자열 ${표현식} 문자열`로 쓸 수 있다. 백틱 안에 표현식을 작성하는데, 표현식을 ${표현식} 형태로 작성해 =아래와 같이 쓰인다. console.log(`ABC`) // ABC const one = 1, two = 2; const result = `1+2는 ${one + two}이 된다`; console.log(result) // 1+2는 3이 된다 줄바꿈을 할 때도 쓰인다. ES5처럼 \n을 사용하지 않고 백틱 안에서 줄을 바꿀 수 있다. console.log("ES5-1라인\n2라인") // ES5-1라인 // 2라인 console.log(`1라인 2라인`) // 1라인 // 2라인 ta..
prototype과 __proto__ (야매 주의) 이번 강의는 잘 이해를 못 했지만 최대한 이해한 부분을 적어봤다. 적으면서 이해가 안되거나 궁금한 부분은 다시 알아봐야겠다. 🥹 프로토타입은 어떤 객체의 속성이나 메서드를 정의하는 템플릿? 모음집? 같은 녀석이라고 이해했다. 아래 코드를 보면 Person이라는 생성자 함수를 만들었고, 이 함수의 프로토타입에 sayHello라는 메서드를 추가했다. 이로써 생성자 함수 Person을 사용해 만든 객체들은 모두 sayHello() 메서드를 공유하게 된다. 그래서 person1, person2들은 Person의 프로토타입을 상속 받아서 sayHello() 메서드를 사용하는 것을 볼 수 있다. // 생성자 함수 정의 function Person(name) { t..
