[JS] 배열이 조건을 만족하는지 확인하기 (every, some)

오늘은 달리기반 수업에서 얕은 복사 깊은 복사를 복습하고 배열 메서드와 객체 메서드를 추가적으로 알아보았다.배열의 요소들이 특정 조건을 만족하는지 확인하기 위하여 배열 메서드인 every()와 some()을 활용할 수 있다! every() - 모든 요소가 조건을 만족하는지 확인하기콜백함수로 참과 거짓을 판단하고 모든 요소가 참일 때 true를 반환한다. 그렇지 않은 경우 false!콜백함수는 순차적으로 요소에 적용되면서 이번 순서의 요소, 이번 요소의 인덱스, every()를 호출한 배열을 매개변수로 받는다. const arr1 = [1, 20, 30];const arr2 = [100, 200, 300];function isBiggerThan10(element, index, array) { retu..

• format_list_bulleted JavaScript
• · 2024. 7. 25.
• textsms

[JS] Generator 로그 순서 이해하기

generator에대해 공부하다가 generator 객체는 어떤 식으로 출력이 되는지 궁금했다.그래서 콘솔에 로그를 찍어보았는데 로그가 찍히는 순서가 예상과 달라 고민에 빠졌다.. const addCoffee = function(prevName, name) { setTimeout(function() { coffeeMaker.next(prevName ? prevName + ", " + name : name); }, 100);};const coffeeGenerator = function* () { const espresso = yield addCoffee("", "에스프레소"); console.log(espresso); const americano = yield..

• format_list_bulleted JavaScript
• · 2024. 7. 24.
• textsms

[JS] 콜백지옥 해결방안 (기명함수, promise, generator, async/await)

동기와 비동기동기적 (synchronous)하나의 일이 끝날 때까지 다음 일이 기다리고 있음비동기적 (asynchronous)실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식ex. setTimeout, addEventListener 등별도의 요청, 실행대기, 보류 등과 관련된 코드 콜백지옥 예시와 해결방안예시setTimeout( function (name) { var coffeeList = name; console.log(coffeeList); setTimeout( function (name) { coffeeList += ", " + name; console.log(coffeeList); setTimeout( ..

• format_list_bulleted JavaScript
• · 2024. 7. 24.
• textsms

[JS] 콜백함수의 제어권

호출 시점에 대한 제어권// setInterval: 반복해서 매개변수로 받은 콜백함수의 로직을 수행let count = 0;let cdFunc = function() { console.log(count); if(++count > 4) clearInterval(timer) };// setInterval의 콜백함수로 전달let timer = setInterval(cbFunc, 300);// 직접 호출cbFunc();마지막처럼 cbFunc()를 직접 호출하는 경우 함수의 호출 시점은 프로그래머가 제어할 수 있다. 하지만 setInterval의 콜백함수로 전달하는 경우, 300ms 간격으로 setInterval이 호출 시점을 제어하게 된다.  인자에 대한 제어권let newArr = [10, 2..

• format_list_bulleted JavaScript
• · 2024. 7. 24.
• textsms

[JavaScript] this (정의, 활용, 바인딩, call, apply, bind)

this가 가리키는 것JS의 this는 런타임 상황에서 고려해야한다. 따라서 두가지 상황을 고려할 수 있다. node, 브라우저! 1) 브라우저: window 객체2) 노드: global 객체  메서드 내부에서의 this메서드와 함수함수는 그 자체로서 독립적인 기능을 수행하지만, 메서드는 자신을 호출한 대상 객체에 대한 동작을 수행한다.1) 함수의 this: 전역 객체2) 메서드의 this: 호출의 주체 this의 할당function exFunc() { console.log("this: ", this);}exFunc(); // this: Object [global]const obj = { method: exFunc,}obj.method(); // this: { method: [Func..

• format_list_bulleted JavaScript
• · 2024. 7. 23.
• textsms

[JavaScript] 실행 컨텍스트 및 콜스택

실행 컨텍스트실행할 코드에 제공할 환경정보들을 모아둔 객체JS는 특정 실행 컨텍스트가 활성화되기 전 다음을 수행한다.선언된 변수 호이스팅외부 화경 정보를 구성this값 설정 콜스택 (Call stack)동일한 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜스택에 쌓아올린다.가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장하는 것. 실행 컨텍스트의 구성 정보VariableEnvironment (VE)1) 현재 컨텍스트 내의 식별자 정보(record)를 갖고 있다.ex. var a = 3 에서 var a 2) 외부 환경 정보 (outer)를 갖고있다. 3) 선언 시점 LexicalEnvironment의 snapshot-> 즉, 변..

• format_list_bulleted JavaScript
• · 2024. 7. 23.
• textsms