'#Object.values'에 해당되는 글 1건

[javascript]object,Object.keys(),Object.values() 다루기



1. javascript에서 Object란?


 Javascript는 Object 기반의 스크립트 언어라고 한다. Object는 데이터를 한곳에 모으고 구조화하는데 유용하도고 한다. (뭐 그렇다고 한다. 솔직히 개념만 늘어놓아서 아 알겠어!를 외치는 천재이길 바라지만... 난 아닌거 같다 ... 그리고 엄청나게 뛰어나신 분들이 다 정리를 하셨다능!!ㅋㅋㅋ) 


자, 예를 들어보자고, 

고객 중 홍길동 이고 , 나이는 23 이고, 직업은 경찰관이라고 해보자.

각각의 변수로 만들게 되면,


var client_name = '홍길돌';
var client_age = '23';
var client_job = '경찰관';


이렇게 각각의 변수명을 가지는 값을 넣어줘야한다. 이런 경우 단순하게 데이터를 정의해서 값을 넣는 것이 그닥 어렵지 않지만 , 여기서 성별, 취미 , 특기 , 연봉, 가족관계 ...  많은 데이터를 변수명을 지정하고 , 값을 넣어준다면 데이터에 관리하는 큰 불편함이 생길 것이다. 이점을 해결하기 위한 Object 함수를 사용한다.


이걸  Object 형식으로 변경한다면,

var test = 'a'; // string
var test1 = 1 ; // number
var client = { 'name' : '홍길돌' , 'age' : 23 , 'job' : '경찰관'};
// 또는 new Object(); 같은 방법이면 축약법으로도 같은 기능을 수행

console.log(typeof(test)); //변수의 타입을 확인
console.log(typeof(test1));  //변수의 타입을 확인
console.log(typeof(client)); //변수의 타입을 확인               
console.log(client)


결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)


client 부분만 자세히 봐주세요! 

client 변수에 Object를 값으로 name(key) : '홍길동' (value) 이런식으로 값을 넣어주면 됩니다. 즉, key : value 값 형식으로 넣어주시면 됩니다.


데이터를 추가한다면, 

client['sex'] = '남';
client['hobby'] ='socker';

console.log(client)

결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)


자 그렇다면 , 예를 들어 다른 사람이 만들어 놓은 Object 자동차에 관한 정보가 있을 때 이에 대한 key와 value를 정보를 알고 싶은 경우가 있죠. 


이럴 때, 유용한 정보 Obejct.keys()와 Object.values()가 있습니다.



2.  Obejct.keys()와 Object.values() 사용 해보기


결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)

var car = {'name' : 'max' , 'maxSpeed' : "240" , 'minSpeed' : "0" , color : 'blue' };
//car에 대한 정보를 설정
console.log(Object.keys(car)); //car key의 정보
console.log(Object.values(car)); //car vlaue의 정보

console.log(car['name']); // 특정 key 정보를 알고 싶을 때
console.log(car['age']);// key값이 정의되지 않는 경우



Object.keys()를 통해서 Object car 만들어진 key의 정보를 얻을 수 있고,

Object.values()를 통해서 Object car 만들어진 value의 정보를 얻을 수 있습니다.

지금은 key와 value 정보들이 많지는 않지만, 많을 경우를 대비하여서 사용할 수 있습니다.

그리고 key에 대한 값이 없는 경우 undefined로 나오는 것을 확인할 수 있습니다.


전체 테스트 코드


블로그 이미지

미나미나미

,