JavaScript

Scope

• 변수의 유효 범위
• 함수 밖에 있는 변수를 참조할 수 있게 js에서 제공하는 일종의 통로

종류

• 전역 스코프(Global scope) : 코드 어디에서든지 참조할 수 있다.
• 지역 스코프(local scope / Function-level scope) : 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

변수

• 전역 변수(Global variable) : 전역에서 선언된 변수이며 어디에든 참조할 수 있다.
• 지역 변수(Local variable) : 지역(함수)내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

---

this

• this는 전역 객체인 window와 같다.
  - 전역 객체 : 자바스크립트의 모든 변수, 함수, 객체 등을 포함한 객체
• 어디에 위치해 있는가에 따라 바인딩되는 곳이 달라진다.(this가 가리키는 대상이 달라진다)

전역 공간에서의 this

console.dir(this);

→ dir : 객체의 세부 정보

함수 내부에서의 this

• 전역 객체는 앞에 window. 이 생략된 형태이다.(예시 : window.aaa();)

function aaa(){
    console.log(this);
}
aaa();

function bbb(){
    function ccc(){
        console.log(this);
    }
    ccc();
}
bbb();

---

Class

• 객체를 생성하기 위한 템플릿
• 클래스 명은 대문자로 시작한다.
• 메서드 : 클래스 내에 정의된 함수
• 인스턴스 : 클래스를 통해 생성된 객체
• new 키워드를 사용하여 클래스를 호출한다.
• constructor : 객체를 new로 생성할 때 가장 먼저 자동으로 호출된다.
• 객체의 소속인 메서드의 this는 그 객체를 가르킨다.(by생활코딩)

class Member {
	constructor(name){
		this.name = name;
	}
	getName() {
		return this.name;
	}
}

let memberObj = new Member("홍길동");
console.log(memberObj.getName()); //홍길동

멤버변수

• 클래스 내 어디서나 사용할 수 있는 변수
• 변경 가능한 상태값
• this로 접근한다.

class Member {
	constructor(name){
		this.memberName = name;
		//memberName이 멤버변수이다.
	}
	getName() {
		return this.memberName;
		//여기서 사용할 수 있다.
	}
}

let memberObj = new Member("홍길동");
console.log(memberObj.getName()); //홍길동

메서드

• 클래스 내에 정의된 함수
• function키워드를 사용하지 않는다.

class Price{
	constructor(price){
		this.price= price;
	}

	//메서드
	getDiscount(discount) {
		return this.price * discount;
	}
}

let myDiscount = new Price(3000);
console.log(myDiscount.getDiscount(0.1)); //300

---

Ghost Rain

HTML, CSS, JavaScript로 간단한 웹게임 만들기

• 2022.09.26 용사가 유령에 닿으면 유령 죽는 로직 완성 / 점수 기능 구현 / 게임 클리어 화면 구현
  GhostRain 깃허브 바로가기↗

GhostRain에 추가하고 싶은 기능은 너무 많은데 점수 기능 구현하는 부분에서 시간을 너무 많이 잡아먹었다..간단한거였는데 너무 복잡하게 생각했다..😥 게임 클리어 부분은 겨우 화면 정도만 구현한 정도라 공부를 더 열심히 해야할 것 같다😭