[JS]개체에서 데이터를 가져오는 법과 개체 안의 데이터를 바꾸는 법

공통된 특징으로는 점과 괄호 표기법을 활용한다. 
 
1. 개체로부터 속성을 얻는 첫번째 방법: .표기법을 사용한다.
만일 성을 얻고 싶다고 가정하면?

const jonas = {
  firstName: "Jonas",
  lastName: "Schmedtmann",
  age: 2037 - 1991,
  job: "teacher",
  friends: [("Michael", "Peter", "Steve")],
};

console.log(jonas);

console.log(jonas.lastName);

jonas.lastName을 입력하면 된다.
그러면 저 성이 jonas객체에서 바로 나왔다. 저기에서 .은 연산자이다.
.lastName에 있는 연산자가 jonas(지정한 이름)으로 속성을 검색하는 거다. 괄호를 이용해 똑같은 것을 할 수 있다.

console.log(jonas["lastName"]);

괄호를 이용한다. 우선 배열로 부터 데이터를 검색한다. 여기에서는 속성 이름을 가진 문자열을 명시해야 한다.
 
그렇다면 .과 []의 차이점은 무엇일까? 
괄호 표기법에서 원하는 아무 식이나 입력할 수 있다. 문자열을 명시적으로 작성할 필요는 없다. 대신에 연산에서 계산할 수 있다. 연산은 기본적으로 식이니까.. 어떤 것이 값을 생성하면 저기 괄호 안에 넣을 수 있다. 
 
첫번째 코드를 보면 반복되는 부분을 이름과 성에 저장하는 변수가 있다.  둘다 name이 있다. 그걸 변수안에 저장한다.

const nameKey = "Name";

네임 키를 누르고 이름만 입력한다. 두개의 속성 이름에서 반복되는 부분이다. 그러면 저 변수를 이용해서 이름과 성을 둘다 얻을 수 있다. 

 

const nameKey = "Name";
console.log(jonas["first" + nameKey]);
console.log(jonas["last" + nameKey]);

console.log(jonas["first" + nameKey]);
먼저 문자열을 생성해 nameKey와 연결한다. 그리고 템플릿 리터럴을 이용해 문자열을 구축할 수 있지만 이 경우에서는 필요하지 않다.
 nameKey가 'first'를 + 연산을 실행해 시작하게 된다. 그래서 문자열 첫번째 이름을 생성하게 되는거다. 그리고 jonas 객체로 가서 그 속성을 가져올 것이다. 
★ 대괄호 안에 어떤 식이든 넣을 수 있다. 
 
같은 .연산자나 .표기법으로는 안된다. 

console.log(jonas.["first" + nameKey]); //오류발생

 
● 실제 속성 이름을 써야한다. 

console.log(jonas["lastName"]);

에서 lastName은 실제 속성이름이다. 객체에 나타날때말이다. 그래서 작동하는 것이다. 
 
그렇다면 어떤 상황에서 .표기법/ 괄호표기법을 써야할까?
속성 이름을 먼저 계산해야 할땐 위의 코드처럼 괄호를 써야한다. 그리고 다른 경우에는 .표기를 하면 된다. 
.표기법이 더욱 간단하고 사용하기 쉽다. 

---

프롬프트를 이용할 수 있다. prompt는 JS에 내장되어 있고 모든 스크립트에서 사용할 수 있는 기능이다. prompt를 작성하면 입력 필드로 팝업 창을 만들 수 있다. 

prompt(
  "what do you want to know about Jonas? Choose between firstName, lastNAme, age, job and friends."
);

이 함수는 문자열을 반환한다. 또한 이 문자열은 어떤 변수에 저장만 하면 된다. 

const interstedIn = prompt(
  "what do you want to know about Jonas? Choose between firstName, lastNAme, age, job and friends."
);
console.log(interstedIn);

이렇게 팝업창이 떴다. 이제 옵션 중에 입력하면 된다. 
그러면 큰솔창에 job이라고 나온다. 
 
.표기법으로 쓸 수 있을까?

const interstedIn = prompt(
  "what do you want to know about Jonas? Choose between firstName, lastNAme, age, job and friends."
);
console.log(jonas.interstedIn);

undefined가 나왔다. 정의되지 않은 건 존재하지 않는 개체의 속성에 접근할 때 발생된다.
조나스한테는 interestedIn이 없는거다. 그래서 조나스에 대한 관심에 접근한 결과가 명확하게 안나왔던 것이다. 
그렇다면 어.떻.게 하면 좋을까? .표기법 대신 괄호 표기법을 작성하는거다. 
왜? 괄호 표기법은 어떤 식이든 넣을 수 있으니까

const interstedIn = prompt(
  "what do you want to know about Jonas? Choose between firstName, lastNAme, age, job and friends."
);
console.log(jonas[interstedIn]);

정의되지 않은 건 존재하지 않는 개체의 속성에 접근할 때 발생한다. JS는 이제 여기로 와서 "관심있다"를 변수의 실제 값으로 대체한거다. 

 

요소를 검색하는 법

 

정의되지 않은 값은 거짓값이다. 그걸 장점으로 이용해 사용자가 존재하지 않는 속성에 액세스할 때마다 사용자 지정 문자열을 프린트하는 논리를 만들 수 있다. 

 

if (jonas[interstedIn]) {
  console.log(jonas[interstedIn]);
}

이 값이 존재한다면 참 값이 된다. 왜냐하면 정의되적이 없으니까.

if (jonas[interstedIn]) {
  console.log(jonas[interstedIn]);
} else {
  console.log(
    "Wrong request! Choose between firstName, lastNAme, age, job and friends."
  );
}

존재하는 않는 값이 나오면 출력으로는   "Wrong request! Choose between firstName, lastNAme, age, job and friends."이 된다.

 

점과 괄호 표기법을 이용해 개체에 새 속성을 추가하는 법

jonas.locationi = "Portugal";
jonas["twitter"] = "@jonasschmedtman";
console.log(jonas);