본문 바로가기

TIL -일간학습기록/Java Script10

비동기 흐름 이해하기 동기적이란(synchronous)? 간단하게 그림으로 설명 하자면... |A시작-----------------A종료| |B시작---------------B종료| A업무를 마칠때까지 B업무를 막아두는것을 Blocking이라고하고, 끝나는 시점과 시작하는 시점이 같기때문에 동기적이라고 말한다. 비동기적이란(asynchronous)? |A시작-----------------A종료| |B시작---------B종료| 대표적 비동기 함수인 setTimeout 함수의 경우 이렇게 실행된다. https://poiemaweb.com/img/event-loop.gif A,B가 병렬로 진행된다. 순차적으로 실행 되지않는다. 자바스크립트 엔진은 단순히 작업이 요청되면 Call Stack을 사용하여 요청된 작업을 순차적으로 실행.. 2022. 2. 13.

Call back 함수로 Method 만들기 학습목표 forEach() ,indexOf(), map(), slice(), reduce(), filter()와 같은 메서드를 자바스크립트 코드로 만들고 만든 함수를 콜백하여 다른 함수를 만들어보자!😎 (비동기에서 콜백을 원활히 쓰기위한 선행학습) 만든것 예제.slice() _.slice = function (arr, start, end) { let _start = start || 0, _end = end; // 입력받은 인덱스가 음수일 경우, 마지막 인덱스부터 매칭 // (ex. -1 => arr.length - 1, -2 => arr.length - 2) // 입력받은 인덱스는 0 이상이어야 한다. if (start < 0) _start = Math.max(0, arr.length + start); .. 2022. 1. 24.

Class와 Instance 학습목표 클래스와 인스턴스라는 용어를 이해할 수 있다. new 키워드의 사용법을 이해할 수 있다. class 키워드의 사용법을 이해할 수 있다. 현실 세계의 모델을 바탕으로 클래스의 메서드와 속성을 디자인할 수 있다. 객체 지향 프로그래밍 특징을 이해할 수 있다. 캡슐화 상속 추상화 다형성 JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다. Prototype이 무엇인지 이해할 수 있다 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다. 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다. 클래스 상속의 원리를 이해할 수 있다. Prototype chain을 이해하고 설명할 수 있다. (__proto__) 면접에 자주등장하는 개념이라고 하니 잘.. 2022. 1. 22.

Array와 Object의 값 사용하기 학습목표 배열을 생성하고 추가하고 삭제하고 수정할수있다. 배열에서 활용할 메서드를 떠올릴수있다. 객체에서 키와 값을 쌍 혹은 개별적으로 생성, 추가, 삭제, 수정 할수있다. 객체에서 활용할 메서드를 떠올릴수있다. 반복문으로 객체를 조회하는것을 설명할수있다. 배열 배열의 값 = 요소(Element) 순서 = Index(0부터 시작) 배열.length를 사용하면 배열속 요소의 갯수를 알수있다. [대괄호를 이용해만들고 각각의 원소는 ,를 이용해 구분한다.] 없는 요소를 조회하면 undefined를 출력한다. 배열 활용 Method 배열의타입을 확인하는 법 typeOf 를 사용하면 object가 출력되어 객체와 구분할수없음. Array.isArray(확인할 요소) //boolean값으로 리턴함(If문에 바로 적.. 2022. 1. 16.

3W_JS_클로저함수 학습목표 클로저 함수의 정의와 특징에 대해서 이해할 수 있다 1. 함수의 리턴문이 함수인 형태(외부함수 변수에 접근가능한 내부함수) 2. 내부함수는 외부함수에 선언된 변수에 접근가능하다. 3. 함수실행이 끝나도 데이터를 보존한다.(특정데이터를 스코프안에 가둬두고 계속 사용할수있게 한다) 4. 정보의 접근 제한 클로저가 갖는 스코프 범위를 이해할 수 있다(외변접내!!!!!!) 클로저를 이용해 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다 발견한것 함수의 매개변수와 전달인자의 유무 / 선언의 유무에 따라 값이달라진다 느낀점 실제 활용문에 많이 적용해봐야겠다. 예제를 오답노트에 정리하면서 다시 봐야겠다. 다음 공부방향 클로저와 스코프를 이용해 어떤 로직을 짤수있을지 궁금하다. 2021. 12. 29.

3W_JS_Scope 학습목표 스코프의 의미와 적용 범위를 이해할 수 있다 Scope 는 범위라는 의미를 갖고, 더 자세히는 변수의 유효범위의 뜻을 갖는다 두log가 동일한 변수를 출력하는듯 하지만 message라는 변수가 안쪽 스코프 ({} 중괄호로 구분됨)에 선언 할당 되어있으므로, 4번째줄에선 출력 가능함. 6번째줄에서는 바깥에서 안으로 들어갈수 없기 때문에 출력할수 없음. -스코프의 주요 규칙을 이해할 수 있다 중첩 규칙 block scope와 function scope(블록-중괄호기준/ 함수-함수로 둘러싼 범위 ) *화살표함수는 블록 스코프로 취급됨 전역 스코프와 지역 스코프 전역 변수와 지역 변수간의 우선 순위 (지역이 우선!) 김코딩 - 박해커 - 박해커 순으로 출력 첫번째 출력시 첫줄의 전역 name이 출력 두.. 2021. 12. 29.

3W_JS_Method expect() - 리턴값이 기대값과 같은지 확인하는 함수 expect(테스트하는값).기대하는조건 expect(isEven(3)).to.be.true => 'isEven(3)'의 결과값은 참(true)이어야 한다' expect(1 + 2).to.equal(3) => 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다' 기대하는 조건에 해당하는 함수를 matcher 라고 함. 프레임워크도 있음 (mocha,chai.등) 테스트를 시행할때 기대하는값은 표현식이거나 함수의 실제 실행 결과 1) 표현식: true || false, 1 + 1, 10 * 3 2) 함수의 실행: isEven(3), sum(1, 2) 하지만 엄격하게 비교하지 못할경우엔 expect('테스트하는값').to.equal('기대하는.. 2021. 11. 25.

3W_JS_스코프와 클로저 -변수 접근 규칙에 따른 유효범위. 스코프의 의미와 적용 범위를 이해할 수 있다 스코프의 주요 규칙을 이해할 수 있다 중첩 규칙 block scope와 function scope 전역 스코프와 지역 스코프 전역 변수와 지역 변수간의 우선 순위 let, const, var 의 차이 전역 객체(window)의 이해 let vscope = 'global'; //여기부터 function fscope() { let vscope = 'local'; let lv = local variables'; alert(lv); } //여기까지 local scope fscope(); alert(lv); 스코프 특징 1. 바깥 스코프(전역 = Global Scope)의 변수는 안쪽에서 사용 가능하다. 2. 안쪽 스코프(지역 = L.. 2021. 11. 25.

1W _JS_조건문 학습목표 truthy와 falsy 가 조건문에서 작동하는 방식 0 '' undefined null NaN console.log(boolean(위의값)); 은 false로 확인됨. falsy값을 제외한 값 빈 객체({})나,빈 배열([]) 또한 true로 확인됨. 비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해 ==는 Equal Operator ===는 Strict(엄격한) Equal Operator 0 ==='0' false // 같은 0 이지만 타입(number와 string)을 구분하므로 거짓 출력 0 == '0' true // 같은 0인것만 확인하고 참 출력 0 !== 0 false // 같은 타입과 같은 내용으로 참일때 !== 연산자는 거짓을 출력한다 0 !=='0' true // .. 2021. 11. 15.

이전 1 2 다음

티스토리툴바