[javascript]object,Object.keys(),Object.values() 다루기
1. javascript에서 Object란?
Javascript는 Object 기반의 스크립트 언어라고 한다. Object는 데이터를 한곳에 모으고 구조화하는데 유용하도고 한다. (뭐 그렇다고 한다. 솔직히 개념만 늘어놓아서 아 알겠어!를 외치는 천재이길 바라지만... 난 아닌거 같다 ... 그리고 엄청나게 뛰어나신 분들이 다 정리를 하셨다능!!ㅋㅋㅋ)
자, 예를 들어보자고,
고객 중 홍길동 이고 , 나이는 23 이고, 직업은 경찰관이라고 해보자.
각각의 변수로 만들게 되면,
이렇게 각각의 변수명을 가지는 값을 넣어줘야한다. 이런 경우 단순하게 데이터를 정의해서 값을 넣는 것이 그닥 어렵지 않지만 , 여기서 성별, 취미 , 특기 , 연봉, 가족관계 ... 많은 데이터를 변수명을 지정하고 , 값을 넣어준다면 데이터에 관리하는 큰 불편함이 생길 것이다. 이점을 해결하기 위한 Object 함수를 사용한다.
이걸 Object 형식으로 변경한다면,
결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)
client 부분만 자세히 봐주세요!
client 변수에 Object를 값으로 name(key) : '홍길동' (value) 이런식으로 값을 넣어주면 됩니다. 즉, key : value 값 형식으로 넣어주시면 됩니다.
데이터를 추가한다면,
결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)
자 그렇다면 , 예를 들어 다른 사람이 만들어 놓은 Object 자동차에 관한 정보가 있을 때 이에 대한 key와 value를 정보를 알고 싶은 경우가 있죠.
이럴 때, 유용한 정보 Obejct.keys()와 Object.values()가 있습니다.
2. Obejct.keys()와 Object.values() 사용 해보기
결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)
Object.keys()를 통해서 Object car 만들어진 key의 정보를 얻을 수 있고,
Object.values()를 통해서 Object car 만들어진 value의 정보를 얻을 수 있습니다.
지금은 key와 value 정보들이 많지는 않지만, 많을 경우를 대비하여서 사용할 수 있습니다.
그리고 key에 대한 값이 없는 경우 undefined로 나오는 것을 확인할 수 있습니다.
전체 테스트 코드
'[javascript]' 카테고리의 다른 글
jsp servlet(서블렛)를 통한 ajax, object 편 (0) | 2018.04.21 |
---|---|
[javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기 (0) | 2018.04.20 |
[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker (0) | 2018.04.19 |
[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기 (0) | 2018.04.17 |
[javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유 (0) | 2018.04.17 |