I'm a Fig, Not a Pig

목차 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), 두..

.entries() entries() 메서드는 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다. -MDN 자바스크립트의 타입 중 객체는 배열처럼 하나가 아닌 여러 개의 값을 키, 밸류 형태로 가지고 있다. 만약 객체가 가진 모든 키와 값을 확인하길 원하는 경우라면 entries()를 사용하면 편리하다. entries()는 객체가 가지고 있는 모든 프로퍼티를 키와 값 쌍으로 배열 형태로 반환하여 주기 때문에 어떤 프로퍼티와 값으로 이루어졌는지 한 눈에 확인할 수 있다. 구문 Object.entries() // 모든 프로퍼티와 값을 배열로 반환함 예제 let a = ['a', 'b', 'c']; let iterator = a.entries(); for (let..

▷ 자바스크립트 타입 변환 (X to string) 숫자나 불리언을 문자열로 형변환 하는 방법은 3가지 정도입니다. 1. (숫자 or 불리언).toString() 2. String(숫자 or 불리언) 3. "" + (숫자 or 불리언) 1. 숫자를 문자열로 변환 (number to string) 1. (숫자).toString() : Object.prototype.toString 메서드를 활용하는 방법 (111).toString() // "111" (NaN).toString() // "NaN" (Infinity).toString() // "Infinity" 2. String(숫자) : String 생성자 함수를 new 없이 활용하는 방법 String(111) // "111" String(NaN) // "N..