/ FRONTEND

클린코드 자바스크립트 5-1 배열 다루기(JS의 배열은 객체다, Array.length, 배열 요소에 접근하기)

Clean Code JS 강좌는 여러 절로 구성되어 있습니다.

배열 다루기 😎

JS의 배열은 객체다👍

const arr = [1, 2, 3];
arr[3] = "test";
arr["property"] = "string value";
arr["obj"] = {};
arr[{}] = [1, 2, 3];
arr["func"] = function () {
  return "hello";
};

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 1 2 3 출력

console.log(arr);
// 1 2 3 test property:'string value' obj:{} '[object Object]':[1,2,3] func: ... 출력

const obj = {
  arr: [1, 2, 3],
  3: "test",
  property: "string value",
  obj: {},
  "{}": [1, 2, 3],
  func: function () {
    return "hello";
  },
};
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 1 2 3 출력

console.log(arr);
// 1 2 3 test property:'string value' obj:{} '{}':[1,2,3] func: ... 출력

arr = [1, 2, 3];

arr = {
  0: 1,
  1: 2,
  2: 3,
};

const arr = "[1,2,3]";
console.log(Array.isArray(arr)); // false

const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true

Array.length👍

  • 배열의 길이보다는 배열의 마지막 순서 번호에 가깝다.
const arr = [1, 2, 3];
console.log(arr.length); // [1,2,3] 3
arr.length = 10;
console.log(arr.length); // [1,2,3,,,,,,] => 10

const arr = [1, 2, 3];
arr[3] = 4;
console.log(arr.length); // 4
arr[9] = 10;
console.log(arr.length); // [1,2,3,,,,,10] 10

Array.prototype.clear = function () {
  this.length=0;
}

function clearArray(array) {
  array.length = 0;
  return array;
}

const arr = [1,2,3]
arr.clear()
const.log(arr) // []

const arr2 = [1,2,3]
console.log(clearArray(arr2)) // []

배열 요소에 접근하기👍

  • 단순히 0,1로 접근하는게 아닌 명시적 표현을 사용한다.
function operateTime(input, operators, is) {
  inputs[0].split('').forEach((num) => {
    cy.get.('.digit').contains(num).click();
  };

  inputs[1].split('').forEach((num) => {
    cy.get.('.digit').contains(num).click();
  });
}

// React useState와 유사
function operateTime2(input, operators, is) {
  const [firstInput, secondInput] = inputs
  firstInput.split('').forEach((num) => {
    cy.get.('.digit').contains(num).click();
  });

  secondInput.split('').forEach((num) => {
    cy.get.('.digit').contains(num).click();
  });
}

// 명시적 표현(변수) 생성
function operateTime3(firstInput, secondInput, operators, is) {
  const [firstInput, secondInput] = inputs
  firstInput.split('').forEach((num) => {
    cy.get.('.digit').contains(num).click();
  });

  secondInput.split('').forEach((num) => {
    cy.get.('.digit').contains(num).click();
  });
}

operateTime3([1,2],1,2);

const confirmbtn = document.getElementsByTagName("button")[0];
const cancelbtn = document.getElementsByTagName("button")[1];
const resetbtn = document.getElementsByTagName("button")[2];

const [confirmbtn, cancelbtn, resetbtn] =
  document.getElementsByTagName("button");

functon formatDate1(targetDate) {
  const date = targetDate.toISOString().split('T')[0];

  const [year, month, day] = date.split('-');

  return `${year}년 ${month}월 ${day}일`;
}

functon formatDate2(targetDate) {
  const [date] = targetDate.toISOString().split('T');

  const [year, month, day] = date.split('-');

  return `${year}년 ${month}월 ${day}일`;
}

// 배열 맨 앞을 나타내는 함수 생성 ?(명시적 표현)
function head(arr) {
  return arr[0] ?? ''
}

functon formatDate3(targetDate) {
  const [date] = head(targetDate.toISOString().split('T'));

  const [year, month, day] = date.split('-');

  return `${year}년 ${month}월 ${day}일`;
}