2주차 주말 - 개인 공부

1. 리뷰

• 배열문제를 풀기 위해 정렬알고리즘을 꼭 복습해야겠다.
• Bracket notation으로 객체의 값에 접근할 때 변수로 접근하는 경우가 아직 미숙하다.
• 표현식인 문과 아닌 문에 대해 학습했지만 완전히 이해될 때 까지 계속 봐야 하겠다.

2. 학습 키워드

자바스크립트 - 배열, 객체

• 배열에 없는 요소에 접근시 반환값
• 이차원 배열의 요소에 접근하는 방법
• 계속 재할당되며 최종적인 답의 값을 담는 변수의 초기값 지정이 중요한 이유
• split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()
• console.table
• indexOf와 includes 메소드의 불린값 이용하기
• indexOf가 includes 메소드보다 더 좋은 2가지 이유
• 언제 배열을 쓰고 언제 객체를 쓸까(ex: 회원정보)
• 객체 리터럴에서 객체는 무엇과 무엇으로 이루어져 있나
• 프로퍼티 키는 문자열만 되나?
• trailing comma
• 객체의 값에 접근시 Dot notation, Bracket notation 의 용례
• Bracket notation 사용시 주의점
• property value는 모든 데이터타입 ok
• delete 키워드, in 연산자
• addProperty
• js how to iterate object - for..in, entries()
• Note: for...in은 인덱스의 순서가 중요한 ****[Array](<https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array>)에서 반복을 위해 사용할 수 없습니다.
• 객체끼리 합치는 3가지 방법

CSS - flex

• flex-direction이 -reverse가 붙을 경우 justify-content의 변화
• order의 값. 왜 1로 줬는데 맨 앞으로 안오고 -1 주니 앞으로 왔을까
• align-self 속성

3. 스스로 설명해보기

• 배열에 없는 요소에 접근시 반환값은 undefined 이다.
• 이차원 배열의 요소에 접근하는 방법:
  • 객체명[이차원 배열 인덱스][이차원 배열 내 인덱스] ex: obj[1][3]
• split메서드: 매개변수로 들어가는 separator(구분자)를 기준으로 끊어 배열로 반환.
• 배열 요소 삭제:
  • 맨 앞: shift()
  • 맨 뒤: pop()
• 배열 요소 추가:
  • 맨 앞: unshift()
  • 맨 뒤: push()
• console.table(): 배열을 표로 시각화하여 콘솔창에 보여줌.
• indexOf가 includes보다 더 좋은 2가지 이유
  1. indexOf로 배열에 없는 요소를 찾을 시 -1이 반환되므로 조건식으로 사용 가능함. 즉 includes 기능으로도 쓸 수 있다.
  2. includes메서드는 ie에서 미지원.
• 시험점수 같은 일관성 있는 값의 나열은 배열을 사용하고, 회원정보 같은 하나의 객체에 여러 속성이 필요한 경우 객체 리터럴 또는 생성자 함수로 객체 리터럴 사용.
• 객체는 key:value 로 이루어져 있고 이 쌍을 property라고 하며 하나씩 구분하면 property key, property value 이다. 프로퍼티 키는 식별자 네이밍 규칙을 준수하여 사용을 권장하는데, 프로퍼티 키가 식별자 네이밍 규칙에 따라 작명된 경우 따옴표로 감싸지 않아도 되며 dot notation으로 값에 접근이 되지만 프로퍼티 키가 식별자 네이밍 규칙에 맞지 않을 경우 반드시 따옴표로 감싸 줘야 하며 bracket notation으로만 값에 접근이 가능하다.
• var, let 키워드로 선언한 변수의 초기화 값 지정이 중요한 이유: 예를 들어 let answer = ‘’; 일 경우 숫자 연산시 undefined + 10 = NaN 이므로 let answer = 0; 으로 초기화시켜두는게 맞다. 즉 반환할 값의 데이터 타입을 고려하여 초기화하여야 한다.
• trailing comma: 객체 리터럴 내의 마지막 프로퍼티 값 뒤에도 쉼표를 찍는 코딩 스타일. 코드 수정이 편리하기 때문에 사용한다.
• Bracket notation 사용시 주의점:
  • [ ] 대괄호 내에서 접근하려는 property key를 따옴표로 감싸서 넣지 않으면 해당 부분을 변수로 본다.

4. 이해가 부족한 개념

• join메서드, addProperty 메서드
• for...in, for...of, entries()
• 객체끼리 합치는 3가지 방법
• in 연산자
• css flex: align-self 속성

5. 할 일

• 중첩 반복문과 계산기 코드 리팩토링 필요.
• flex 자식요소 복습
• 기존에 만든 계산기 버튼 정렬부분 flex-basis적용하여 수정하고 자바스크립트 코드 연동시키기.
• 딥다이브 5장 md 정리 끝내기. - 완료
• 정렬알고리즘 - 선택정렬 복습
• 차주 계획