210125_TIL

🍎 오늘 한 일

• 배열과 객체에 대해 학습
• Coplit - 배열 문제 풀기 및 제출
• socrative 배열, 객체 퀴즈 풀기

✍ 기억할 것들

배열을 다루는 method들

배열인지 아닌지를 확인하는 메서드

• Array.isArray(input) // --> true or false

배열의 element를 추가 또는 삭제하는 메서드

• arr.push(elem) : 배열의 맨 끝에 요소elem를 추가 (타입 그대로)
• arr.unshift(elem) : 배열의 맨 앞에 요소elem를 추가 (타입 그대로)
• arr.pop() : 마지막 요소를 제거
• arr.shift() : 맨 앞의 요소를 제거

배열이 특정 element를 포함하는지를 확인하는 메서드

• arr.indexOf(elem)
• arr.includes(elem)

배열의 일부분을 선택하여 새로운 배열을 만드는 메서드

• arr.slice(start, end) // 배열의 start에 해당하는 요소부터 end 바로 전의 요소까지를 선택하여 새로운 배열을 만든다.

배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 메서드

• arr.splice(start, count)
• array.splice( start, count, value1, value2, ... )

배열에 원소 또는 배열을 추가하여 새로운 배열을 만드는 메서드

• arr.concat(elem)
• arr.concar(arr2)

배열의 요소들을 glue를 접착제처럼 사용해 연결하여 하나의 문자열로 만드는 메서드

• arr.join(glue)

문자열을 구분자(delimiter) delim을 기준으로 쪼개 배열로 변환

• str.split(delim)

for...of 구문 vs. for...in 구문

• for of는 string과 array, 유사배열 등에서 사용이 가능한 반복문입니다.
  for (let arr[i] of arr)가 for (let i = 0; i < arr.length; i += 1) 과 같다고 생각하면 쉽습니다. 이후에 iterable object에 대해서 배우게 되면, for ~ of 문에 대해서 더 깊게 이해할 수 있습니다.
• for in 구문을 통해서 객체의 모든 key에 접근하고 출력할 수 있습니다.

console.table()

• 크롬 개발자도구에 console.log() 대신에 console.table()을 사용해서 배열의 index와 value를 표로 확인할 수 있다.

배열과 객체의 특징

객체 기본 문법

let member = { // 객체는 중괄호를 사용
  firstName: 'Heeseung', // firstName은 key(키), 'Heeseung'은 value(값)
  lastName: 'Lee', // key-value pair(키-값 쌍)은 쉼표(,)로 구분
  age: 21, // value에는 다양한 타입이 들어갈 수 있다.
  role: 'Main vocal',
};

객체

• 객체는 프로퍼티property(키-값 쌍key-value pair)를 저장한다.
• 프로퍼티 키(key)는 문자열이나 심볼이어야 한다. 보통은 문자열.
• 값(value)은 어떤 자료형도 가능하다.
• 객체의 프로퍼티에 접근하는 방법 2가지
  1. 점 표기법: obj.property
  2. 대괄호 표기법: obj["property"]
     대괄호 표기법을 사용하면 obj[varWithKey]같이 변수에서 키를 가져올 수 있다.

객체에 사용할 수 있는 연산자들

• 프로퍼티를 삭제하고 싶을 때 - delete obj.prop

• 해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때 - "key" in obj

• 프로퍼티를 나열할 때 - for (let key in obj)

💯 socrative

Q. arr 라는 배열이 빈 배열인지 확인하는 알맞은 방법은?
A. arr.length === 0
오답Check : arr === [] (X)
[] === []은 false 라는 것에 대해서 이해할 수 있어야 틀린 이유를 알 수 있다. 자바스크립트 상에서는 두 배열을 "주소가 다른 두 개의 빈 배열"이라고 생각하기 때문. Primitive & Reference 체크포인트에서 이 내용은 더 자세하게 배우게 됩니다.
지금 비교하고 있는 두 빈 배열은 첨부된 사진의 두 빈 네모와 같습니다. 모양은 같지만, 위치는 다르죠? 이런 경우 자바스크립트는 같은 배열로 간주하지 않습니다.

Q. 다음 중 객체의 모든 key를 콘솔에 출력하기 위한 방법으로 옳은 것은?

// 정답 - for in 구문을 통해서 객체의 모든 key에 접근하고 출력할 수 있습니다.
function allKeys(obj) {
  for (let key in obj) {
    console.log(key);
  }
}

배열과 객체의 가장 큰 차이점은 순서의 유무입니다. 배열은 요소에 0부터 순차적으로 접근할 수 있지만 객체는 속성에 순서대로 접근하지 않고, key를 통해서 value에 접근합니다.

• for of는 string과 array, 유사배열 등에서 사용이 가능한 반복문입니다.
  for (let arr[i] of arr)가 for (let i = 0; i < arr.length; i += 1) 과 같다고 생각하면 쉽습니다. 이후에 iterable object에 대해서 배우게 되면, for ~ of 문에 대해서 더 깊게 이해할 수 있습니다.

🦄 더 공부해야 할 것

• for in 반복문과 for of 반복문

🤔 느낀 점

• 개발자적 사고(?)가 조금씩 쉬워지는 느낌이라서 기분이 좋다.
• 블로그를 하려다보니 모호했던 개념들을 작은것까지 정확하게 알고 넘어가게 되는 것 같다. 시간은 오래 걸려도 (이게 좋은 블로그인지는 아직도 모르겠지만..) 의미있는 과정이라는 생각이 든다.

🌈 내일 할 일

• Primitive & Reference 학습
• Scope & Closure 학습
• 객체 문제 풀이