[JavaScript] JS 기초 마무리

📌 Object

접근

추가

삭제

프로퍼티 존재 여부 확인

 

Object method

method: 객체 property로 할당 된 함수

 

📌 this

function sayHello() {
  console.log(`Hello, I'm ${this.name}`);
  console.log(this);
}
let boy = {
  name: "Justin",
  sayHello,
};
let girl = {
  name: "Anna",
  sayHello,
};
boy.sayHello(); //Hello, I'm Justin
girl.sayHello(); //Hello, I'm Anna

console 확인

✅  화살표 함수와 this

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음 

화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴

let showHeight = () => {
  console.log(this.height);
  console.log(this);
};

const showName = () => {
  console.log(this.name);
  console.log(this);
};

const pororo = {
  name: "뽀로로",
  height: 70,
  weight: 50,
  gender: "None",
  showName,
  showHeight,
};
const rupy = {
  name: "루피",
  height: 50,
  showName,
  showHeight,
};
pororo.showName();
pororo.showHeight();
rupy.showName();
rupy.showHeight();

화살표함수의 상위인 브라우저 환경 window가 반환됨

 

📌 생성자 함수

중복값을 가지는 변수를 생성할 때 편리

function Fruits(name, price) {
  this.name = name;
  this.price = price;
  this.showPrice = function () {
    console.log(`${this.name}의 가격은 ${this.price}입니다.`);
  };
}
let orange = new Fruits("오렌지", 3000);
let dragonFruit = new Fruits("용과", 2500);
let banana = new Fruits("바나나", 2000);
let pineApple = new Fruits("파인애플", 5000);

orange.showPrice();
dragonFruit.showPrice();
banana.showPrice();
pineApple.showPrice();

주의,

• 생성자 함수명 첫글자 대문자 사용 
• function안에 , 가 아닌 ; 사용 
• new 연산자를 사용하여 호출