I'm a Fig, Not a Pig

목차 1. find() 2. 예제 3. filter()와의 차이 1. find() ES5에서 배열의 요소를 찾으려면 indexOf() 또는 lastIndexOf() 메서드를 사용한다. 그러나 이러한 메서드는 일치하는 첫 번째 요소의 인덱스만 반환하기 때문에 매우 제한적이다. ES6에서는 Array.prototype 객체에 find()라는 새로운 메서드가 추가되었다. find() 메서드는 제공된 함수를 충족하는 배열의 첫 번째 요소를 반환한다. find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. -MDN 구문 find(callback(element[, index[, array]])[, thisArg]) 2. 예제 1. 숫자..

목차 1. Local Storage 2. localStorage 사용 방법 3. setItem(), getItem() 4. JSON.stringify() 5. JSON.parse() 1. Local Storage 한마디로 브라우저에서 작은 정보를 기억해 줄 수 있는 공간이다. 이 공간에 저장한 데이터는 브라우저 기능을 이용하거나 데이터를 직접 삭제하지 않는 이상, 새로고침을 하거나 창을 껐다가 키는 것으로는 삭제되지 않는다. 따라서 이 공간에 todo를 저장해서 활용할 수 있다. 2. localStorage 사용 방법 setItem() - key, value 추가 getItem() - value 읽어 오기 removeItem() - item 삭제 clear() - 도메인 내의 localStorage 값 ..

목차 1. flat() 이란? 2. flat() 예제 3. flatMap() 이란? 1. flat()이란? flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다. - MDN 간단히 말해 배열 내부의 하위 배열을 쉽게 합칠 수 있는 메서드이다. 2. flat() 예제 const exampleArray = ["a", ["b"], ["c"]]; 위와 같은 배열을 ['a', 'b', 'c'] 와 같이 만들고 싶을 때 기존에는 concat과 reduce를 사용해서 배열을 합했다. 이 때 flat을 사용하면 간단히 배열을 합칠 수 있다. const exampleArray = ["a", ["b"], ["c"]]; const newArray = exampleArray...

목차 1. 옵셔널 체이닝 2. 단락평가 3. ?.()와 ?.[] 4. 정리 1. 옵셔널 체이닝 옵셔널 체이닝(.?)을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근 할 수 있다. 이해하기 쉽도록 예제를 통해 알아보자. 사용자가 여러 명 있는데 그 중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이때 사용자의 주소정보를 알기 위해 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 옵셔널 체이닝이 추가되기 전에는 이런 문제를 해결하기 위..

목차 1. Array.prototype.reduce() 2. 예제 1. Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. -MDN reduce는 보통 배열의 요소들을 하나의 결과로 합치는 용도로 많이 사용한다. - 구문 arr.reduce(callback[, initialValue]) 구문을 이루는 각 요소들은 다음과 같다. 1. callback function reduce 함수는 네 개의 인자를 가진다. 누산기 (acc): accumulator는 callback함수의 반환값을 누적함 현재 값 (cur): 배열의 현재 요소 현재 인덱스 (idx): 배열의 현재 요소의 인덱스 원본 배열 ..

목차 1. Array.prototype.filter() 2. 예제 3. filter 특징 1. Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. -MDN filter 함수는 해석 그대로 걸러주는 역할을 하는 함수이므로 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용한다. - 구문 arr.filter(callback(element, index, array), thisArg) 구문을 이루는 각 요소들은 다음과 같다. ▷ arr - 순회하고자 하는 배열 ▷ element - 현재 배열의 요소 ▷ index(생략 가능) - 현재 배열 요소의 index ▷ array(생략 가능) - filter 함수를 호..

for() forEach() map() 기본 형식 for ( 초기문; 조건문 증감문 ) { 실행문; } 배열명.forEach(function(매개변수) { 실행문; }); 배열명.map(function(매개변수){ 실행문; }); 설명 - 조건식에 부합하면 멈추지 않고 계속 순회한다. - 멈추고 싶은 경우 'break';를 사용하면 된다. - 반복문 기능을 지닌 배열 메서드이다. - 배열의 요소를 순회하며, 모두 순회하면 실행을 멈춘다. - 'break'; 사용이 불가하다. - for문보다 속도가 빠르다. - map도 반복문 기능을 가지지만, 반환값이 있다는 점에서 forEach와 다르다. - 배열의 요소를 순회하며, 모두 순회하면 실행을 멈춘다. - 'break'; 사용이 불가하다. - 기존 배열의 값..

innerHTML, innerText, textContent 이 셋의 차이점 찾아보다가 innerHTML의 위험성이라는 글을 보게 되었고.. innerHTML만 써왔던 사람으로서 insertAdjacentHTML의 필요성을 몰랐기 때문에 정리 해보려 한다. 따라서 이번 포스팅에서는 innerHTML의 위험성과 더불어 HTML 요소를 추가할 수 있는 또 다른 방법인 insertAdjacentHTML메서드에 대해 다룰 것이다.   1. innerHTMLinnerHTML 프로퍼티는 HTML에 새로운 HTML 요소를 추가하거나 특정 HTML 요소 내부에 작성된 내용(HTML 요소를 포함)을 가져오는 데 사용한다.  구문element.innerHTML( text )  예시아래는 간단한 HTML 마크업이다. ca..

JavaScript에서 값을 비교하기 위해 == 연산자와 === 연산자를 사용합니다.두 연산자는 값이 일치하면 true를 반환하며, 값이 일치하지 않으면 false를 반환합니다. 1. == 연산자 == 연산자는 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교합니다. 따라서 타입을 비교하지 않으므로 === 연산자에 비해 느슨하다고 할 수 있습니다. 예제) 10 == 10 // true 10 == '10' // true true == 1 // true true == '1' // true true == 'true' // false null == undefined // true 2. === 연산자 == 연산자는 값을 비교하기 전에 타입이 다를 경우 타입을 변환 후 값을 ..

.join() join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다. 구문 arr.join([separator]) 예제 let a = ['바람', '비', '불']; let mylet1 = a.join(); // mylet1에 '바람,비,불'을 대입 let mylet2 = a.join(', '); // mylet2에 '바람, 비, 불'을 대입 let mylet3 = a.join(' + '); // mylet3에 '바람 + 비 + 불'을 대입 let mylet4 = a.join(''); // mylet4에 '바람비불'을 대입 .slice() slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용한다. 첫번째 인자로 시작 인덱스(index), 두..