객체(object)

moono·2023년 1월 1일
JavaScriptTIL
0

JavaScript

목록 보기
9/23

Today's JavaScript

객체



객체

  • 배열과 마찬가지로 다량의 데이터를 한번에 다룰 수 있게 할 수 있는 참조자료형 데이터
  • 0개 이상의 속성(property)로 이뤄져 있음 (속성(property) -> 키 + 값)
{name: 'lin'} // name 이라는 키에 lin 값이 있음

  • 배열(Array)과 객체(Object)의 비교
    배열은 순서정보(index) 가 어떤 값을 갖고있는지 미리 알아야하니 접근성, 가독성이 떨어져 이럴 때 쓰기 위해 객체를 씀
    -> key를 통해서 데이터에 의미를 부여할 수 있고, 데이터에 접근할 수 있음

  • 하나의 변수 안에 여러가지 정보가 담겨있을 때 적합한 자료 구조

let user = {
  firstName: 'lin',
  lasName: 'Moon',
  email: 'abc@com',
  city: 'Seoul'
}
// firstName 은 키(Key)
// lin 은 값(value); string, number 등 객체가 중첩될 수도 있음
// 키와 값 사이는 콜론 : 으로 구분
// { 중괄호를 이용해 객체를 만들고
// 하나의 키-값 쌍(key-value pair)은 쉼표로 구분

  • javascript에서 사용 가능한 모든 타입의 값은 속성(property)가 될 수 있음
    • 속성(property) : 객체의 상태를 나타내는 값(data)
      -> 키(key) 와 값
    • 메서드(method) : 속성(property)를 참조하고 조작할 수 있는 동작
      -> 객체안에 넣은 함수(function)



객체 다루기(1)

객체의 값을 사용하는 방법

매개변수나 변수를 활용해서 객체의 데이터에 접근할거다 면 Bracket notation 쓰는게 유용
단순하게 객체에 빨리빨리 접근하고자 하면 dot notation 이 편리(문자열로 안넣어도 되니까)

Dot notation

객체의 속성을 가져오는 것
정해진 키(key) 이름이 있을때만 쓸 수 있음
단순하게 객체에 빨리빨리 접근하고자 하면 편리

user.firstName; // 'lin'
user.city; // 'Seoul'

Bracket notation

bracket 은 대괄호 [] (squre bracket) 를 의미
대괄호 안에 키(key) 이름을 넣을 때 항상 문자열 형식으로 전달 ('' 안에)
변하는 값을 넣어라
매개변수나 변수를 활용해서 객체 데이터에 접근할거다 하면 쓰는게 좋음

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

만약 문자열 '' 로 안 만들고 그냥 bracket 안에 넣으면 아래 에러가 노출되는데
레퍼런스 에러로 'city' 라는게 정의된 적 없다. 라는 에러
이건 city 를 키값을 가져오는게 아니라 변수로 보고 있다는 뜻

user[city]; // ReferenceError
Uncaught ReferenceError: city is not defined
//레퍼런스 에러로 'city' 라는게 정의된 적 없다.

Bracket notation 은 키 값이 변할 때나 변수일 때 쓰임
매개변수나 변수를 활용해서 객체에 접근할거다 하면 쓰는게 좋음
ex. 전달인자 obj 는 고정인데, 뒤에 키값이 계속 바뀔 경우
obj 영역에 들어가는 매개변수person, 'name' 이 계속 달라질 수 있는 경우
person 이라는 

let person = {
  name: 'Steve',
  age: '20',
}

function gerProperty(obj, propertyName) {
  // return person.name; 만약 output 이 하나라면
  return obj[propertyName]; // 그때그때 매개변수가 달라져도 사용 가능
}

let output = getProperty(person, 'name');
console.log(output); // 'Steve'
let output = getProperty(person, 'age');
console.log(output); // '20'

값 추가, 수정하기

dot/bracket notation 을 이용해 값을 추가, 수정할 수 있음
(객체, 배열, 뭐든 상관 없음)

let tweet = {
  writer: 'steve lee',
  createdAt: '2022-12-30',
  content: 'wow!!!'
};

tweet['category'] = '잡담'; // category 키를 새로 생성해 '잡담' 값 부여
tweet.isPublic = true; // ob
tweet.tags = ['#잡담', '#today']; // tag 키를 생성해 배열 생성

값 삭제하기

dot/bracket notation 로 delete키워드를 이용해 삭제 가능

// createdAt 키-값 쌍 지우기
delete tweet.createdAt;

tweet;
// {writer: 'steve lee', content: 'wow!!!'} 만 남음

값이 있는지 여부 확인하기

in연산자를 이용해 해당하는 키에 값이 있는지 확인 가능

'content' in tweet; // true
'updatedAt' in tweet; // false




객체 메서드

Object.keys(obj)

key 들을 모아서 배열로 만들어줌

Object.values(obj)

key의 값들만 모아서 배열로 만들어줌

Object.assign()

  • Object.assign(a,b) : 두개의 객체를 합칠 때 사용
    a 에 b 내용을 추가하는데, 만약 중복된 key값이 있다면 b의 key 값으로 업데이트
let user = {name: 'kim', job: '학생'};
let info = {job: '직장인',  age: '25'}

let userinfo = Object.assign(user, info);
console.log(user); // {name: 'kim', job: '직장인', age: '25'}
console.log(info); // {job: '직장인', age: '25'}
console.log(userinfo); // {name: 'kim', job: '직장인', age: '25'}

  • Object.assign({}, a) : 빈 객체에 a객체의 내용을 복사
    원본 객체인 a에 손상 없이 복사함
let user = {name: 'kim', job: '학생'};

let user2 = Object.assign({}, user);
user2['name'] = 'park';
user2['mbti'] = 'EEEE';

console.log(user);
// {name: 'kim', job: '학생'}
console.log(user2);
// {name: 'park', job: '학생', mbti: 'EEEE'}

Object.entries(obj)

객체의 entry(키-값 쌍)을 배열로 리턴

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

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

  • for문을 이용해 출력도 가능
let obj = {1: 'a', 2: 'b', 3: 'c', 4:'d'};

for (let [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}

// 1: a
// 2: b
// 3: c
// 4: d

Object.is(a, b)

a 와 b의 객체가 같은지 boolean 타입으로 비교할 수 있음, true or false 값 반환

let user = {name: 'kim', job: '학생'};
let info = {job: '직장인',  age: '25'}

console.log(Object.is(user, info)); // false

hasOwnProperty()

객체가 주어진 프로퍼티를 가지고 있는지 여부를 true, false 로 반환

let user = {name: 'kim', job: '학생'};

console.log(user.hasOwnProperty('name')); // true
console.log(user.hasOwnProperty('age')); // false




객체 반복문

for...in문

객체의 key를 하나씩 가져온다.

let obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
}

for (let key in obj) {
  console.log(key);
  // key1 key2 key3
  
  console.log(obj[key]);
  // value1 value2 value3

  console.log(key + : + obj[key]) // === console.log(`${key}:${obj[key]}`))
  // key1:value1
  // key2:value2
  // key3:value3
}

for...of문

iterable 한 속성을 지닌 String, Array, TypedArray, Map, Set에서 값을 하나씩 가져옴.
객체는 iteerable이 아니기 때문에 사용할 수 없어서
Object.keys(object) 또는 Object.values(object)를 통해 배열(Array) 로 바꿔서 값을 가져와야 함.
Object.entries(object)를 이용하면 enumerable 속성의 key와 value 배열을 동시에 가져올 수 있음

let obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
}

for (let value of obj) { //TypeError: obj is not iterable
}

for (let key of Object.keys(obj)) { 
  console.log(key); //key1 key2 key3
}

for (let value of Object.values(obj)) {
  console.log(value); // value1 value2 value3
}

for (let [key, value] of Object.entries(obj)) { 
  console.log(key +': ' + value); // key1: value1 ; key2: value2; key3: value3;
}




객체 다루기(2)

객체에 속성 추가하는 방법

  1. dot/bracket notation 을 이용
  2. Object.assign(a,b) 사용
  3. 스프레드 연산자 사용
    두 개체의 속성을 새 개체로 병합하는데 .assign(a,b) 과 다르게 기존의 속성을 바꾸지 않음
let user = {name: 'kim', job: '학생'};
let info = {job: '직장인',  age: '25'}

let userinfo = Object.assign(user, info);
console.log(user); // {name: 'kim', job: '학생'}
console.log(info); // {job: '직장인', age: '25'}
console.log(userinfo); // {name: 'kim', job: '직장인', age: '25'}

객체의 속성 갯수 구하는 방법

Object.keys().length;
()안에 원하는 객체를 넣는데,
Object.key() 는 해당 객체를 배열로 만들어주는 것으로
그 배열의 길이를 .length 속성(property)로 가져오면,
그 값이 결국 객체 속성(key 와 값)의 갯수가 되는 것 

let obj = {name: 'kim', job: '직장인', age: '25'};

console.log(Object.key(obj).length); // 3;
console.log(Object.key(obj));// ['name','job','age']

특정 key 추출하기

Filter 활용 링크

profile
moono
이전 포스트

배열과 반복문의 조합

다음 포스트

원시 자료형과 참조 자료형

0개의 댓글