ReactJs 기초 객체와 배열

객체는 키(key)와 값(value)의 쌍으로 구성된 데이터 구조

자바스크립트에서는 거의 모든 것이 객체로 다루어진다

JSON(JavaScript Object Notation)에 대해서도 많이 다루게 된다

---

객체는 const 또는 let으로 변수화 시켜 선언합니다.

value에는 어떤 데이터 타입이라도 올 수 있음을 기억.

let user = {
  name: "르탄이",
  age: 30,
  isAdmin: true,
  printHello: () => console.log("hello!"),
};

객체접근방법1 : dot notation(. 표기법)

console.log(user.name); // 르탄이
console.log(user.age); // 30
user.printHello(); // hello

객체접근방법2 : Bracket Notation(괄호 표기법)

키 값이 변수일 때 주로 사용합니다.

example 1
console.log(user['name']);
console.log(user['age']);

example 2
let attribute = "name";
console.log(user.attribute); // 이 케이스는 안돼요!
console.log(user[attribute]);

---

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5 length의 값과 요소 순서 값은 다르다!

배열의 요소에 접근하고 요소를 수정하기.

console.log(numbers[0]); //배열 접근하기
numbers[2] = 10; //배열 수정하기
console.log(numbers); //[1, 2, 10, 4, 5]

---

객체의 주요 메서드

( 1 ) 객체

const user = {
  name: "르탄이",
  age: 30,
  isAdmin: true,
};

( 1 ) Object.keys( ) {객체}의 key 값을 추출하여 [배열]로 반환한다.

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

( 2 ) Object.values( ) { 객체 }의 value값을 추출하여 [ 배열 ]로 반환한다.

const ValuesOfUser = Object.values(user);
console.log(ValuesOfUser); // [ '르탄이', 30, true ]

( 3 ) Object.entries( ) 위랑 똑같음, 키와 밸류값을 모두 가져와서 [ 배열 ]로 반환함

[["name", "르탄이"], ["age", 30], ["isAdmin", true]]

(4) Object.assign() // assign : 할당하다

위의 선언한 user에 이어서

const userDetails = {
  occupation: "개발자",
};

Object.assign(user, userDetails); // 위에 선언한 user에 새로운 선언 userDetails를 더하다
console.log(user);
{name: "르탄이", age: 30, isAdmin: true, occupation: "개발자"}