자바스크립트에서 객체와 배열은 메소드 사용이 헷갈릴 때가 종종 있어서 이렇게
글로 정리하자 한다. 그리고 처음 자바스크립트를 접한다면 잘 모를 수 있지만 알아두면 유용한 것들만 소개한다.

객체에 값을 추가하려면 ☺️

Object.assign을 쓰자!

let addKeyValue = Object.assign({key1:'값1'},{key2:'값2'},{key3:'값3'})

return addKeyValue;

// 결과 { key1: '값1', key2: '값2', key3: '값3' }

결과값으로 { '키1': '값1', '키2': '값2', '키3': '값3' } 이렇게 하나의 object로 만들어진다.

1. 그런데 이 객체는 유지한 채 {키4:'값4'} 의 쌍을 추가하고 싶다면?

let addKeyValue = Object.assign({ key1: "값1" }, { key2: "값2" }, { key3: "값3" });

addKeyValue = Object.assign(addKeyValue, { key4: "값4" });   // ✅ 해당 코드 추가

return addKeyValue;

// 결과 { key1: '값1', key2: '값2', key3: '값3', key4: '값4' }

주의할 점은
let 을 썼기 때문에 addKeyValue의 값은 재할당 될 수 있다는 것이다. (값 변경이 가능하다.)

2. 그런데 이 객체에 다른 방법으로 {키4:'값4'} 의 쌍을 추가하고 싶다면?

let addKeyValue = Object.assign({ key1: "값1" }, { key2: "값2" }, { key3: "값3" });

addKeyValue.key4 = "값4"    // ✅ 해당 코드 추가

return addKeyValue;

// 결과 { key1: '값1', key2: '값2', key3: '값3', key4: '값4' }

아주 간단하게 객체.key = 추가하려는 value 를 사용하면 된다.
더 간단하고 직관적이어서 나는 이 방법을 주로 사용한다.

배열에 값을 추가하려면 😊

push를 쓰자!

const fruitBox = [];
const inputs = { fruit1: "apple", fruit2: "banana", fruit3: "orange" };

for (let fruit of Object.values(inputs)) { 
    fruitBox.push(fruit)
}
return fruitBox

// 결과 [ 'apple', 'banana', 'orange' ]

inputs 라는 객체는 {key:value}로 이루어져있다.
먼저 Object.values(inputs)를 해서 value만 꺼내온다. (apple, banana, orange)
그리고 변수 과일 상자 (fruitBox) 안에 push한다.

배열 값을 하나씩 꺼내려면?

조건 1. for문 사용하지 않는다.
조건 2. split 사용하지 않는다.

javascript를 사용하는 개발자라면 알아두면 좋을 방법 한가지를 소개한다.
다시 위의 과일 상자를 가져오자. 🍏🍌🍊

  1. ... 을 사용하자.
const fruitBox = [{ fruit1: "apple", fruit2: "banana", fruit3: "orange" }]
console.log(...fruitBox)

// 결과 { fruit1: "apple", fruit2: "banana", fruit3: "orange" }

배열 안의 값이 빠져나온다.

profile
developer / not moving for fortune, only aiming for clear sense of purpose. That's all.

0개의 댓글