B12 : 객체

목차

1. 객체란?

2. 객체 생성하기

    2-1. Object() 생성자 함수

    2-2. 객체 리터럴 {}

    2-3. 직접 정의 생성자 함수

3. 프로퍼티 접근하기

4. 프로퍼티 추가/삭제하기

5. in 연산자와 for...in 반복문

    5-1. in 연산자

    5-2. for...in 반복문

6. 프로퍼티 정렬 방식

---

1. 객체란?

프로퍼티(키:값)의 형태로 여러 값을 포함하는 컨테이너로, 내부 값은 얼마든지 변경할 수 있다.

• 키 (key) : 숫자, 문자열, 심볼만 올 수 있다.
  키 값은 따옴표""로 감싸지 않고 그냥 작성해도 되지만, 아래 3가지 경우에는 반드시 따옴표로 감싸주어야 한다.
  1. 첫 번째 글자가 문자, 밑줄(_), 달러 기호($)로 시작하지 않음 ("1stCourse")
  2. 띄어쓰기가 포함됨 ("brand Name")
  3. 하이픈(-)이 포함됨 ("born-year")
• 값 (value) : 어떤 표현식이든 올 수 있다. 

---

2. 객체 생성하기

객체를 생성하는 방법은 3가지이다.

1. Object() 생성자 함수 이용
2. 객체 리터럴 {} 이용
3. 직접 정의한 생성자 함수 이용

1. Object() 생성자 함수

객체 리터럴을 사용하는 것이 훨씬 간결하기 때문에 거의 사용되지 않는다.

const obj = new Object();

//프로퍼티 생성 예
obj.id = 'id';
obj.name= 'name';

 

2. 객체 리터럴 {}

중괄호 내부에 아무 프로퍼티도 정의하지 않으면 빈 객체가 생성된다.

const obj = {
  id: 'id',
  name: 'name'
};

 

 

3. 직접 정의 생성자 함수

동일한 형태의 객체를 쉽게 생성해서 사용할 수 있다.

형식은 정해져있지 않으며, new 키워드를 사용해 함수를 호출하면 생성자 함수로 동작한다.

function Vehicle(type) {
  this.type = type;
}

const car new Vehicle('Car');	//type: 'Car'

• 일반 함수와의 구분을 위해 생성자 함수 이름의 첫 글자를 대문자로 표기하면 좋다.
• 특정한 형태의 객체를 생성하거나 상속받고 싶을  때 생성자 함수를 사용한다.

 

---

3. 프로퍼티 접근하기

점, 대괄호를 사용하여 접근한다.

 

점 표기법은 간결하여 많이 사용한다.

obj = {
  last-name: 'bang',
  name: 'dayeon',
  age: 26,
  hobby: {
    game: 'leage of legend',
    book: '물고기는 존재하지 않는다'
  }
  do: function sayHi() {
        console.log('hi');
      },
}

console.log(obj.age);	// 점표기법으로 접근
console.log(obj.hobby.game);	// 객체 속 객체에 접근

 

 

변수를 이용해 프로퍼티에 접근하거나, 접근하려는 프로퍼티 명에 연산자/공백이 포함되어있다면 대괄호 표기법을 사용해야한다.

const prop = 'age';
let key = prompt("어떤 정보가 필요한가요?", "name");

obj[prop];
obj['last-name'];
alert( obj[name] );

 

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

 

---

4. 프로퍼티 추가/삭제하기

간단하게 프로퍼티 추가와 삭제를 할 수 있다.

obj.isAdmin = true;	// 추가
delete obj.age;		// 삭제

 

---

5. in 연산자와 for...in 반복문

1. in 연산자

in 연산자로 객체의 프로퍼티 존재 여부를 확인할 수 있다.

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

alert( "age" in user );	// true
alert( "blabla" in user );	// false

 

 

2. for...in 반복문

for...in 반복문으로 객체의 모든 키를 순회할 수 있다.

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

for(let key in user) {
  alert(key);	// name, age, isAdmin
  alert(user[key]);	// John, 30, true
}

 

---

6. 프로퍼티 정렬 방식

객체의 프로퍼티는 특별한 방식으로 정렬된다.

let codes = {
  "49": "독일",
  "41": "스위스",
  "44": "영국",
  //...
  "1": "미국",
};

for (let code in codes) {
  alert(code);	// 1, ..., 41, 44, 49
}

 

• 정수 프로퍼티는 자동으로 정렬된다
• 그 외의 프로퍼티는 추가한 순서 그대로 정렬된다.

위의 경우, 앞에 +를 붙여서 정수취급되지 않도록 하면 추가한 순서대로 정렬된다.

 

 

 

참고

https://ko.javascript.info/object

객체

기초부터 완성까지, 프런트엔드 (이재성|한정)