[코딩노트] S1 Unit 9 - javascript 객체

💡 이 포스트에는 Unit 9. javascript 배열, 객체 - 객체의 코딩문제를 풀고 몰랐던 점이나 부족했던 점을 정리했다!
(누군가에게는 너무 쉬워 하품이 나올 수 있습니다.🥲)

코딩노트 정리하기

이번 코딩문제는 저번보다는 난이도가 낮았다.
비슷한 유형도 많아서 출체 유형을 큰 단위로 정리해보았다.

• 기본 구문 및 사용법 관련 :
  • 객체 bracket donation(괄호 표기법)
  • 객체 요소 삭제: delete obj[key];
  • 객체 키 찾기 : key in obj
• 객체 순회 : for in 활용
• 객체를 배열로 변환
• 응용
  • 기본구문+배열 관련
  • 기본구문+문자열 관련
  • 가장 빈도수 많은 문자 출력하기

1. 객체의 키 값을 동적으로 호출하기

핵심 : bracket donation(괄호 표기법) 사용. obj[key]
학습 후에 문제 풀 때는 잘 사용하여 쉽게 풀었지만, 예전에는 이 방법을 몰라서 애먹은 적이 있었다.
key값이 동적으로 바뀌어야 할 경우 괄호 표기법을 사용하며 obj[key]에서 key의 type는 string이다.

2. 객체 순회하는 방법

핵심 : for...in 구문을 사용한다.
제일 쉬웠던 방법은 for in을 사용하는 방법이었다.
(그 외의 방법이나 활용하는 방법은 이전 포스트에 정리해놓았다.
S1 Unit 9. javascript 배열,객체 )
다만 출력할 때 배열의 형태냐 아니냐에 따라 Object.keys(obj)를 활용해 주었다.

let obj={
  a:1,
  b:2,
  c:3
}
for(let key in obj){
	console.log(obj[key]);
}
/* 결과
1
2
3
*/

3. '배열에 있는 키: 객체의 값'으로 새 객체 만들기

핵심 : 배열에서 요소 찾는 방법, 객체 삽입하는 방법, 객체 순회를 활용한다.
위의 핵심에서 언급한 방법을 알면 쉽게 풀 수 있지만 객체의 개념이 부족하거나 배열의 개념이 부족하면 쉽게 틀리거나 실수할 수 있는 문제였다.

예제. 새로운 객체 만들기

새로운 객체를 만들되 키는 주어진 배열에 있는 값으로,
그 키의 값은 기존에 주어진 객체에 있는 값으로 만들어야 한다.
만약 키가 객체에 없다면 무시한다.

function makeNewObj(arrKey, obj) {
  //임의의 객체 newObj 선언
  //obj 객체의 키가 arrKey에 있는 경우 -> arrKey.includes(key)
  //있을 경우 : 새로운 객체에 그 키의 값을 새로운 객체에 추가
  //newObj[key]=obj[key];
  //없는 경우: 무시
  //newObj를 리턴
  let newObj={};
  for(let key in obj){
    if(arrKey.includes(key)){
      newObj[key]=obj[key];
    }
  }
  return newObj;
}

4. 문자의 개수 세기

핵심 : 한 문자는 키, 그 빈도수는 값으로 하여 객체를 만든다.
문자열을 받아 각 문자별로 그 빈도수를 세야 할 때,
객체를 만들어 각 문자는 키, 빈도수는 순회하면 1씩 추가하여 값으로 만든다.

예제1. 문자 빈도수를 나타내는 객체 만들기

function countChars(str) {
  //str의 각 문자는 키, 총 등장횟수는 값(type number)
  //str의 첫번째 문자가 obj에 있을 경우 -> str[0] in obj ===true
  //있을 경우: obj[str[0]]+=1
  //없을 경우: obj[str[0]]=1;
  //이 과정을 str의 길이만큼 반복한다.
  //객체를 리턴한다.
  let charObj={};
  for(let i=0; i<str.length; i++){
    if(str[i] in charObj){
      charObj[str[i]]+=1;
    }else{
      charObj[str[i]]=1;
    }
  }
  return charObj;
}

예제1을 활용하면 아래의 예제2도 해결 가능하다.

예제2. 가장 빈도수가 많은 문자 추출하기

function frequentChar(str) {
    //가장 먼저 해당 횟수에 도달한 문자 freqStr='', 빈도수 freqNum=0;선언
  //str의 첫번째 문자가 obj에 -> str[i] in obj
  //있을 경우: 해당문자 1추가 -> obj[str[i]]+=1 
  //없을 경우: 해당문자 키 생성, 1추가 -> obj[str[i]]=0, obj[str[i]]+=1 
  //해당문자를 1 추가한 후 빈도수 비교 
  //기존 빈도수보다 현재문자수가 클 경우 경우 -> freqNum<obj[str[i]] 
  //클 경우만 빈도수, 최다빈도 문자 교체 :
  //freqNum=obj[str[i]], freqStr=str[i]
  //이 과정을 문자열(str)만큼 반복
  let obj={}, freqStr='', freqNum=0;
  for(let i=0; i<str.length; i++){
    if(!(str[i] in obj)) obj[str[i]]=0;
    obj[str[i]]+=1;
    if(freqNum<obj[str[i]]){
      freqNum=obj[str[i]];
      freqStr=str[i];
    }    
  }
  return freqStr;
}

노트 정리 후 느낀점

배열에 이어 객체 연습문제를 풀었다.
배열만큼의 난이도였고 엄청 어려운 문제는 없었다.
저번 코딩노트에 기록한 솔루션을 얼마나 실천했는가?
이번 객체는 배열에 비해 메서드는 많이 없었지만
정신 차리지 않으면 헷갈리거나 실수로 문제를 못 풀게되는 확률이 높았다.

이번의 부족한 점

• 디버그를 사용해보았지만 아직은 미숙하다.
• 배열과 객체를 혼합하여 문제 풀 일이 많았는데, 배열의 메서드가 뭘 반환하는지 정확하게 알고있지는 못했다.

오늘은 위의 부족한 점을 보완하기 위해 아래와 같이 공부했다!

부족한 점 보완하기

• 이해한 함수는 꼭 debugger로 돌려보자. 그래야 익숙해진다!
• 배열 메서드가 뭘 반환하는지 console.log()로 계속 실험해보고 배열 코딩 노트에 추가로 정리하였다.

항상 부담부터 느꼈던 코딩문제 풀기가 확실히 나아진 게 체감이 된다.
아무래도 공부를 착실해 해서 그런 것 같다.
완벽하진 않아도 벨로그에 학습한 내용을 정리하는 게 큰 도움이 되었고,
틀렸거나 몰랐던 부분도 반드시 정리하고 넘어가서 공부가 잘 된다.
특히 예전에 몰랐거나 놓쳤던 것들을 다시 정리하니까 확실히 문제풀 때 점점 잘 풀려서 좋다.

💻😌🙌