TIL 10일차 JS배열, 객체

shleecloud·2021년 7월 30일
0

Codestates

목록 보기
10/95
post-thumbnail

시작

2주차 마지막 날이다. 커리큘럼상 금요일은 공부를 많이 해야될 과목을 넣는 패턴이 있다. 주말동안 열심히 복습하라는 의미로 받아드려야겠다. 이번주는 배열과 객체지만 다음주 금요일은 DOM이다. DOM이 많이 어렵다고 하는데 이번 주말에는 JS 위주로 예습 복습을 진행하려고 한다. 기초공사가 튼튼해야 나중에 응용이 나오더라도 튼튼하게 버틸 수 있다.

이번 페어분은 기수이동을 해오신 분을 만났다. JS를 굉장히 빠삭하게 알고계셔서 처음으로 버스를 타는 경험을 했다. 느낌 완전 이상하다. 괜히 미안한 느낌? 알려주기만 하셔서 도움이 되셨을지 모르겠다는 말을 들어오다가 내가 그 말을 하는 입장이 되니까 기분이 이상하다.
왜냐하면 미안할 마음이 들 정도로 만큼 굉장히 편했다. 궁금한 내용들을 바로바로 알려주시고 놓칠 수 있는 내용들도 알려주시니까 JS 과외를 받는 느낌이었다. 😍 다음주에 객체 코플릿을 같이 진행하는데 주말동안 공부해서 조금은 달라진 모습을 보여드리고 싶다. 신선한 경험이다. 이번 페어에서 이 분을 만나서 다행이다.

배열

배열 기초

  • 배열에서 사용되는 다음 용어에 대해 정확히 이해할 수 있다.
    • index, element, length
    • arr[0], push, pop
  • 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
  • 배열의 요소가 배열인 이중 배열을 이해할 수 있다.
  • 이중 배열의 요소를 조회하거나 변경할 수 있다.

배열의 기초에서 파이썬과 다르게 배열에서 -1 인덱스를 쓸 수 없다는게 충격이었다.
오직 array[array.length - 1] 이렇게해야 가장 마지막 인덱스를 표현해야 한다니... 굉장히 아쉽다.

배열의 반복

  • 배열의 요소를 반복적으로 불러오는 방법을 이해하고 사용할 수 있다.
  • 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
    • 기본적인 for 문 for (let i = 0; i < 5; i++) 을 응용하여 다양한 for문을 만들 수 있다.
    • 반복문에 조건문을 응용하여 특정 조건에서만 코드를 실행시킬 수 있다.
    • 이중 반복문이 무엇인지 이해하고 활용할 수 있다.
  • 배열과 반복문을 활용하여 실생활에서 접할 수 있는 간단한 문제를 해결할 수 있다.
  • 문자열과 배열의 타입 변환을 돕는 메소드를 알고 있다.
    • 띄어쓰기 (" ")로 문자열을 구분하여, 배열로 변경할 수 있다. str.split(" ").join(" ")
    • 문자열을 요소로 가지는 배열을 띄어쓰기 (" ")로 구분한 문자열로 변경할 수 있다.

배열을 for문으로 접근하는 것은 다른 언어에서도 종종 있는 경우라 익숙하다. split과 join으로 접근하는게 신선했다. 배열 관련 문제를 해결할 때 형변환이 이루어지는 경우 배열만으로 처리하는 것 보다 조작하기 쉬운 자료형, 문자열로 바꿔서 처리하는게 더 효율적일 때가 있다.

배열 기초 메소드

  • 배열 요소(element)를 조회할 수 있다. bracket notation
  • 배열을 복사, 분리하는 법을 이해할 수 있다. slice, splice
  • 변수, 데이터, 또는 특정 값이 배열인지 아닌지 판별할 수 있다. Array.isArray
  • 배열의 요소(element)를 추가 및 삭제할 수 있다. push, unshift, pop, shift
  • 배열의 길이를 구할 수 있다. length
  • 변수, 데이터, 또는 특정 값이 배열에 포함되어 있는지 확인할 수 있다. indexOf, includes

Array 전역 객체의 내장 함수들의 사용에 대해서 배웠다. 편의 기능들이라 가벼운 마음으로 둘러봤다. 그 중 배열임을 확인하기 위한 Array.isArray 함수는 조금 특별했다. JS에서는 typeOf로 배열을 확인하면 객체로 돌려줘서 별도의 함수를 제공한다.
Mutator 함수와 Imutator 함수의 처리도 좋았다. 얕은 참조 때문에 새로운 배열을 만드는지 여부가 중요한데 그 부분의 개념을 잡았다.
이건 코플릿 구성이 빛을 발했던 부분인데 애매했던 내용들을 콕콕 찝어줘서 빠르게 정리할 수 있었다. 떠먹이지 않으면서 떠먹여주는 느낌. 하지만 세세한 개념정리와 숙달은 온전히 나의 몫이다. 코플릿을 한번 훑어보고 개념서를 정독하고 정리 위주로 가야겠다.

객체

객체 기초, 퀴즈, 실습

  • 배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다.
    • 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)
    • 배열과 객체의 특징에 따라 실생활에서 언제 쓰는지 이해할 수 있다.
  • 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
    • 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
    • 객체 실습 - 2의 tweet.content와 tweet['content']의 차이가 무엇인지 설명할 수 있다.
    • dot notation을 이용한 객체 할당 방식을 능숙하게 다룰 수 있다. obj.a = "hello"
    • 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
    • 객체를 위한 for문 for ... in 문을 이해하고 다룰 수 있다.
  • 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

파이썬의 딕셔너리와 비슷했다. 거의 동일하다고 보는데 dot notation (점 표기법)과 bracket notation (괄호 표기법)의 차이가 흥미로웠다. 왜 굳이 이렇게 나눠놨는지 궁금했는데 bracket notation은 변수를 참조할 수 있어서 유연하지만 변수 참조를 위하여 연산이 한 번 더 들어가서 리소스를 차지한다는 단점이 있다. 최적화 단계에서 고려할 수 있는 옵션이다.

그리고 for ... in 구문으로 Key값을 받아오는 방법이 있고 Object.keys() Object 전역 객체의 함수를 사용하는 방법도 있다. 마찬가지로 Object.values() 함수는 객체의 값을 불러올 수 있다. 그리고 Keys로 보아 Key도 선언된 순서에 따라 호출되는 순서가 있다.

profile
블로그 옮겼습니다. https://shlee.cloud

0개의 댓글