객체(Object)

피자냠냠(피자냠냠)·2023년 1월 1일

JavaScript js object 객체

JavaScript

목록 보기

9/16

객체 개념

1억개의 요소가 존재하는 배열을 사용한다고 가정을 해보자.

필요한 요소를 뽑아내기 위해서는 index값을 알아내야하는데 이게 쉬운 일도 아니고 index값이 변화될 수도 있다.

그래서 요소들을 쉽게 뽑아내기 위해 데이터를 묶어서 이름을 붙이는 기능을 넣고자 했는데 이를 객체라고한다.

객체의 구조

객체는 중괄호{}를 이용해서 만들 수 있다. 중괄호 안에는 '{키(key): 값(value)}'로 구성된 프로퍼티(property)를 여러개 넣을 수 있다.

여기서 키엔 문자형만 가능하고 값에는 모든 자료형이 허용된다.

만약 키에 숫자형을 넣으면 자동으로 따옴표""가 붙는다. 암묵적 타입 변환

let obj = {
  0: "test" // "0": "test"와 동일합니다.
};

// 숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근합니다,
alert( obj`"0"` ); // test
alert( obj`0` ); // test (동일한 프로퍼티)

빈 객체를 만드는 방법

빈 객체를 만드는 방법은 2가지가 있다.

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

프로퍼티 표기법

프로퍼티 표기법 크게 두 가지가 있다.

점 표기법(Dot notation)

객체.키를 통해서 값을 불러올 수 있다.

const obj = {a:1, b:2, c:3};

obj.a // 1

대괄호 표기법(Bracket notation)

객체[키]로 값을 불러올 수 있다.

대괄호 표기법(Bracket notation)을 사용할 때 key는 반드시 문자열로 입력해야한다.

key값이 변하는 경우, key값에 띄어쓰기가 있는경우 대괄호 표기법을 사용한다.

// 대괄호 표기법
const obj = {a:1, b:2, c:3};

obj.['a'] // 1 따옴표
obj.["a"] // 1 쌍따옴표
obj.[`a`] // 1 백틱

점표기법보다 대괄호 표기법에 더 익숙하는게 좋다.

왜냐하면 키값은 문자형이여야 하는데 점표기법을 사용하면 문자형인지 파악을 못하기 때문이다.

const obj = {'ab-cd':1, b:2, c:3};

obj['ab-cd'] // 1
obj.ab-cd // cd is defined

여러 단어가 포함된 key

key에 띄어쓰기가 포함된다면 따옴표로 묶어줘야한다.

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

마지막 프로퍼티 끝은 쉼표

마지막 프로퍼티는 쉼표(,)로 끝날 수 있습니다.

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

객체 정렬 방식

키값이 문자형만 된다.

키값에 숫자를 넣어주면 자동으로 문자형으로 변환되어 키값으로 넣어진다.

키값은 정렬될 때 정수로 변환되어 크기순서대로 나열된다. 정수가 아니라면 정렬되지 않는다.

암묵적 타입 변환

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

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

프로퍼티의 여러 가지 활용

프로퍼티 재할당 및 추가

값에 새로운 값을 할당해주면 바뀐다.

const user = {
  name: "John"
};

alert(user.age); // undefined

user.name = "Pete"; // name의 새로운 값을 넣어준다.
user.age = 18 //  새로운 key라면 새로운 key와 값을 넣어준다.

alert(user.name); // Pete
alert(user.age); // 18

프로퍼티 삭제법

const user = {
  name: "John",
  age : 18,
};

delete user['age']; 

console.log(user['age']) //  undefined

계산된 프로퍼티 ??????

키값이 대괄호'[]'로 둘러쌓여있다면 이를 계산된 프로퍼티라고 한다.

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

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

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

이를보면 키값에 대괄호[]를 둘러쌓으면 변수를 가져온다는 의미이다.

단축 프로퍼티

프로퍼티 키와 값이 동일한 경우 "동일한이름"하나만 적어서 단축시킬 수 있다.

function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age,  // age: age 와 같음
    // ...
  };
}

프로퍼티 존재 여부 파악

'in' 연사자로 프로퍼티 존재 여부 확인할 수 있다.

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


console.log('name' in obj); // obj.name이 존재함으로 true 출력
console.log('email' in obj); // obj.email이 존재하지않으므로 false를 출력

console.log(obj.email) // 존재하지 않는 프로퍼티에 접근하려고하면 undefinded가 출력된다.
for..in 반복문

for ...in문

객체의 모든 키를 순회할 수 있다. for 반복문과는 완전히 다르다 헤갈리지 말자!

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

for (let key in user) { // key 변수를 넣어주면 userd의 '키'를 하나씩 다 넣는다.
  alert( key );  // name, age, isAdmin
  alert( user[key] ); // John, 30, true
}

for 변수 in lterable : 객체 일 때 밖에 못 씀; 배열에서는 못 씀 key 값만 가져온다. 배열도 index값을 가져오긴하는데 다른걸 쓰면된다.
for 변수of lterable : 객체와 배열에서 둘다 쓸수있다.
literable -> 반복문을 돌릴 수 있는 객체인지 아닌지

왠만하면 for of를 사용하자

객체의 key와 value를 배열로 가져오기

Object.keys()

키를 문자열로 가져온다.

let myObj = { 1: 'a', 2: 'b', 3: 'c', 4: 'd'};

console.log(Object.keys(myObj)); // ['1', '2', '3', '4']

Object.values()

값을 배열로 가져온다.

let myObj = { 1: 'a', 2: 'b', 3: 'c', 4: 'd'};

console.log(Object.values(myObj)); // ['a', 'b', 'c', 'd']

Object.entries()

let myObj = { 1: 'a', 2: 'b', 3: 'c',};

console.log(Object.entries(myObj)); //  [['1', 'a']  ['2', 'b'] ['3', 'c']]

Object.entries()의 활용

let myObj = { 1: 'a', 2: 'b', 3: 'c', 4: 'd'};

for (const [key, value] of Object.entries(myObj)) {
  console.log(key); // 1,2,3,4
  console.log(value);	//a,b,c,d
  console.log(`${key}: ${value}`); // 1: a, 2: b, 3: c, 4: d
}

Object.assing

두 객체를 합쳐준다.
두 객체가 같은 키라면 뒤에 불러진 객체의 값이 재할당된다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(returnedTarget) // {a: 1, b: 4, c: 5,}

const returnedTarget = Object.assign(source, target); 인자 바꾸어 주면

console.log(returnedTarget) // {b: 2, c: 5, a: 1}