JS 코딩의 기술) 1일차

 

오늘부터 그동안 공부했던것과 앞으로 공부할 것들을 정리하여 올릴 예정이다.

이 글을 포함한 이후의 2개의 글은 이전에 공부했지만 정리를 못한 부분이다.

 

이 글은 배열에 대해 공부한 내용이다.

 

1. 배열로 컬렉션을 생성

배열을 깊이 이해하면 코드를 상당히 개선할 수 있다.

우선 Object.keys() 를 이용하여 객체를 순회시키자

✅순서1️⃣Object.keys()를 실행시킴 2️⃣객체의 키(key)를 배열생성 후  담음 3️⃣ 생성된 배열을 이용해 순회

예시의 코드를 보자

const game1 = {

  player: `jim`,

  hits: 2,

  runs: 1,

  errors: 0,

};

const game2 = {

  player: `kim`,

  hits: 3,

  runs: 0,

  errors: 1,

};

const total = {};

const stats = Object.keys(game1);

for (let i = 0; i < stats.length; i++){

  const stat = stats[i];

  if (stat !== `player`) {

    total[stat] = game1[stat] + game2[stat];

  }

}

위의 코드에서 Object.keys(game1); 로 key가 들어간 배열 생성 후 for문에서 순회를 하는 모습이 보인다.

if문에서 player가 아닌 key값을 통해  total[stat] = game1[stat] + game2[stat];을 구한다.

 

🅾문자열처럼 자체적으로 이터러블이 존재하거나 Object.keys()처럼 이터러블로 변환알 수 있는 데이터 형식이라면 배

    열에 수행하는 모든 동작(순회가 필요한 동작)을 동일하게 실행 가능

❎이터러블이란? 컬렉션의 현제 위치를 알고 있는 상테에서 컬렉션의 항목을 한 번에 하나씩 처리하는 방법

 

이제 다른 컬렉션을 배열 형태로 바꾸어 보자. 객체를 예로 들겠다.

const dog = {

  name: `donk`,

  color: `brown`,

};

위와 같은 객체가 있다.

위의 객체를 배열을 적용하고 dog의 name의 값을 얻는 함수를 작성해보자.

const dogPair = [

  [`name`, `tang`],

  [`color`, `brown`],

];

 

function getName(dog) {

  return dog.find(attribute => {

    console.log(attribute);

    return attribute[0] === `name`;

  })[1]

}

위의 코드에서 키-값을 쌍으로 모은 배열로 만들었다.

그리고 return attribute[0] === `name`; 에서 0번째의 값이 `name`이면 return시켜주고

마지막에 그 배열의 1번 값을 리턴해주며 마무리된다.

 

 

 

2. Includes()를 이용하여 존재 여부를 확인

우선 존재여부를 확인 하는 것은 배열, 삼항 연산자와 단락 평가를 비롯한 대부분의 조건문에서 중요하다.

기존에 배열에서 존재여부를 확인하는 것은 위치를 알아야하고, 색인으로 위치를 확인하고 존재한다면 위치를 반환하지만 존재하지 않다면 -1을 반환한다. 하지만 색인이 0이 될수 도 있는데 이는 거짓으로 평가된다.

만일 0으로 반환된다면 숫자와 비교하는 과정을 거쳐야 한다. 아래의 코드를 보자

const sections2 = [`connect`, `shopping`];

function displayShipping2(sections2) {

  return sections2.indexOf(`connect`) > -1;

}

//true

return sections2.indexOf(`shipping`) > -1; 에서 contact 의 인덱스 값이 0이지만 -1과 비교하여 true값이 반환되었다.

하지만! inclue()라는 새로운 메서드를 이용하면 배열에서의 존재여부를 참/거짓으로 반환한다. 아래의 코드를 보자.

const sections3 = [`connect`, `shopping`];

function displayShipping3(sections3) {

  return sections3.includes(`connect`);

}

//true

자! 위에서 숫자와 비교하는 과정 없이 참이라는 결과를 반환했다. 이러한 메서드를 이용하면 비교하는 과정을 누락하는 실수는 더이상 있을 수 없다.

 

 

 

3. 펼침 연산자의 기본 동작

펼침 연산자는 ... 점 3개로 구성되며 배열에 포함된 항목을 목록으로 바꿔줌.

사용시엔 단독으로 사용이 불가하다. ex) ❌ ...arry    ⭕ const arry2 = [...arry1];

splice()를 사용하여 배열에 접근을 하면 원본 배열을 조작해서 원본이 바뀐다는 단점이 있다.

또한 removeItem()도 원본을 조작한다. 원본이 조작되면 함수에서 사용되면 오류발생 확률이 높다.

이러한 문제점을 해소한 방법중 한개는 slice()와 concat()을 사용하는 방법이다. 예를 들어보자.

 

function remove(item, state) {

  const indexNo = item.indexOf(state);

  return item.slice(0, indexNo).concat(item.slice(indexNo + 1));

}

이렇게 사용하면 되지만, 이 코드는 이 코드는 두개의 배열을 생성해서 하나로 합친다.

무엇이 반환되는지 명확하게 알 수가 없다.

하지만 펼침 연산자를 사용하여 만든 코드는 가독성이 좋고, 간결하고, 재사용 및 예측이 쉽다라는 장점을 갖기에 사용에 용이하다. 예를 보자.

function removeItem(item, state) {

  const index = items.indexOf(state);

  return [...item.slice(0, index), ...item.slice(index + 1)];

}

정말 간단하고 명확하게 보여진다. 또 다른 예제를 보자.

const book = [`노인과 바다, `해밍웨이`, 15000];

function bookForm(title, author, price) {

  return `${title} by ${author} ₩${price}`;

}

console.log(formatBook(book[0], book[1], book[2]));  //출력

 

하지만, 위의 코드를 펼침 연산자를 이용해 바꾸면 아래와 같다.

function formatBook(title, author, price) {

  return `${title} by ${author} $${price}`;

}

console.log(formatBook(...book));  //출력

이렇게 펼침 연산자를 이용하면 배열을 인수목록으로 간단하게 바꿀 수 있다.

 

 

 

 

오늘은 여기까지이다. 앞으로도 정리해야 할 것들이 많다....

윽.......

 

하지만 오늘도!!!

Just 두 IT!!!