멋쟁이사자 FE7 27일차

Findings (배운 점)

---

JS

Object 

객체(Object)는 데이터와 그 데이터를 조작하는 함수들을 하나의 그룹으로 묶은 것이다. 객체는 다양한 형태의 정보를 저장하고 조작할 수 있도록 도와준다
객체는 중괄호 {}로 둘러싸여 있으며, 내부에는 "프로퍼티"와 "메서드"라고 불리는 키-값 쌍들이 포함됩니다. 프로퍼티는 객체의 데이터를 나타내고, 메서드는 객체에서 수행할 수 있는 작업을 정의한 함수입니다.

property 설명

1.  property name : property value (key(키) : value(값))

2.  property name 

• 따옴표 ('') 생략 가능
• 첫글자 문자, 밑줄, 달러 사용가능 // 띄어쓰기, 하이픈(-)을 사용하려면 따옴표를 써줘야 한다  ex) "h i" 

3. property value

• 모든 자료형 가능, 객체도 들어갈 수 있음

4. 각각의 키와 값은, (콤마)로 구분

let object = {
 Name: 'hyunwoo',
 tall: 177,
 bestCourse: {
     title: '자바스크립트',
     language: 'javascript'
 }
}

 

property 접근법

접근법에는 점( . ) 표기법과 대괄호( [] ) 표기법이 있다.

점표기법은  "" 없는 키값만사용가능하며,  대괄호 표기법은  "" 형태의 키값이 들어간다.

let hyunwoo = "is happy"
console.log(object.Name)
console.log(object["is happy"])
console.log(object[hyunwoo])

property 추가/변경/삭제

1. 객체의 property 값 수정

• 객체의 프로퍼티에 접근 후 값을 대입하면 된다

object.Name = 'Choi'; // Name은 이미 있는 property
console.log(object.Name);
// choi 출력

2. 객체의 property 키와 값 추가

• 객체의 property 값 수정 과 동일하게 진행하면 된다.

let hyunwoo = {
 tall: 177
}
hyunwoo.job = 'developer';
console.log(hyunwoo);
// {tall: 177, job: 'developer'}

객체 내부 property 존재여부 확인

'프로퍼티명' in 객체

직접적으로 undefined 비교할수도 있지만 초기에 undefined 할당할 수도 있기 때문에 in이 나음

property name(키)에 " "를 꼭 붙여주자!

let hyunwoo = {
 tall: 177
}

if ("tall" in hyunwoo) {
  console.log("있어요.");
} else {
  console.log("없어요.");
}

객체 내부 메소드 생성

프로퍼티 만들듯이 하면 된다.

let myVoca = {
  addVoca: (x,y) => {
    myVoca[x] = y
  },
  deleteVoca: x => {
    delete myVoca[x];
  },
  printVoca: x => {
    console.log(`"${x}"의 뜻은 "${myVoca[x]}"입니다.`)
  }
};

myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);

myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);

myVoca.printVoca('property');

// 출력화면
// {
//   addVoca: [Function: addVoca],
//   deleteVoca: [Function: deleteVoca],
//   printVoca: [Function: printVoca],
//   parameter: '매개 변수',
//   element: '요소',
//   property: '속성'
// }
// {
//   addVoca: [Function: addVoca],
//   deleteVoca: [Function: deleteVoca],
//   printVoca: [Function: printVoca],
//   property: '속성'
// }
//"property"의 뜻은 "속성"입니다.

for.. in 반복문

객체의 프로퍼티 이름들을 반복 === 객체의 key값들을 하나씩 가져옴

프로퍼티의 이름이 숫자인 경우 오름차순 정렬, 나머지 프로퍼티명들은 추가한 순서대로

for (변수 in 객체) {
    동작부분
}

for (let key in object) {
    /* 키/값 출력 */
    console.log(key)
    console.log(object[key])
}