[JS] 객체

배열과 객체의 가장 큰 차이점은 순서의 유무입니다. 배열은 요소에 0부터 순차적으로 접근할 수 있지만 객체는 속성에 순서대로 접근하지 않고, key를 통해서 value에 접근합니다.

 

1. 객체의 구조

key는 first, second를 지칭하는 값

value는 1, 2를 지칭하는 값 입니다.

이 둘을 구분 하는건 :(콜론)을 두어 구분합니다.

중괄호를 사용하고, key와 value 값이 2개 이상 늘어날 경우 , 로 구분을 해줍니다.

 

let obj = {

first: 1,

second: 2

};

 

 

2. 객체의 값 사용 및 추출

객체를 지정하거나 만들었으면 그 값을 사용 할 줄도 알아야 합니다.

value 출력하는 2가지의 방법이 있습니다.

1. Dot notation

obj.first;    //   '1'

 

2. Bracket notation

obj['fisrt'];    //   '1'

작은따옴표, 큰따옴표, 백틱 다 사용 가능합니다.

 

tweet.[content] 와  tweet['content']의 차이

따옴표가 없으면 변수값을 넣는 것이고

따옴표가 있으면 key값을 넣는 것입니다.

key 값이 변수일 때, 즉 key 값이 변하는 동적일 때 주로 사용 합니다.

 

연산자 in을 통하여 key 값의 존재 유무도 확인이 가능

'first' in obj ;   //   true

 

 

3. 객체 속성 삭제를 위한 delete 키워드

const obj = {
  name: 'Sam',
  age: 20,
};

function removeProperty(obj, property) {
  delete obj[property];
}

removeProperty(obj, 'name');
console.log(obj.name); // --> undefined

delete obj[변수] 또는 delete obj['키값']을 통해 제거가 가능하다.

 

 

4. 객체를 위한 for문  (for ... in 문)

객체의 모든 key를 콘솔에 출력하기 위한 방법 입니다. 보통 반복문을 통해서 출력을 할 수 있지만, 이 때까지 써온 반목문과는 다르게 for ~ in 문을 사용 합니다. let key를 선언 하면서 obj라는 객체의 키값을 모두 출력 합니다.

function allkeys(obj) {
	for (let key in obj) {
	console.log(key) 
	} 
}

 

아래의 코드는 obj2의 키 값을 호출하여 obj1 의 키값과 다르다면 obj2의 키값을 obj1에 키값을 넣는 코드 입니다.

 

function extend(obj1, obj2) {
	for (let key in obj2) {
		if (!(key in obj1)) {
		obj1[key] = obj2[key];
		}
	}
}

 

코드를 실행시켰을 때에는 배열안에 값을 담아 출력하는 것이 아닌 값 하나하나를 리턴 한다는 것입니다.

for...of 문도 동일합니다.

 

5. 배열을 위한 for문  (for ... of 문)

for of는 string과 array, 유사배열 등에서 사용이 가능한 반복문입니다. 

for (let arr[i] of arr)가

for (let i = 0; i < arr.length; i += 1) 과 같다고 생각하면 쉽습니다.

 

사용하는 방식은 for~in 문과 동일하게 사용 하면 됩니다. 단지 배열도 for~of문을 통해 반복문이 사용 가능하다는 점 입니다.

 

 

 

6. 키값, 벨류 값만 배열로 출력

Object.keys(obj)

Object.values(obj)

위 두 함수는 각각 키값과 벨류값을 배열로 출력해주는 함수 입니다.