[모던 JS 튜토리얼] 4.1. 객체

승연·2023년 11월 20일

JavaScript 객체 웹개발 자바스크립트 프론트엔드

모던 자바스크립트 튜토리얼

목록 보기

17/19

4.1. 객체

자바스크립트의 8가지 자료형

원시형 (7가지) : 오직 하나의 데이터 (문자열, 숫자 등) 만 담을 수 있음
객체형 (1가지) : 다양한 데이터를 담을 수 있음, 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있음

객체

{ ‘키(key): 값(value)’ 쌍으로 구성된 *프로퍼티(property)* 여러 개 }

파일 : 프로퍼티

파일 각각에 붙어있는 이름표 : 객체의 키

빈 객체 만들기

let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법

4.1.1. 리터럴과 프로퍼티

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

첫 번째 프로퍼티 – "name"(이름)과 "John"(값)
두 번째 프로퍼티 – "age"(이름)과 30(값)

프로퍼티 값 읽기

// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30

프로퍼티 추가

user.isAdmin = true;

여러 단어로 프로퍼티 이름을 만든 경우 : 프로퍼티 이름을 따옴표로 묶어줘야 함

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 함
};

프로퍼티 삭제

	delete user.age;

trailing, hanging 쉼표

→ 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티를 추가, 삭제, 이동하는 게 쉬워짐

let user = {
  name: "John",
  age: 30,
};

4.1.2. 대괄호 표기법

user.likes birds = true

→ 자바스크립트는 이 코드 이해 x

유효한 변수 식별자 → 점 사용 가능 (user.likes…)

공백 x
숫자로 시작 x
$ _ 이외의 특수 문자 x

유효하지 않은 변수 식별자 → 대괄호 표기법

let user = {};

// set 추가
user["likes birds"] = true;

// get 읽기
alert(user["likes birds"]); // true

// delete 삭제
delete user["likes birds"];

let user = {
         name: "John",
         age: 30
         };

         let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");   //prompt(title, default)

         // 변수로 접근
         alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우), 30 ("age를 입력했을 때")

4.1.3. 계산된 프로퍼티

계산된 프로퍼티 : 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸인 경우

ex)

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");  //title : "어떤", default : "apple"
let bag = {};  

bag[fruit] = 5; //파일 fruit 안의 key 5 -> bag에는 {apple : 5}가 할당

let fruit = 'apple'; //'apple' 이라는 문자열 할당
      let bag = {
         [fruit+ 'computers'] : 5   //bag.applecomputers = 5

      };

      alert(bag.applecomputers); //5

4.1.4. 단축 프로퍼티

단축 프로퍼티 : 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우

function makeUser(name, age) {
         return{
            name : name,
            age: age,
         };
      };

      let user = makeUser('승연', 20);
      alert(user.name);
      alert(user.age);

프로퍼티 값 단축 구문

function makeUser(name, age) {
         return{
            name, //name:name, 대신 사용
            age,
         }
      }

한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능

4.1.5. 프로퍼티 이름의 제약사항

객체 프로퍼티에서는 변수 이름에 예약어 사용 가능 ex) for, let, return 등

let obj = {
      for : 1,
      let : 2,
      return :3,
   };

   alert(obj.for + obj.let + obj.return); //6

let obj = {
         0: 'test',
      };

      //숫자 0은 문자열 '0'으로 변환 -> 두 alert창은 같은 프로퍼티에 접근
      alert(obj[0]); //test 
      alert(obj['0']);  //test

proto : 특별 대우

let obj = {};
obj.__proto__ = 5;
alert(obj.__proto__);   //[object Object] 출력 (숫자를 할당했으나 값은 객체가 됨)

4.1.6. ‘in’ 연산자로 프로퍼티 존재 여부 확인

자바스크립트는 존재하지 않는 프로퍼티에 접근 → 에러 X, undefined반환

let obj = {};
      obj.__proto__ = 5;
      alert(obj.__proto__);   //[object Object] 출력 (숫자를 할당했으나 값은 객체가 됨)

“key” in object

let user = {name:'Tiff', age : 30};
      alert('age' in user);   //true
      alert('lalalalalalal' in user);  //당연히 없겠지 false

let user = { age :30};
      let key = 'age';
      alert(key in user);  //있으니까 true

가끔 값을 undefined와 비교해서 실패할 때도 있기 때문에 이 방법 사용

4.1.7. ‘for … in’ 반복문

for … in : 객체의 모든 키 순회

for (key in object) { 각 프로퍼티 키를 이용해 본문을 실행}

let user = {
         name : 'Tiff',
         age : 20,
         isAdmin : true,
      };

      for (let key in user){
         alert(key);
         alert(user[key]);
         //name Tiff age 20 isAdmin True 이 순서로 나옴
      }

4.1.8. 객체 정렬 방식

key : 정수

자동정렬

let codes = {
         '49': '독일',
         '41': '스위스',
         '1': '미국',
         '82': '한국',
      }

      for (let code in codes){
         alert(code);
      };