본문 바로가기

Programming/JavaScript

(15)
[JavaScript] 비동기적 방식 처리 방법 : Callback, Promise, async/await 자바스크립트에서의 비동기적 구현 방식에는 Callback, Promise, async/await의 3가지를 들 수 있다. 또한, 이러한 비동기 처리 방식을 동기 처리처럼 가능하게 해줄 수 있다. Callback 다른 함수가 실행을 끝낸 뒤 실행되는 함수를 말한다. 함수를 등록해놓은 후 어떤 이벤트가 발생하면 호출하는 함수로써, 파라미터로 함수를 전달받아 함수의 내부에서 실행된다. 아래의 예처럼 setTimeout 함수 안에 함수를 전달하여 3초 뒤에 실행되는 모습이다. setTimeout(function() { ... }, 3000); 이를 동기 처리 방식으로 구현하려면, 비동기 함수의 콜백 내부에서 다음 작업(비동기 함수를 호출 등)을 하면 된다. 그런데 이러한 콜백을 이용한 비동기 처리는 아래와 같이..
[JavaScript] this this this가 가리키는 것은 환경에 따라 변할 수 있지만(dynamic binding(동적 바인딩) : this가 환경에 따라 바뀌는 것), 객체의 메서드인 경우에는 해당 객체를 가리키게 된다. 이 때, 객체의 메서드가 화살표 함수 () => {}로 호출된다면 this는 함수가 생성된 환경을 가리키고, 일반함수 function() {}는 this가 함수를 호출한 환경을 가리키게 된다. 아래 코드를 보면 test1()는 실행될 때 새로운 컨텍스트를 생성하기 때문에 this가 global을 가리킨다. 반면, test2()는 함수 컨텍스트를 생성하며 this는 자신을 호출한 환경인 부모 o를 가리키게 되는 것이다. let o = { name: "An", test1: () => { console.log(t..
[JavaScript] map(), filter(), reduce() map() callback : 새로운 배열 요소를 생성하는 함수 반환값 : 새로운 배열 아래 코드 예시를 보면, map()을 통한 결과는 새로운 배열을 반환했기 때문에 result[0]의 자리를 바꾸어도 기존 array에는 영향을 주지 않는 것을 알 수 있다. 하지만, copy는 array의 메모리 주소를 복사하여 두 객체가 동일한 메모리 주소 값을 가지고 있기 때문에 결과적으로 copy[0]의 값을 바꾸면 array의 값에도 영향이 가는 것이다. let array = [1, 2, 3]; let result = array.map((num)=> num); result[0] = 40;// [1, 2, 3] let copy = array; copy[0] = 40;// [40, 2, 3] 내장 객체 이용하기 l..
[JavaScript] 문자열 추출하기 : slice(), splice() 이상하게.. 저 두 함수가 너무 헷갈려서 정리해봤다. slice() Array.slice(begin, end) : 어떤 배열의 begin부터 end(미포함)까지 새로운 배열을 반환한다. 만약 end가 없을 경우 배열의 끝까지 추출한다. 음수는 배열의 끝에서부터 길이를 나타낸다. begin Optional : 추출 시작점 인덱스 end Optional : 추출 종료한 인덱스 (end 인덱스를 제외하고 추출) 반환값 : 새로운 배열 let alphabet = ['a', 'b', 'c', 'd', 'e']; // 0 1 2 3 4 // -5 -4 -3 -2 -1 let result1 = alphabet.slice(0, 2); // ['a', 'b'] let result2 = alphabet.slice();//..
[JavaScript] ES6 Rest, Spread Operator Rest Operator 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다. 함수 인자 function getMin(...rest) {// 인자들을 배열로 담음 return rest.reduce((a, b) => a < b ? a : b) } getMin(7, 4, 5, 1)// 1 배열 let arr = [1, 2, 3, 4, 5]; let [head, ...tail] = arr;// arr 배열의 첫 번째 원소를 head, 나머지 값들을 tail에 배열로 묶음 객체 let o = { name: "Daniel", age: 23, address: "Street", job: "Software Engineer", }; let { age, name, ...rest } = o;// age, nam..
[JavaScript] DOM, Document, Node란? DOM (Document Object Model) 객체 지향 모델로써 구조화된 문서를 표현하는 방식으로, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다. Document 객체 웹 페이지를 의미하며, 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 사용한다. 메소드 설명 document.createElement() 요소 생성 document.getElementById() id 요소 선택 document.getElementsByClassName() class 요소 선택 document.getElementsByName() name 속성값 요소 선택 document.getElementsByTagName() tag 요소 선택 document.getAttribute() 특정 태그가..
[JavaScript] 이벤트 등록 및 삭제하기 : EventListener EventListener 등록하기 1. onclick="function-name()" click 2. el.addEventListener('type', function-name, _option_); var target = document.getElementById('btn'); function buttonOnclick() { console.log("button click!"); } target.addEventListener('click', buttonOnclick); 3. el.addEventListener('type', function() {}); target.addEventListener('click', function() { console.log("button click!"); // button e..