JS)객체

백준우·2021년 9월 30일
0

JavaScript & TypeScript

목록 보기
6/15
post-thumbnail

객체

1. 객체에 대해

1.1 객체의 기초
1.2 객체 값 추가, 삭제
1.3 for~in 활용

2. 객체의 다양한 활용

2.1 sort로 객체값 정렬
2.3 객체를 활용한 예시


1. 객체에 대해

1.1 객체의 기초

  • 객체란?
    객체는 많은양의 정보를 한번에 정리하여 표현 할 수 있습니다. 게임을 예시로 들었을때 캐릭터는 많은양의 정보를 가지고 있습니다. ID,능력치,직업,소지금,소지아이템... 등 수도 없이 많습니다.
    하지만 게임에서는 이러한 캐릭터가 엄청나게 존재하므로 각 개별로 능력치를 정리하는것은 한계가 있습니다.
    이럴때 객체를 활용해서 캐릭터를 정리하면 훨씬 데이터를 다루기 쉽고 보기 편해집니다.
캐릭터A ={
      ID: Baek10930,
      직업: 마법사,
      소지금: 3000,
      능력치: 93 
      ...}
	
캐릭터B ={
      ID: junu324 ,
      직업: 전사,
      소지금: 2300,
      능력치: 88 
      ...}

객체의 구성을 살펴보면 캐릭터A에는 ID,직없,소지금,능력치..를 키로 가지고 있으며 그안에 마법사,3000등 키값을 가지고 있습니다.

  • 객체값 호출
    이러한 2개의 캐릭터의 특징을 객체로 정리하였습니다. 객체는 호출하는 방법도 있습니다.
    1)obj.key = value 활용
    2)obj['key'] = value 활용

Tip) 키값을 변수로 받아야 할경우 2)의 방법을 사용해야 합니다.

obj = {
  	Id: 'baek',
  	job: 'programmer',
  	age: 26
       }

function call(key){
	return obj[key] //obj.key는 활용 자체가 불가하며 ['key']를 사용시 obj에서 'key'라는 객체만을 찾아서 출력함
}
call('job') // programmer

1.2 객체 값 추가, 삭제

  • 객체 값 삭제
    1) delete obj['Delete_Key'] ,
    2) delete obj.Delete_Key
obj = {
  	Id: 'baek',
  	job: 'programmer',
  	age: 26
       }

delete obj['job']
obj = {
  	Id: 'baek', 
  	age: 26,
       }
  • 객체 값 추가
obj = {
  	Id: 'baek',
  	job: 'programmer',
  	age: 26
       }
// 밑에 3가지 방법으로 값을 추가 할수 있습니다 .
obj['hometown'] = 'Daegu'
obj.height = 180
obj.girlfriend = false
  • 객체 + 객체
obj = {
  	Id: 'baek',
  	job: 'programmer',
  	age: 26
       }
obj2 = {
  	car: true,
  	hobby: 'soccer',
  	hometown: 'Daegu'
       }
let human_status = {...obj,...obj2}

human_status = {
 	Id: "baek"
	age: 26
	car: true
	hobby: "soccer"
	hometown: "Daegu"
        job: "programmer"
		}

전개구문(spread)기법을 활용하면 객체와 객체를 합치는것을 할 수 있다.

Tip) key,value추가시 assing사용

  • Object.assign(obj,{Add_key: value})
Object.assign(obj,{from: korea}) 

1.3 for~in 활용

"in"연산자를 활용하면 key가 객체에 있는지 확인 가능하다.

obj = {
  	Id: 'baek',
  	job: 'programmer',
  	age: 26
       }
'ID' in obj // true 
'car' in obj // false

이를 활용해 for~in을 사용하면 객체에 key를 하나씩 호출이 가능하다.

EX) 객체를 입력받아 number 타입의 값을 갖는 속성을 모두 제거해야 합니다.

function Deletetype(obj) {
  for(let key in obj){ //key라는 변수에 obj의 key를 하나씩 대입합니다.
    if(typeof(obj[key]) === 'number'){ //obj의 key값중 type이 'number'이라면 조건문을 실행한다.
      delete obj[key] //위 if문을 통과한 key를 삭제한다.
    }
  }
}

2. 객체의 다양한 활용

2.1 sort로 객체값 정렬

  • 객체이 key의 value 값들을 정렬 메소드인 sort를 활용해서 정렬할 수 있다.
let list = [
    {name : 'baek',
    age: 29,
    from:'Korea'},
    
    {name : 'junu',
    age: 50,
    from:'Korea'},
    
    {name : 'woo',
    age: 12,
    from:'USA'}
]
let newarr =list.sort(function(num1,num2){
     return num1.age-num2.age})//sort를 사용해여 age의 value값 순으로 오름차순으로 정렬하였음
newarr =
profile
이게 되네?

0개의 댓글