object 접근, 추가 ,삭제

장돌뱅이 ·2022년 1월 11일

JavaScript

목록 보기

19/46

object(객체)

이름과 값을 가진 폴더 개념

spaceship이라는 객체를 만들었다. = {}안에 key: value,쌍(=속성)을 넣어 완성한다. 속성=함수일 때 이를 메서드라고 한다.
key는 값을 가지는 변수이름과도 같다(=property). value는 함수 혹은 다른 객체를 포함한 모든 데이터타입을 가질 수 있다. key-value pair는 콤마(,)로 구분한다.
위에서 Fuel Type이라는 key는 공백을 가지므로 ''로 감싸준다.

접근

객체의 속성에 접근하는 방법은 2가지가 있다.
객체에 원하는 속성이 없을 경우 undefined 반환.
1. 객체명.속성명
// silver 반환
2. 객체명[속성명] (특히 함수와 함께 쓰일 때 도움된다.)
// diesel 반환

let spaceship = {
  'Fuel Type' : 'Turbo Fuel',
  'Active Mission' : true,
  homePlanet : 'Earth', 
  numCrew: 5
 };

let propName =  'Active Mission';
console.log(spaceship[propName]); //true 반환

key값을 변수에 할당하여 값을 반환할 수도 있다.

추가

만약 객체에 속성이 이미 존재한다면 무슨 값이 있던간에 새로운 값이 할당된다.
만약 객체에 속성이 없다면, 새로운 속성이 객체에 추가된다.
** const로 선언된 객체는 재할당(reassign)될 수 없지만, 새로운 속성을 추가하거나 다른 속성으로 변형 할 수 있다.
객체 속성 생성 후에 key값에 대한 value값을 주고싶은 경우 =을 이용한다.

삭제

delete를 이용하여 객체의 속성을 삭제할 수 있다.

const spaceship = {
  'Fuel Type': 'Turbo Fuel',
  homePlanet: 'Earth',
  mission: 'Explore the universe' 
};
 
delete spaceship.mission;  // mission property 삭제

privacy
객체의 속성에 접근하거나 속성을 업데이트하고 싶지 않을 때, 속성 이름 앞에 언더바 _ 를 붙이면 이 속성은 건들지 말라는 것을 의미한다. (개발자끼리의 공통적 관습, 물론 값을 재할당 하는 것이 가능함.)

destructured assignment
객체의 key-value값을 추출하고 변수에 저장하는 방법이다.

const vampire = {
  name: 'Dracula',
  residence: 'Transylvania',
  preferences: {
    day: 'stay inside',
    night: 'satisfy appetite'
  }
};

위 코드에서 속성을 변수에 저장하고 싶을 때 일반적으로 아래와 같이 쓸 수 있다.

const residence = vampire.residence; 
console.log(residence); // Prints 'Transylvania'

그러나, destructured assignment 을 이용하면 간단하게 작업할 수 있다.
아래 코드처럼 객체의 key 이름을 {}로 감싸고 객체(vampire)를 할당한다.

const { residence } = vampire; 
console.log(residence); // Prints 'Transylvania'

심지어 destructured assignment를 이용하여 객체의 중첩된 속성을 가져올 수도 있다.

const { day } = vampire.preferences; 
console.log(day); // Prints 'stay inside'

const robot = {
  model: '1E78V2',
  energyLevel: 100,
  functionality: {
    beep() {
      console.log('Beep Boop');
    },
    fireLaser() {
      console.log('Pew Pew');
    },
  }
};

const {functionality} = robot;   //functionality가 robot.functionality를 참조하고 있기 때문에(functionality를 robot.functionality로부터 꺼내진 객체라고 생각하자)
console.log(functionality);

functionality.beep();   // Beep Boop 반환 //간단히 functionality를 통해서 robot.functionality에 이용가능한 메서드를 호출할 수 있다.

computed property(계산된 프로퍼티)

let a = "age";

const user = {
  name: "ari",
  [a]: 30, // age : 30 과 같다
};

console.log(user[a]); // 30



const user = {
  [1 + 4]: 5,
  ["안녕" + "하세요"]: "안녕",
};

console.log(user); // {5: 5, 안녕하세요: '안녕'}


let n = "name";
let a = "age";

const user = {
  [n]: "tom",
  [a]: 30,
};

console.log(user[a]); //30 



// 어떤게 key가 될지 모르는 객체를 만들때 유용하다
function makeObj(key, val) {
  return {
    [key]: val,
  };
}

const obj = makeObj("나이", 30);
console.log(obj); //{나이: 30}

빌트인 메서드

객체를 위한 빌트인 메서드를 사용할 수 있다.

1. Object.assign() : 객체 복제

Object.assign(target obj, sources obj) - source 객체(적용하고 싶은 속성을 가진 객체)를 복사하여 target 객체에 적용. 수정된 타겟 객체를 반환

const user = {
  name: "ari",
  age: 30,
};

const clone = Object.assign({}, user); // 빈객체는 초기값, 두변째 변수부터 초기값에 병합된다. 빈객체에 병합되므로 복제되는 것.
clone.name = "tom";
console.log(user.name); // ari
console.log(clone.name); // tom

만약 병합을 하는데 속성 키가 같다면 덮어쓰게 된다.

2. Object.keys() : 키 배열 반환

const user = {
  name: "ari",
  age: 30,
  gender: "male",
};

const clone = Object.keys(user);
console.log(clone); // ['name', 'age', 'gender']

3. Object.values() : 값 배열 반환

const user = {
  name: "ari",
  age: 30,
  gender: "male",
};

const clone = Object.values(user);
console.log(clone); //  ['ari', 30, 'male']

3. Object.entries() : 키/값 배열 반환


const user = {
  name: "ari",
  age: 30,
  gender: "male",
};

const clone = Object.entries(user);
console.log(clone); //  ['name', 'ari']  ['age', 30]  ['gender', 'male']

3. Object.fromEntries() : 키/값 배열을 객체로 반환

키와 값을 쌍으로 묶은 배열들을 배열에 넣어주면 객체로 만들어준다.

const arr = [
  ["name", "tom"],
  ["age", 30],
  ["gender", "male"],
];
const result = Object.fromEntries(arr);
console.log(result); // {name: 'tom', age: 30, gender: 'male'}