Programming/Javascript (11) 썸네일형 리스트형 Closure 클로저 function outerFunc(init_count){ let count = init_count ?? 0; return function(add){ count += add ?? 1; return count; };};let counter = outerFunc(1); // 출력값:1counter(); // 2counter(2); // 4outerFunc를 호출한 반환 함수가 counter 변수에 들어감counter가 함수가 되어 호출할때 outerFunc 안의 count 변수에 접근하여 값을 가져옴 클로저함수가 선언될 당시의 렉시컬 환경(Lexical Environment)을 기억해, 함수 실행이 끝난 뒤에도그 내부에서 선언된 변수들에 계속 접근할 수 있는 함수 ※ 렉시컬 환경(Lexical.. google 광고 제거 for(let ele of document.querySelectorAll("[name*=google]")){ ele.remove();}for(let ele of document.querySelectorAll("[class*=google]")){ ele.remove();}for(let ele of document.querySelectorAll("[src*=google]")){ ele.remove();}for(let ele of document.querySelectorAll("[id*=google]")){ ele.remove();}크롬에서 [F12] 후 아래 내용을 덮어쓰기 Javascript 프로미스 promise 비동기 async await JS const p1 = new Promise((resolve, reject) => { resolve('success');});p1.then((data) => console.log(data)); // successconst p2 = new Promise((resolve, reject) => { reject('error');});p2.catch((data) => console.log(data)); // errorp1.then((data) => {console.log(data); return 'success2'}) // success.then((data) => {console.log(data); return 'success3'}); // success2// Promise {: 'success3'}resolve.. 엔터와 공백문자를 +와 '로 이은 문자 변환기 HTML 삽입 미리보기할 수 없는 소스 정규 표현식 메소드 및 예시 정규 표현식 리터럴 1)슬래시로 패턴을 감쌈 2)스크립트를 불러올 때 컴파일되므로, 패턴이 바뀔 일이 없을때 사용하면 성능 향상 const re = /ab+c/g; RegExp 객체의 생성자 1)String처럼 작성 2)런타임에 컴파일되므로, 패턴이 바뀔 수 있을때 사용할 것 const re = new RegExp('ab+c', 'g'); regexObj.exec(str) 1)일치 탐색을 수행한 결과를 배열 혹은 null로 반환 및 regExpObj.lastIndex를 처음 일치하는 문자열의 마지막 문자 인덱스로 설정 2)탐색을 실패하면 null을 반환, regExpObj.lastIndex를 0으로 설정 3)RegExp생성자의 두 번째 파라미터인 플래그값이 g 또는 y일 경우 regExpObj.lastI.. 정규 표현식 문자클래스(Character classes) 의미 . 행끝 문자를 제외한 모든 단일 문자와 일치 \d 임의의 숫자와 일치, [0-9]에 해당 \D 숫자가 아닌 모든 문자와 일치, [^0-9]에 해당 \w 밑줄을 포함한 영숫자 문자와 일치, [A-Za-z0-9_]에 해당 \W 밑줄과 영숫자가 아닌 모든 문자와 일치, [^A-Za-z0-9_]에 해당 \s 단일 공백 문자와 일치, [ \f\n\r\t\u00a0\u1680\u2000-\u200a\u2028\u202f\u205f\u3000\ufff]에 해당 \S 공백 이외의 단일 문자와 일치, [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]에 해당 \t 수평 탭과 일치 \r .. JavaScript Array Array.from(arrayLike[, mapFn[, thisArg]]) 1)유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다. Hamburger Pizza spaghetti Array.find(callback[, thisArg]) 1)주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. array.find(e => e > 3); Array.findIndex( callback(element[, index[, array]])[, thisArg] ) 1)주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으.. JavaScript loop const foods = ["hamburger", "pizza", "spaghetti"]; // in은 객체의 속성 또는 배열의 인덱스(속성)를 반환 for(let i in foods){ console.log(i); // "0", "1", "2" } // of는 배열의 원소를 반환 for(let i of foods){ console.log(i); // "hamburger", "pizza", "spaghetti" } const food = { name: "Hamburger", price: 3900, maker: "Frank Burger", }; // 객체의 내용 출력하기 // name Hamburger // price 3900 // maker Frank Burger // 방법1: in 활용 for(cons.. JavaScript destructuring destructuring 1)배열의 값 또는 객체의 속성을 별개의 변수로 정의 1-1)객체의 디스트럭처링 var emp = { name: "Wanda", age: 24, }; // 객체에서 변수 생성하기 var name = emp.name; var age = emp.age; // 위와 동일한 동작을 함 const {name, age} = emp; // emp.name을 가져옴 // 변수명은 nm이고 기본값을 "Vision"으로 설정 const {name:nm = "Vision"} = emp; 1-2)배열의 디스트럭처링 const emp = ["Wanda", "Vision", "Tony"]; // emp1, emp2에 순서대로 emp배열의 값이 들어간다. const [emp1, emp2] = emp; //.. JavaScript arrow function expression 1.function과 매개변수 부분 위치를 바꾼다. 2.function 을 => 로 바꾼다. 3.매개변수가 하나만 있으면 괄호를 생략할 수 있다. 4.한 줄의 코드이면 return 및 함수를 감싼 중괄호를 생략할 수 있다. const greeting = function(name){ return "hello " + name; }; // 1.function과 매개변수 부분 위치를 바꾼다. // 2.function 을 => 로 바꾼다. const greeting = (name) => { return `hello ${name}`; }; // 3.매개변수가 하나만 있으면 괄호를 생략할 수 있다. const greeting = name => { return `hello ${name}`; }; // 4.한 줄의 코드.. 이전 1 2 다음