1. 개념

---

1.1 객체의 구조

let memberObject = {
    manager : 'kyeongi',
    developer : 'suri',
    designer: 'masuri',
    ["data scientist"] : 'haru'
}

• 객체는 데이터가 키(key)와 값(value) 쌍으로 이루어져있다. 속성(property)이라는 용어는 키-값 쌍을 의미한다.
• 키와 값은 : 콜론으로 구분하고, 쌍은 , 쉼표로 구분해주고 전체 데이터는 {} 중괄호로 감싼다.
• 값으로 다양한 타입의 데이터가 들어올 수 있다.

1.2 객체의 특징

한 사람의 정보를 담기 위한 다양한 변수가 필요하다고 가정해보자. 배열은 데이터가 순서로 나열되어 있을 뿐, 각각의 엘리먼트가 어떤 의미를 가지는지 알 수 없다. 이 때, 객체를 사용할 수 있다.

배열의 엘리먼트는 순서를 가지고 있어 index로 값에 접근하지만, 객체의 value는 의미를 가지고 있고 key를 통해서 값에 접근한다.

실생활 예시

대량의 정보를 담고 한꺼번에 처리할 때 사용된다.

• 시간의 순서에 따라 SNS 게시글이 정리되는 경우 : 배열 (순서성)
• 하나의 게시글 안에 여러가지의 데이터가 있는 경우 : 객체 (유의미성)
• 객체를 요소로 하는 배열 => 이렇게 두 개를 동시에 사용!

1.3 객체의 속성 C-R-U-D

memberObject.singer = 'junga' // 추가
memberObject.designer = 'musuri' // 변경
delete memberObject.developer; // 삭제
console.log(memberObject.designer); // 조회
console.log(memberObject["developer"]); // 조회 - 삭제 되어 undefined (객체에 없는 키를 조회하면 undefined 리턴)

• in 연산자는 객체 안에 키가 있는지 boolean 값으로 보여준다.

let isPresent = 'developer' in memberObject; // false
let hasProperty = 'singer' in memberObject; // true

Dot notation vs Bracket notation

객체의 속성을 조회하는 두 가지 방법이 있다. 사실 '다루는' 이라고 말하는 게 더 정확할 것 같기도 하다.

• dot notation : 점.으로 접근한다.
• bracket notation : 대괄호[]로 접근한다.
  • 백틱/작은 따옴표/큰 따옴표를 사용해 문자열로 넣어줘야 한다. 그래야 속성의 키(key)로 인식한다.
  • 문자열로 넣지 않으면 변수로 취급한다.
    • 선언되지 않은 변수의 경우 Uncaught ReferenceError를 띄웠다.
• brackt notation을 반드시 사용해야 하는 경우가 있는데, 키 값이 변할 때이다.
  • 속성의 키를 인자로 받는 매개변수를 넣고 싶다면 대괄호 안에 스트링 타입이 아닌 변수로 넣어주면 된다. ref. ko1

1.4 객체와 반복문

객체에 반복문을 응용해서 대량의 정보를 다룰 수 있다. 객체는 순서가 없기 때문에 반복문으로 인덱스를 0부터 시작해서 사용하면 안 된다.

for ... in

for in 구문을 통해서 객체의 모든 key에 접근하고 출력할 수 있다.

for (let key in memberObject) {
    console.log(`${key} : ${memberObject[key]}`);
}

function extend(obj1, obj2) {
   for (let key in obj2) {
    if (!(key in obj1)) {
      obj1[key] = obj2[key];
    }
  }
}

• obj1에 obj2의 키를 더해서 연장하려고 할 때, if문에 사용한 문법 생각해볼만하다. 수도 코드로 바꾸면, 'obj2의 키가 obj1의 키에 없다면'이 될 것이다.

for ... of

string과 array, 유사배열 등에서 사용이 가능한 반복문이다.

how to iterate objects

• Object.keys() : 객체의 키를 요소로 하는 배열을 만들어 준다.
• Object.values() : 객체의 값을 요소로 하는 배열을 만들어 준다.
• Object.entries() : 객체의 키와 값의 쌍을 요소로 하는 이중배열을 만들어 준다.

2. 에러로그

---

키의 이름이 바뀌면 변수로 넣고 정해진 이름이면 문자열로 넣어준다. (k1, k10)

• 잠깐 헷갈렸었다. 브라켓 노테이션 안에 변수로 넣어줄 지, 문자열로 넣어줄 지! 키의 값은 생각하지 않아도 된다.
• 존재하지 않는 키를 호출하면 undefined가 뜬다.

객체의 키 값으로 객체를 또 넣을 수도 있다. (k4)

if (true)인 경우를 원하면 동치 연산자 생략하는 아이디어 좋다. (k7)

키의 값을 조회하는 obj[key]를 잊지 말자

function removeArrayValues(obj) {
  for (let key in obj) {
    if (Array.isArray(obj[key])) {
      delete obj[key];
    }
  }
}

• 값이 배열인지 묻는 건데 key를 확인했고, delete 키워드를 사용할 때 key만 썼었다. 키의 값을 삭제해줘야 한다!

'3' % 2 === 1 // true '3' > 1 // true (k8, k11)

• 문자의 대소비교는 사전식이다. '123' < '2' // true
• 문자열 처리된 숫자도 나머지 연산자를 사용하면 숫자처럼 값을 준다.
• typeof는 스트링 타입으로 값을 반환한다.

template literal에서 줄바꿈 문자를 사용하는 방법 (k13)

• ` \n ` 이렇게 백틱안에 그대로 담으면 된다.

인덱스가 배열의 길이보다 크면 undefined를 반환한다. (k14)

• 코드에서 불필요한 조건을 사용했다.

delete 키워드를 사용하면 원본 객체가 수정된다. (k15)

• for in과 for of 두 가지 방식으로 풀어볼 수 있다.
• in 연산자를 활용해서 배열의 요소 el이 객체의 키로 있는지 바로 확인할 수 있었는데, 불필요한 코드 줄을 늘려버렸다.

if (el in obj) // el이라는 key가 obj에 있는지 불리언 타입으로 내준다.

배열의 요소로 객체가 올 수도 있다.

• 배열의 요소에서 또 객체의 속성을 조회하는 방법이 약간은 낯설게 느껴졌지만 가능하다. arr[index].property

in 연산자는 불리언 타입을 반환한다.

20번

function countAllCharacters(str) {

let obj = {};
let arr = str.split('');

for (let el of arr) {
  if (obj[el] === undefined) {
    obj[el] = 0
  } 
  obj[el]++; 
  // 처음에 obj[el] = 0으로 시작을 하고 1을 더한다. 만약에 이미 있는 키라면 undefined가 아니므로 초기화가 안 되고 1이 더해진다! 
}
return obj;  
}

• 객체의 없는 키인 경우 undefined 이니까, 초기 세팅을 0으로 하는 거 어떻게 할 지 고민했는데, 아이디어를 어은 것 같다!
• obj[el]++ 라는 표기법도 배운 것 같다.
• 나는 obj에 el이 키로 있는 경우에는 +1을 해주고 아닌 경우에는 1이라는 숫자를 넣어주는 방식으로 해줬다.

자바스크립트에서 문자열에 공백 제거하는 방법

• str = str.split(" ").join(""); 이렇게 한 줄이면 간단하게 된다!

21번

function mostFrequentCharacter(str) {
  let obj = { mostCount: 0, mostFrequent: '' };
  for (let i = 0; i < str.length; i++) {
    if (str[i] === ' ') {
      continue;
    }

    if (obj[str[i]] === undefined) {
      obj[str[i]] = 0;
    }
    obj[str[i]] += 1;

    if (obj[str[i]] > obj['mostCount']) {
      obj['mostCount'] = obj[str[i]];
      obj['mostFrequent'] = str[i];
    }
  }
  return obj['mostFrequent'];
}

• 레퍼런스코드처럼 반복문 안에서 동시에 진행하면서 실시간으로 찾았다면? 왜 나는 따로 해서 더 힘들게 찾았을까?
• 공백도 글자처럼 생각해서 센다!

break와 continue의 차이

• continue는 현재 반복에서 실행을 종료하고 반복문의 처음으로 돌아가라는 뜻이다.
• break는 현재 반복문을 종료한다.

20, 21

3. 질문

---

• property와 key는 결국 같은 걸 가리키는 말이 아닌가? 키와 값을 모두 아우르는 말일까?
• Q. 배열과 객체를 변수에 넣을 때 const와 let의 차이는 뭔가요?
  let 과 const 의 차이점은 변수의 immutable 여부이다. let 은 변수에 재할당이 가능하지만, const 는 변수 재선언, 재할당 모두 불가능하다. ... let은 값을 할당하기전에 변수가 선언 되어있어야 하는데 그렇지 않기 때문에 에러가 난다.
  • 하지만 원본 배열을 수정하는 메서드를 사용할 수 있었다.