[Javascript]-object

오다경·2022년 11월 29일
0

javascript basic

목록 보기
12/12

객체란 무엇일까?

객체는 key/value pair를 저장할 수 있는 구조이다.
key/value의 예시
< 사람 1 >
이름: dakyung oh
나이: 27
주소: 동탄
key : "이름", "나이", "주소"
value(그에 해당하는 정보) : "dakyung oh" , 27, "동탄"

const person = {
  name : "dakyung oh",
  age : 27,
  address : "동탄"
};

key/value 뒤에 "쉼표 : ,"를 이용하여 그 뒤에 오는 key/value와 구분해주어야 한다.

객체에 저장된 내용 가져오는 방법

const person = {
  name: "dakyung oh",
  age: 27,
  address: "동탄",
};

const myName = person.name; 
const myAge = person.age;
const myAddress = person["address"];

console.log(myName); //dakyung oh
console.log(myAge); // 27
console.log(myAddress); // 동탄

객체 리터럴을 이용해 속성을 지정할 때, 이미 정의된 변수나 함수를 이용하여 Value로 지정할 수 있다.

const me = "dakyung";

function getAge() {
  return 27;
}

function getAddress() {
  return "동탄";
}

const person = {
  name: me,
  age: getAge(),
  adress: getAddress(),
};
console.log(person); //{ name: 'dakyung', age: 27, adress: '동탄' }

객체 범주에 배열과 함수 포함하기

// 배열
const arr = [1, 2, 3, 4, 5, 9];
console.log(arr[1]); // 2
console.log(arr.title); // undifined
arr.title = "dakyung's velog";
console.log(arr.title); // dakyung's velog
// 함수
function foo(x, y) {
  return x + y;
}
console.log(foo.title); // undifined
foo.title = "dakyung's velog2";
console.log(foo.title); // dakyung's velog2
console.log(foo(1, 5)); // 6

객체에서 .연산자와 [ ]연산자의 차이

  • .연산자는 뒤에 오는 값을 스트링 취급한다.
  • []연산자는 뒤에 오는 값을 변수 취급한다.

eg) human에 age 값 30을 추가해보자

const human = {};
human.age = 30 // (o) .연사자 뒤에 오는 age는 스트링이다.
human['age'] = 30 // (o)  []연산자 뒤에 오는 [age]는 변수이다. 
const age = 'age'; human[age] = 30 // (o)
// human age = 30 // (x)
// human = age+30 // (x)
// human[age] = 30 // (x)

위의 내용을 적용하여 문제를 풀어보자

const human = {};
const propertyAge = "age";  
const propertyValue = 30;

- []연산자를 사용하는 경우
human[propertyAge] = propertyValue;
console.log(human); // { age: 30 }
- .연산자를 사용하는 경우
human.propertyAge = propertyValue; 
console.lof(human); // {propertyAge : 30}

function merge(propertyAge, propertyValue) {
  let obj = {};
  obj[propertyAge] = propertyValue;
  return obj;
}
console.log(merge("age", 30)); // { age: 30 }
profile
개발자 꿈나무🌳

0개의 댓글