[JavaScript] - 객체/배열

🎈 객체 지향 언어인 javascript에서의 '객체'인 object
property는 그런 object의 속성을 뜻하며, 이름(name/key)과 값(value)의 연결로 이루어진다. 둘의 관계는 object는 property의 모음이라고 생각하면 쉽다.

const superman{
    name : 'clark',
    age : 33,
}

✔ 각 property는 쉼표로 구분해주며, 마지막 쉼표는 생략가능하나 있는게 수정,삭제시 용이함

Object - 접근,추가,삭제

🎈접근

const superman = {
  name : 'clark',
  age : 33,
}

console.log(superman.name); 👈🏻 점
console.log(superman.['age']); 👈🏻 대괄호

🎈추가

const superman = {
  name : 'clark',
  age : 33,
}

superman.hairColor = 'black';
superman['hobby'] = 'football';
console.log(superman);

🎈삭제

const superman = {
  name : 'clark',
  age : 33,
}

delete superman.age;
console.log(superman);

Object - 단축 property

ex)이름과 나이를 받아서 객체를 반환하기

function makeObject(name, age){
  return {
     name, //name : name,
     age, //age : age,
    hoby : 'football',
  }
}

const Mike = makeObject("Mike", 30);
console.log(Mike);

Object - property 존재여부확인

function makeObject(name, age){
  return {
    name,
    age,
    hoby : 'football',
  }
}

const Mike = makeObject("Mike", 30);
console.log(Mike);

console.log('age' in Mike);
console.log('birthdat' in Mike);

✔ in연산자를 사용해 property가 있는지 확인
: 어떤값이 넘어올지 확신할수없을때 사용
1. 함수인자로 받거나
2. API통신을 통해 데이터를 받을때

ex)나이를 확인해서 성인인지 아닌지 구분하기

function isAdult(user){
  if(user.age < 20){
    return false;
  }
  return true;
};

const Mike = {
  name : "Mike",
  age : 30,
};

const Jane = {
  name : "Jane",
};

console.log(isAdult(Mike));

👇🏻 결과값

function isAdult(user){
  if(!('age' in user ) || //user에 age가 없거나
  
  ✨'age' in user 있으면 true인데 !(NOT)을 이용해 반대로 뒤집어주어 
   > user에 age가 없거나로 인식 👉🏻 false
 
    user.age < 20){ // 20살 미만이거나
    return false;
  }
  return true;
};

const Mike = {
  name : "Mike",
  age : 30,
};

const Jane = {
  name : "Jane",
};

console.log(isAdult(Jane));

for...in반복문

const Mike = {
  name : "Mike",
  age : 30,
};

for(key in Mike){
  console.log(key);
  =console.log(Mike[key]); // 결과값 동일
}

👇🏻 결과값

---

🎈method: 객체 property로 할당된 함수

let boy = {
  name : "Mike",
  showName : function () {
    console.log(boy.name)
  }
};

let man = boy;
man.showName();

👇🏻결과값

🎈this

✔ 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
✔ 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴
: 객체의 method를 작성할때, 왠만하면 화살표함수 사용안하는게 좋음(오류발생)

let boy = {
  name : "Mike",
  showName : function () {
    console.log(boy.name)
  }
};

let man = boy;
boy = null; 👈🏻 man으로만 접근가능

man.showName();

👇🏻결과값

🎈해결방안

let boy = {
  name : "Mike",
  showName : function () {
    console.log(this.name) 👈🏻 method의 this는 해당객체를 가르킴
  }
};

let man = boy;
boy = null; 

man.showName();

👇🏻결과값

🎈Array(배열)
: 순서가 있는 리스트이며, 문자 뿐만 아니라 숫자,객체,함수 등도 포함가능

• length : 배열의 길이
• push : 배열 뒤에 요소를 추가
• pop : 배열 끝에 요소를 제거
• shift / unshift : 배열 제일 앞에 제거/추가

let days = ['mon','thu','wed'];
console.log(days);

👇🏻결과값

ex)2번째 요소를 찍었을때

let days = ['mon','thu','wed'];
console.log(days[1]);

👇🏻결과값

ex)2번째 요소를 바꿨을때

let days = ['mon','thu','wed'];
days[1] = '화요일'
console.log(days);

👇🏻결과값

ex)4번째에 목요일을 추가했을때

let days = ['mon','thu','wed'];
days.push('thu');
console.log(days);

✨ 반복문(for)

let days = ['mon','thu','wed'];
days.push('thu');
days.unshift('sun');

console.log(days);

for(let index = 0; index < days.length; index++){
  console.log(days[index]);
}

👇🏻결과값

✨ for.. of 사용(결과동일)

let days = ['mon','thu','wed'];

days.push('thu');
days.unshift('sun');

for(let day of days){
  console.log(day);
}