자바스크립트 객체

• 들어가기 전에 자바스크립트 객체는 key와 value로 이루어진 dictionary 자료구조입니다. 간단한 형태로 아주 많이 사용되고 있으니 그 사용법을 잘 알아보도록 하겠습니다.

---

학습 목표

1. 자바스크립트 객체를 선언하고, 값을 얻는 방법을 알 수 있습니다.

핵심 개념

• JavaScript Object(객체)

학습하기

객체

• key, value 구조의 자료구조입니다.
• JavaScript 로 데이터를 표현하기 위해서는 Array, Object를 사용합니다.
• Object형태는 {}로 그 자료를 표현하며, 서버와 클라이언트 간에 데이터를 교환할 때 Object 포맷과 비슷한 방법으로 데이터를 보냅니다.

객체 선언

var obj = {name:"crong",age:20} 자바스크립트 객체구조를 본따 서버와 웹브라우저 간에 데이터를 주고받을 때 정의한 JSON이라는 것이 있습니다.

객체의 추가 / 삭제

const myFriend = {key:"value"} // value 출력 console.log(myFriend["key"]); console.log(myFriend.key); // 추가 myFriend.age = 34; //추가한 정보 출력 console.log(myFriend.age); 추가하는 방법은 dot notation을 더 많이 사용합니다.

객체의 탐색

객체를 탐색하는 방법은 여러 가지가 있습니다. for - in 구문을 사용하는 방법이 대표적입니다. `var obj = {"name":"codesquad" , age :22, data: [1,2,3,4,5]};

for(value in obj) { console.log(obj[value]); }` **for-in문은 키값이 있는 object(배열 자제)에 사용한다.for-in 문은 키값이 있는 object를 탐색하기 위한 목적이다. **

배열은 for문, forEach문 for MU

그 밖에도 객체를 탐색하는 방법으로는 Object.keys()를 이용한 후 forEach로 탐색하는 방법도 많이 쓰입니다. var myFriend ={ key : "value", addition : [ {name:'mawmaw'},{age:5} ] } Object.keys(myFriend).forEach(function(v){ console.log(myFriend[v]); }

직접 실습해보기

https://git.io/vQ2UR

숫자 타입으로만 구성된 요소를 뽑아 배열을 만들어보도록 해보세요. //실행결과 ["width", "height", "hOffset", "vOffset", "size", "hOffset", "vOffset"]

type이 sk인, name으로 구성된 배열만 출력해봅니다. href="https://git.io/vQukL" ["Yong", "hary", "solvin", "hani", "chulsu"]