210125_TIL

seungyeon·2021년 1월 25일

TIL

목록 보기

4/64

🍎 오늘 한 일

배열과 객체에 대해 학습
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 문에 대해서 더 깊게 이해할 수 있습니다.