TIL21⎟JavaScript : Object 에 대해 더욱 알아보자

Object

1.literals and properties

can add properties later by .
can delete properties later by .

• 객체의 키를 변수로 접근하기
  객체의 특정 키의 값을 가져오는 것뿐만 아니라, 반대로 객체에 특정 키를 만들고 값을 할당하는 것도 가능하다

const info = {
	name : "danbi"
}
const verb = "whatSheLoves";
const obj = "hamster";

info[verb] = obj;
console.log(info);

// { name : "danbi", whatSheLoves : "hamster"}

​

2. computed properties

danbi.name 처럼 .을 이용해서 쓰는 방법대신
.없이 danbi['name'] 배열에서 불러오는 것처럼 불러올 수 있다
key 값이 띄어쓰기가 포함되어있는 문자열이라면 []로 묶어줘야한다

​

3. property value shorthand ->
constructor function

반복되는 key와 value값을 지정해주는 function을 class constructor 지정해주는 것처럼 만들 수 있다
보통 변수는 영어대문자로 시작하고, this keyword를 사용한다
function Person(name, age){
this.name = name;
this.age = age;
}

​

4. property existence check

key in obj를 통해 property가 존재하는지 확인해본다

객체 순회하기

객체는 순서가 없고 키를 통해서만 접근이 가능하다. 하지만 배열과 다르게 명확하게 정해진 순서가 없기 때문에, 순서에 따라 객체의 키에 접근하게 될 지 알 수 없다. 배열을 순회할 때는 for loop을 사용했지만, 객체는 다른 방법으로 접근해야 한다.

그 중, 첫 번째 방법으로는 객체가 가지고 있는 키들의 목록을 배열로 리턴하여 접근하는 방법이 있다.

• Object.keys() : 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드, 객체의 내장 메소드가 아니라 객체 생성자인 Object가 직접 가지고 있는 메소드

const friends = {
	name : ['Ryan', 'Jordi', 'Anmond'],
    gender : 'unisex',
    isCute : true
}

Object.keys(friends) 
//['name','gender','isCute']

Object.keys 메소드가 리턴하는 값은 배열이기 때문에 이것을 이용하여 반복문을 사용할 수 있다!

const keys = Object.keys(friends) //['name','gender','isCute']

for(let i=0; i<keys.length; i++){
	const key = keys[i] //각각의 키
    const value = friends[key] //각각의 키에 해당하는 각각의 값(friends[name], friends[gender], friends[isCute]을 반환)
    console.log(value);
//
['Ryan','Jordi','Anmond']
unisex
true

두 번째 방법으로는,

• for-in
  반복문인 for loop과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는 ES6에 추가된 문법이다.
  객체 순회에 이용하는 방법외에도, 일반적인 배열에도 유용하게 쓰일 수 있다!

//일반적인 for loop
const friends = ['Ryan', 'Jordi', 'Anmond']
for (let i=0; i<friends.length; i++){
	console.log(i);
    console.log(friends([i]);
// 0
Ryan
1
Jordi
2
Anmond

//간단하게 축약하자면
for (let i in friends) {
	console.log(i)
    console.log(friends[i])
}    
//
// 0
Ryan
1
Jordi
2
Anmond

//i 대신에 다른 값을 넣어줘도 no problem!
for (let key in friends) {
  const value = friends[key]
  console.log(key) //012 숫자가 나온다!
  console.log(value); 
}

요약❗️

for (let i=0; i<friends.length; i++) 부분을
for (let i in friends) 로 간단히 축약할 수 있다

💡즉, i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가하는 등의 코드가 모두 담긴 것이 새롭게 추가된 문법이다. for-in문은 인덱스의 값을 무엇을 할당하고, 반복문이 몇 번 돌아야할지를 자동으로 이미 결정되어 돌아가는 편리함이 있다!위에는 배열의 예시이고, 이것을 객체에도 적용할 수 있다

💡for (let key in friends)
obj[key] 순서대로 key 값을 메소드로 넣어줌으로써 value 값을 구할 수 있다

const obj = {
	name : "Ryan",
    	age : 5,
    	isCute : true,
}

for (let key in obj) {
	const value = obj[key]
    	console.log(key)
    	console.log(value)
}    
//'name'
'age'
'isCute'
'Ryan'
5
true

​

5. key in obj & value of obj

​

6. clone obj

Object.assign(target, source)