23.7.17 - 23.7.18 TIL

김진주·2023년 7월 18일

TJL(Today Jinju Learned)

목록 보기

25/35

📌23.7.17

🏷️arrayMethod

Array.isArray

기존에 사용하던 typeof는 언어가 가지는 오류 때문에 Null이나 배열의 타입을 알 수 없었다.

그래서 Array.isArray이 나왔는데 다음과 같이 사용하면 배열의 타입을 알아낼 수 있었다. 하지만 Null은 타입을 알기 어려운데 이것은 toString을 사용하면 알아낼 수 있다.

toString은 모든 타입이 가지고 있지만 찐객체가 가지고 있는 toString을 사용하면
우리가 무슨 타입을 사용하고 있는지 정확하게 알려준다.
toString, toLowerCase 와 slice를 사용하여 원하는 값을 얻어낼 수 있다. 그걸 이용해 다음과 같은 유틸 함수를 만들었다.

// isArray 화살표함수.ver
const isArray = (data) =>
  Object.prototype.toString.call(data).slice(8, -1).toLowerCase() === 'array';
//isArray 일반함수.ver
function nomalIsArray(data) {
  return (
    Object.prototype.toString.call(data).slice(8, -1).toLowerCase() === 'array'
  );
}
//isNull 화살표 함수.ver
const isNull = (data) =>
  Object.prototype.toString.call(data).slice(8, -1).toLowerCase() === 'null';
//isNull 일반함수.ver
function normalIsNull(data) {
  return (
    Object.prototype.toString.call(data).slice(8, -1).toLowerCase() === 'null'
  );
}

`toSorted`, `toReversed`, `toSpliced`

올해 2023년에 새롭게 나온 메소드인 toSorted, toReversed, toSpliced를 사용해 봤다. 이름만 봐도 기존의 메소드와 비슷해서 무슨 일을 하는지 알 수 있었다.

그럼 나온 이유가 무엇이나 하면
기존의 sort, reverse, splice는 원형을 파괴하는 메소드였다.
하지만 이번에 새로 나온 메소드들은 기존과 같은 일을 하되, 원형을 파괴시키지 않는다.

const arr = [10, 100, 1000, 10000];

// toSorted => 원형을 파괴하지 않음 
const toSorted = arr.toSorted((a, b) => b - a);
 console.log(toSorted);

// toReversed => 원형을 파괴하지 않음 
const toReversed = arr.toReversed();
 console.log(toReversed);

// toSpliced => 원형을 파괴하지 않음 
 console.log(arr);
const toSpliced = arr.toSpliced(2, 0, 'js', 'css', 'react')
 console.log(toSpliced);

⭐⭐map⭐⭐

const job = people.map((item) => `<div>${item.profession}</div>`); 
document.body.insertAdjacentHTML('beforeend', job);
리스트가 잘 나왔지만 화면에 , 까지 출력이 되는 걸 볼 수 있다.
🤔왜 , 까지 출력이 되는 것일까?
✅ 정답 map() 메서드는 새로운 배열을 반환하기 때문에 job 변수에는 문자열 배열이 들어가게 된다.
그리고 insertAdjacentHTML() 메서드는 문자열을 HTML로 파싱하여 해당 위치에 삽입한다.
따라서 job 배열이 전달되면 각 문자열 요소가 콤마로 구분되어 삽입되게 된다

해결 방법

const job = people.map((item) => `<div>${item.profession}</div>`); 

// forEach문을 사용하면 원하는 결과값이 나오게 됨 
job.forEach((item) => document.body.insertAdjacentHTML('beforeend', item))

reduce

reduce를 배울 때 acc의 초기값을 설정해주지 않으면 0이 선언되는 것으로 알고 있었다.

const totalAge = people.reduce((acc, cur) => acc + cur.age);

이렇게 코드를 작성해주었는데 원하지 않는 값이 나왔다.

사실 reduce의 초기값은 배열에서 아이템으로 넘어온 대상을 초기값으로 설정한다.
숫자를 넣을 경우 숫자를 초기값으로 지정하므로 간단한 숫자를 더하거나 뺄 경우는 문제가 되지 않으나
배열안에 다른 자료구조가 있는 경우에는 이를 정확하게 인식할 수 있도록 initialValue를 설정해주는게 좋다.
<reduce안에서 acc자체만 출력했을때는 객체 자체가 나오기 때문에 숫자만 다루는 배열이 아닌 다른 자료구조가 들어오는 경우는 초깃값을 숫자로 지정해주어야 합니다 🙂>

따라서 위에 코드는 다음과 같이 수정할 수 있다.

const totalAge = people.reduce((acc, cur) => acc + cur.age, 0);

console.log(totalAge);

🏷️try catch문

JS에서는 에러가 발생하면 페이지가 동작하지 않는다. 이런 문제를 해결하기 위해 try..catch문을 사용하면 된다.

try {
  let a = 5;
  a + b // try catch문을 쓰지 않으면 b가 정의되어 있지 않다는 에러메시지와 함께 에러가 발생한다.
} catch(e) {
  console.log(e.name);
  console.log(e.message);
  console.log(e.stack);
}

error 메시지는 name, message, stack 3가지로 구성되어 있다.

🏷️bom

📌23.7.18

🏷️nodeClass

/* 노드 콘텐츠 읽기/쓰기 ---------------------------------------------------- */

// - innerHTML
// * 기존 내용 삭제
// * 기존 내용과 새로운 내용을 합친 새로운 내용을 씀
first.innerHTML = '<div>helloooooooo</div>'; //html을 추가하는 것이기 때문에 위험하다

// - textContent
// * 요소 내의 텍스트에 접근
// * 태그는 제외하고 오로지 텍스트만 추출
console.log((first.textContent = 'hh'));

🏷️attribute

표준속성

attributes는 iterable 하기 때문에 for...of문을 사용할 수 있다.

비표준 속성

🏷️style

elementNode.style.porp은 getter로는 사용 불가능한 이유?

해당 요소에 직접적으로 backgroundColor 속성이 지정하면 사용할 수 있지만 그렇지 않은 경우에는 계산되기 이전 값을 가져오기 때문에 사용할 수 없다.

그럼 스타일을 가져올 수 없느냐
그건 아니다

// - getComputedStyle(element, [pseudoElement]) `읽기 전용`
console.log(getComputedStyle(first).fontSize); // 32px / 아래와 같음
console.log(getComputedStyle(first).getPropertyValue('font-size')); // 32px

getComputedStyle를 사용하면 값을 찾아올 수 있다.

수업에서 getCss(), setCss() 유틸 함수를 만들었는데
수업시간에 만든 것은 케밥 케이스로만 값을 입력해야 함수가 제대로 작동하는 것만 만들었다.
하지만 둘 중 아무거나 사용해도 제대로 작동할 수 있도록 만들고 싶어 수정해 보았다.

function getCss(node, prop) {//'font-size'.indexOf('-')
  if(typeof node === 'string') node = getNode(node)
  
  if(!(prop in document.body.style)) {
    throw new SyntaxError('getCss 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다')
  }

  return getComputedStyle(node).getPropertyValue(prop)
}

수업시간에 내가 작성한 코드다 여기서 무엇을 추가하면 카멜 케이스로 사용할 수 있을 까 생각해보았는데 indexOf()를 사용하면 될 것 같아 다음과 같이 수정해 보았다.

function getCss(node, prop) {//'font-size'.indexOf('-')
  if(typeof node === 'string') node = getNode(node)
  
  if(!(prop in document.body.style)) {
    throw new SyntaxError('getCss 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다')
  }

  if(prop.indexOf('-') == -1) return getComputedStyle(node)[prop] 
  return getComputedStyle(node).getPropertyValue(prop)
}