SEB/FE - 220511

애리·2022년 5월 12일

Section 1

목록 보기
9/14
post-thumbnail

📌 객체

1. 객체란

하나의 변수 안에 여러 가지 정보가 담겨 있을 때 사용.

객체는 키와 값쌍(key-value pair)으로 구성되며 키-값 쌍은 ,로, 키와 값 사이에는 :로 구분한다.
중괄호{}를 이용해 객체를 만들 수 있다.

//객체의 구성
let user = {
    firstName: 'Eunyoung',
    lastName: 'Jo',
    email: 'shineeol20@gmail.com',
    city: 'Seoul'
};

2. 객체의 프로퍼티 추가/삭제

먼저 객체의 프로퍼티를 읽어오는 방식은 2가지 존재한다.

  • Dot notation : 프로퍼티(속성) 값을 읽어낼 수 있다.

    user.firstName; // 'Eunyoung'

    user.city; // 'Seoul'

  • Bracket notation : 키값이 동적으로 변하는 경우(변수) 사용

    user['firstName']; // 'Eunyoung'

    user['city']; // 'Seoul'

    ✨대괄호 안에서 문자열을 사용할 땐 ''로 전달해야 함

dot/bracket notation을 이용해 객체에 프로퍼티값을 추가/삭제 할 수 있다.

  • delete : 키-값 쌍을 삭제 가능

    delete user.lastName; //lastName의 키와 그 값이 삭제

  • user['age'] = 20; // user 객체에 age: 20의 프로퍼티가 추가 됨

또 객체 안에 특정 프로퍼티가 존재하는 지 확인 할 수도 있다.

  • in : 해당키의 존재여부 파악 가능

    'city' in user; //true

    'content' in user; //false


3. for ... in 반복문

for...in 을 이용하면 객체의 프로퍼티를 모두 나열할 수 있다. 특정 값을 가진 키의 존재 유무를 파악할 때 자주 이용한다.

for (let key in user) {
    //key
    console.log(key); // firstName, lastName, email, city
    //value
    console.log(user[key]); 
    // Eunyoung, Jo, shineeol20@gmail.com. Seoul
}

for...in의 경우 순서가 중요하지 않은 객체에서는 사용가능하지만 순서가 중요한 데이터인 배열에서는 특정 index를 보장하지 않는 for in은 사용될 수 없다.


4. 추가

  • Object.keys(객체) : 객체에 속한 키값(속성값)들을 문자열 배열로 반환

    Object.keys(객체).length; : 다음과 같이 이용하면 키의 갯수를 확인할 수 있다.

  • is.NaN() : 데이터의 타입이 number인지 판별
  • Array.isArray() : 데이터의 타입이 배열인지 판별
  • continue : 건너 뜀
  • break : 여기서 반복문 끝내기
  • splice vs slice : splice는 원본 배열을 변경, slice는 원본 배열을 변경X


마무리 😁


오늘은 자바스크립트의 타입 중 하나인 객체에 대해 배웠다.
어제 배열에 이어 그래도 다른 언어로 야악간의 찍먹을 해봤던 경험이 있어 나름 수월하게 진행할 수 있었다. 특히나 이번 코플릿을 진행할 때는 먼저 문제에서 요구하는 점이 무엇인지 파악하고 의사코드를 작성해서 좀 더 정확하게 이해할 수 있었다.
(그동안의 페어 프로그래밍의 경험 덕분이다! 다들 감사해요!)
물론 엄청나게 알고리즘 적 사고를 요하는 문제는 아니였지만 스스로 풀고 제출버튼을 누르고 다 맞는 화면을 볼때의 쾌감...! 그건 진짜 짜릿했다. 하지만 몇몇 문제는 다시 복습을 해야할 것 같다ㅋㅋㅋㅋ(19, 21 메모...)
그래도 이렇게 코딩의 재미를 알아가는 것 같아 너무 기분이 좋은 하루다.
오늘 저녁에는 배열과 객체를 다시 한 번 복습해보고 작성한 TIL을 한 번더 읽어보는 시간을 가져야겠다.

profile
예비 프론트엔드 개발자

0개의 댓글