오늘의 CODE

arr.reduce(callback [,initialValue]) 자바스크립트의 reduce 함수는 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환한다. 파라미터 1. callback function accumulator - accumulator는 callback 함수의 반환값을 누적 currentValue - 배열의 현재 요소 index(Optional) - 배열의 현재 요소의 인덱스 array(Optional) - 호출한 배열 callback 함수의 반환 값은 accumulator에 할당되고 순회 중 계속 누적되어 최종적으로 하나의 값을 반환한다. 2. initialValue(Optional) 최초 callback 함수 실행 시 accumlator 인수에 제..

요소를 더하거나 지우기 Array.push(...items) - 맨 끝에 요소 추가 const list = [1, 2, 3, 4, 5]; list.push(6); // 6 list; // [1, 2, 3, 4, 5, 6] Array.pop() - 맨 끝 요소 추출 const list = [1, 2, 3, 4, 5]; list.pop(); // 5 list; // [1, 2, 3, 4] Array.unshift() - 맨 앞에 요소 추가 const list = [1, 2, 3, 4, 5]; list.unshift(0); // 0 list; // [0, 1, 2, 3, 4, 5] Array.shift() - 맨 앞에 요소 추출 const list = [1, 2, 3, 4, 5]; list.shift(); /..

undefined는 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다. null과 undefined는 둘다 Javascript의 여섯가지 기본값에 포함되며, Javascript의 falsy value에 포함된다. 여섯가지 기본값(Six primitive value in Javascript) Boolean Null Undefined Number String Symbol falsy value false 0 (zero) "" (empty) null undefined NaN (Not a Number) typeof를 통해 자료형을 확인해보면 typeof null // 'object' typeof undefin..

배열과 객체에 사용할 수 있는 반복문으로 for in은 배열의 인덱스에 접근하여 값을 반환하는 반면 for of는 배열의 값 자체에 접근한다. let arr = [10, 20, 30]; for(let num of arr) { console.log(num); // for of 반복문의 콘솔 10 20 30 } for(let num in arr) { console.log(num); // for in 반복문의 콘솔 0 1 2 } for in은 객체의 속성을 순회하기 위해 배열의 속성이자 key에 해당하는 index를 반환하며 순회한 것이며 for of는 반복 가능한 배열의 요소를 순회하기 때문에, data를 직접 순회한 것이다. for in - 객체의 열거 가능한 속성에 대해 반복한다. for of - 반복 ..

정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴으로 자바스크립트에서 정규 표현식 또한 객체이다. 1. 정규식 만들기 // 정규식 리터럴 const re = /ab+c/; // 생성자 함수 호출 const re = new RegExp("ab+c"); 생성자 함수 사용 시 정규식이 실행 시점에 컴파일된다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에 생성자 함수를 사용하면 된다. 2. 정규식 패턴 작성하기 정규식 패턴은 /abc/ 같이 단순 문자로 구성될 수도 있고, /ab*c/ 또는 /Chapter (\d+)\.\d*/와 같이 단순문자 + 특수문자의 조합으로 구성될 수 있다. 특수문자의 사용에 대해서는 아래의 ..

아이콘은 fontawesome 5버전으로 사용 London London is the capital and largest city of England, the United Kingdom, and the European Union. Standing on the River Thames in southeastern England, at the head of its 50-mile (80 km) estuary leading to the North Sea, London has been a major settlement for two millennia. Madrid Madrid is the capital of Spain and the largest municipality in both the Community of M..

페이지 전환(이동) 시 Transition effect 주기 - 구조 list 페이지 detail 페이지 2 list 페이지의 메뉴 클릭 시 각각의 detail 페이지로 이동하는데 이때 페이지 전환 시 transition 효과를 주고자 함. 메뉴에는 href로 detail 페이지를 지정해주었다. function isSameAsLocation(uriString) { const uri = new URL(uriString); return ( uri.origin === window.location.origin && uri.pathname === window.location.pathname ); } function pageTransition(ulList) { ulList.forEach((el) => { if (!..

객체와 배열을 변수로 '분해'할 수 있게 해주는 것을 구조 분해 할당(destructuring assignment)이라고 할 수 있다. 이 외에도 함수의 매개변수가 많거나 매개변수의 기본값 설정이 필요한 경우에도 구조 분해 할당을 활용할 수 있다. var x = [1, 2, 3, 4, 5]; var [y, z] = x; // 구조 분해 할당을 이용해 y는 x[0], z는 z[1]을 할당함. console.log(y); // 1 console.log(z); // 2 이제 인덱스를 이용해 배열에 접근하지 않고도 변수로 배열의 값을 사용할 수 있게 되었다. 아래의 예시처럼 split같은 반환값이 배열인 메서드와 함께 활용해도 좋다. let arr = ["Bora", "Lee"]; let [firstName, ..

trim() 메서드는 문자열 양 끝의 공백을 제거함. 여기서 공백이란 모든 공백문자 space, tab, 등과 같은 모든 개행문자를 의미함 if(!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); }; } return str 문자열의 양쪽 공백을 제거한 후 문자열을 반환 str 문자열에 공백이 없어도 예외가 발생하지 않고 새 문자열 반환(본질적으로 str의 복사본이라고 할 수 있음) 한쪽 끝의 공백만 제거한 문자열을 반환하려면 trimStart() 또는 trimEnd() 메서드를 사용할 것 폴리필(polyfill) 다른 코드 전에 아..

객체를 합치거나 합칠 때 2개의 객체가 같은 프로퍼티를 가지고 있다면 그 값을 덮어쓰기 해주며, 객체의 복제에서도 사용할 수 있음. (object.assign은 폼(form) 등에 빈번히 이용됨) 1. 오브젝트를 합치기 const target = {a: 1, b: 2} const sources = {c: 3, d: 4} const returnedTarget = Object.assign(target, sources); console.log(target); // { a: 1, b: 2, c: 3, d: 4 } console.log(sources); // { c: 3, d: 4 } console.log(returnedTarget); // { a: 1, b: 2, c: 3, d: 4 } 2. 같은 프로퍼티를 가..