본문 바로가기

TIL✨

자바스크립트 문법 TIL(06)💪

이번주는 저번 주 미니 프로젝트를 끝내고 본격적인 강의를 듣고 공부하는 주가 시작됬다.😁

마침 오늘 시간표는 javascript로 도배 되어있었다...ㅎ 열심히 하자 

하루만에 몇강이였지... 급한거같기도하고? 짧지만 그렇타고 적지않은 분량을 들었던것 같다.

그래도 이렇게 다 듣고 다시 복습할 수 있는 시간을 가지고

부족한 부분을 스스로 자습하듯이 찾아보는것도 더 이득이 될 것같다.


저번부터 javascript class파트,객체,배열 부분이 어렵고 아직 이해 할 부분이 많이 남았다고 생각했는데 

아니나다를까 강의 중에서도 이 부분이 더 어려웠다ㅎ😂처음에는 쭉쭉 잘 듣다가 뒤에서 시간을 좀 잡아먹었다.

그래서 오늘 TIL은 객체,클래스 중심으로 기록해보려고한다.(내가 이해하기 쉬운 방향으로 기록한다)

더보기

객체란? 비슷한 속성을 가진 데이터(변수,함수)를 그룹핑해서 이름을 붙인 것

const computer = {
	name: 'Apple Macbook',
	price: 20000,
}
👇
const computer = {
	name: 'Apple Macbook',
	price: 20000,
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

computer.printInfo()

computer라는 그룹안에 그 컴퓨터의 속성을 넣을 수 있다 (= 이렇게 적은 것은 객체 리터럴이라고 함)

물론 여기에 함수도 넣을 수 있는데 그 때 우리는 그 함수(printInfo)를 메소드라고 부른다(Method)


❗하지만 이렇게 쓰면 내가 내용을 바꾸거나 추가를 할 때 마다 숫자를 일일히 다 추가하고 귀찮은 일이 많아지므로

   class , constructor를 쓴다. (class를 함수를 객체를 찍어내는 공장이라고 생각하면 편할듯)

class Notebook {
	constructor(name, price) {
		this.name = name
		this.price = price
	}
}

const notebook1 = new Notebook('MacBook', 2000000)

class 안에 생성자 constructor에 매개변수를 주고 this를 사용해서 class네임이 달라져도 바꿀 필요가 없이 항상 본인을 가르킬 수 있도록 했다.

그리고 나서 호출시 매개변수를 통해 들어갈 데이터들의 값만 입력해주면 쉽게 사용이 가능하다.

✅중요한건  new Notebook이다.

 => notebook1이라는 변수를 기존에 만든 Notebook객체의 데이터를 가진 새로운 객체로 생성을 한다고 생각하면 될 것같다.


 

🤔아직까지는 좀 헷갈리는게 더 많아서 실질적으로 쓰려면 내가 공부를 더 해보고 이것저것 만들어 봐야할 것같다..ㅎㅎ

 중간 중간에 공부하다가 구글링도 해보고 했는데 내가 모르는 세계🌐가 더 있는것 같고ㅋㅋㅋ 이정도면 겉핥기인것 같아서 

 좀 더 정확히 알고 있어야지 내가 헷갈리지 않을 것 같다. 공부합시다 공부!😎

▷ constructor, class ,new ,this 공부하기!!!!

 

 

  

 

 

 

 

 

 

'TIL✨' 카테고리의 다른 글

보자보자 어디보자..TIL(08)  (0) 2022.11.09
python....알고리즘....TIL(07)  (0) 2022.11.08
미니 프로젝트 완료🥰TIL(05)  (0) 2022.11.04
깃 공부를 미리미리 하자!...TIL(04)  (1) 2022.11.03
미니 프로젝트TIL (03)  (1) 2022.11.02