후발대 강의 - 배열

객체는 속성과 메서드를 가진다.

 

속성은 눈,코,입,손,발

메서드는 팔을 흔든다, 말을 한다, 눈을 깜박인다

 

함수 vs 메서드

testFunc() vs obj.testFunc()

메서드는 호출의 주체가 명확하다 

함수는 호출의 주체가 없다

 

배열도 객체다!

키, 밸류를 가졌다.

array = {
  0: "값",

  1: "값",

  2: "값",

  length: 3,
};

 

Quiz! 빈 배열을 만들고 그 안에 인덱스 200번째에 값을 넣으면 length는 어떻게 될까? 

let arr = [];
arr[200] = 2;
console.log(arr.length);

답은 201 

 

인덱스가 0부터 시작하기 때문에 length는 +1이 된다.

 

length = 배열의 마지막 index + 1을 의미할 뿐이다.

 

배열 안에 들어갈 요소들은 다 다를 수 있다. (다른 언어에서는 그렇지 않다)

숫자, 문자열, 함수, 배열이 들어갈 수 있다.

let arrary = [
  1,
  "seon",
  function () {
    return "hi";
  },
  [2, 3, 4],
];

 

push vs pop (First In Last Out) (Stack)

push: 배열의 제일 뒤에 새 요소가 들어간다

pop: 배역의 마지막 요소를 없앤다.

 

let testarr1 = [];
testarr1.push(3);
testarr1.push("야옹");
testarr1.push("23");

console.log(testarr1);
// 결과 [ 3, '야옹', '23' ]

testarr1.pop();

console.log(testarr1);
//결과 [ 3, '야옹' ]

 

unshift vs shift (First In First Out) (Queue)

unshift: 배열의 제일 앞에 새 요소가 들어간다. (un이 들어가는게 넣는거네? 헷갈림)

shift: 배열의 제일 앞의 요소를 없앤다. 

let testarr1 = [];
testarr1.unshift(3);
testarr1.unshift("야옹");
testarr1.unshift("23");

console.log(testarr1);
//결과 [ '23', '야옹', 3 ]

testarr1.shift();
console.log(testarr1);
//결과 [ '야옹', 3 ]

 

push, pop vs unshift, shift

shift와 unshift는 요소를 하나 넣고 뺄 때마다 모든 요소들의 인덱스를 고쳐야해서 

push, pop 보다 비효율적이다. 그래서 우리는 push, pop 를 보통 쓴다.

 

 

반복문 

배열은 length라는 속성 때문에 반복문에 최적화 되어있다.

 

반복문으로 배열 요소를 뽑는 방법 3가지

기본 for문

for in (인덱스 뽑기)

for of (밸류 뽑기)

//일반적 반복문
for (i = 0; i < testArr.length; i++) {
  console.log(testArr[i]);
}

//for in(인덱스를 가져온다)
for (key in testArr) {
  console.log(testArr[key]); //값을 가져오기 위해 배열에 인덱스를 붙인다
}

//for of (값을 가져온다)
for (a of testArr) {
  console.log(a);
}

배열아닌 객체로도 된다고 해서 시험해 보았다.

let obj = {
  0: "하",
  1: "호",
  2: "히",
  3: "헤",
  4: "흥",
};

for (item in obj) {
  console.log(obj[item]);
}

//결과
// 하;
// 호;
// 히;
// 헤;
// 흥;

for (item of obj) {
  console.log(item);
}

//for of를 썼을 때 결과는 오류가 난다. 왜지?

Dom조작해서 li를 만들어서 넣어보자

let litag1 = document.createElement("li");
litag1.textContent = "선형";
document.querySelector("ul").appendChild(litag1);

let litag2 = document.createElement("li");
litag2.textContent = "선형";
document.querySelector("ul").appendChild(litag2);

let litag3 = document.createElement("li");
litag3.textContent = "선형";
document.querySelector("ul").appendChild(litag3);

//반복문을 이용하면 반복되는 부분을 똑같이 안 써줘도 된다. 그리고 데이터가 늘어나도 문제 걱정 없다. 
let animals = ["완두", "자두", "호두", "삐두", "박두"];

for (mylove of animals) {
  let litag = document.createElement("li");
  litag.textContent = mylove;
  document.querySelector("ul").appendChild(litag);
}

 

append vs appendChild

append: 태그 없는 문자열도 넣을 수 있다.

appendChild: 태그 없는 문자열은 넣을 수 없다.

 

let text = "안녕";
document.querySelector("ul").append(text); // 코드가 들어간다

document.querySelector("ul").appendChild(text);// 에러가 뜬다.

//에러 메세지 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

 

Quiz! 배열 항목에서 2의 배수만 제외한 값을 산출하기

let testArr = [2, 31, 24, 40, 65, 86, 17, 38, 99, 100];

for (i = 0; i < testArr.length; i++) {
  if (testArr[i] % 2 === 0) {
    console.log(testArr[i]);
  }
}

원래 나의 답은 i를 넣어서 틀렸었다. i는 값이 아니라 인덱스!

 

 Quiz! 배열항목에서 2의 배수만 제외한 값을 배열에 넣어서  산출하기

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
let oddNum = function (array) {
  let newArr = [];
  for (num of array) {
    if (num % 2 !== 0) {
      newArr.push(num);
    }
  }
  return newArr;
};

console.log(oddNum(numbers));