[JS] 객체 👉 배열 / 배열 👉 객체
본문 바로가기
더 알아보기/기능

[JS] 객체 👉 배열 / 배열 👉 객체

by 은돌1113 2022. 5. 27.

방 추가, 삭제 기능을 만든 후 서버에 데이터를 넘겨주는 과정에서 객체 형태가 아닌 배열 형태로 넘겨 달라는 요청을 받고 찾아보던 중 Object.entries()와 Object.assign()에 대해서 알게 되었다.

 

[React] 방 추가, 삭제 기능 만들기(객체 삽입, 삭제, 수정)

방을 추가하고, 삭제 할 수 있는 기능으로써 특정 방을 삭제하면 해당 방의 데이터만 삭제되고 나머지 값들은 자동으로 앞당겨 오도록 구현했다. (목적) 삭제 버튼 클릭 시 해당 행의 방만 삭제

eundol1113.tistory.com

 

아래 게시물을 참고하였고, 이 게시물은 내가 배운 개념을 정리하고자 작성한 게시물이다.

 

[js] 객체를 배열로 바꾸는 법, 배열을 객체로 바꾸는 법

자바스크립트 데이터에서 객체를 배열로, 배열을 객체로 바꾸는 방법입니다. 실무에서는 화면에서 게시판, 테이블과 같은 형태의 출력을 위해, 또는 서버 전송을 위해 자주 객체를 배열로 변환

goddino.tistory.com


1. 객체 👉 배열

 

기본 형태는 Object.entries()이다.

예시에서 보면 obj라는 객체를 생성했고, Object.entries()의 인자로 obj라는 객체를 넣어줬다.

결과로는 배열이 나왔는 데 1차원 배열이 2차원 배열이 출력 되었다. 처음에는 이를 활용하는 과정에서 헷갈렸는 데

단순히 객체의 key 값이 2차원 배열의 0번째 값으로 들어가고, 객체의 value 값이 2차원 배열의 1번째 값으로 들어 갔다는 걸 볼 수 있다.

 

2. 배열 👉 객체

 

기본 형태는 Object.assign(target, source)이다. 

예시를 보면 arr라는 배열을 생성했고, Object.assign()의 첫번째 인자로 빈 객체를, 두번째 인자로 객체로 변경 할 배열을 넣어준다.

결과로는 객체가 나온다. key 값에는 배열의 index 값이 들어가고, value 값에는 두번째 인자로 넣어줬던 배열의 값들이 들어간다.

댓글