게임만들기 일찍 끝낼려했는데 게으른 탓에 블로그도 늦게 게임도 늦게 하고 있다..미쳤다 정마ㅣㄹ..😅
객체 (Object)
자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다.
객체는 키(key) : 값(value) 로 구성된 프로퍼티(속성).
객체 리터럴의 표현 방법 ✍️
var dog = { age : 7 , name : "도도" }프로퍼티 추가와 삭제
프로퍼티 추가 : 없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가된다.
코드예시 ✍️
var dog = { age : 7 , name : "도도" }
dog.breed = "말시츄";
console.log(dog); // object {age : 7 , name : "도도" , breed : "말시츄"}프로퍼티 삭제 : delete 연산자를 사용하면 프로퍼티를 삭제할 수 있습니다.
코드예시 ✍️
var dog = { age : 7 , name : "도도" , breed : "말시츄"}
delete dog.age;
console.log(dog); // object {name : "도도" , breed : "말시츄"}객체 참조타입
객체 타입의 값을 변수에 대입하면 그 변수에는 객체의 참조(메모리에서의 위치 정보)가 저장된다.
함수 기초
자바스크립트에서의 함수는 입력 받은 후에 함수 안의 프로그램에서 특정 작업을 수행.
함수의 입력 값을 인수라고 부르고 함수의 출력 값을 반환값이라고 부른다.
함수 정의
함수를 사용할땐 function 키워드를 사용
자바스크립트는 함수를 실행하는 것을 "함수를 호출한다"라고 한다.
🖐 잠깐! 🖐
객체에 함수를 넣어주는 경우 함수의 이름을 지어줄 필요가 없는경우 이름을 빼고 작성해도 된다.
그런 함수를 익명함수라고 지칭.
함수 선언식 표현 방법 ✍️
// 문자응용
function hello (name) {
console.log("안녕하세요 " + name + "블로그입니다")
}
hello(도희); // 안녕하세요 도희블로그입니다.
//숫자응용
function plus (a,b) {
console.log( a + b );
}
plus(100,100); // 200
name과 a,b는 인수
{} 안에 있는 코드는 함수가 실행하는 작업
함수명();은 함수를 호출시키는 작업
return
함수 안에서
return이 나오면 리턴이 나올때 함수를 종료 시킴.
return을 사용하는 경우는 조건을 판단해서 조건이 해당하면 함수를 종료시킬때 주로 사용한다.
리턴 사용법 ✍️
// 리턴예제1
// 조건에 맞으면 함수를 종료시키고,
// 조건에 맞지않으면 "a가 더 작다!"를 나타내라.
var a = 100;
function ex(){
if(a > 0){
return;
}
} console.log("a가 더 작다!");
ex(); // 함수가 종료됨
// 리턴예제2
// 리턴 값을 출력시켜라
function plus(){
return a+b; //리턴값
}
console.log(plus(100,200));첫번째 예제의 리턴은 조건문을 이용한 예제이고, 함수가 종료되는것을 보여주는 예제이다.
두번째 예제는 리턴값을 써준상태로 console.log()를 찍어주지 않으면 콘솔에 나타나는게 없지만,
값을 반환하는 기능도 있어서 console.log(plus(100,200)); 로 작성해주면 리턴값을 반환하면서
콘솔창에 나타나는 것을 확인할 수 있다.
메서드
프로퍼티안에 타입 값이 함수면, 그땐 프로퍼티를 메서드 라고 부른다.
this
this는 함수를 메서드로 가지고 있는 객체를 가리킨다.
자바스크립트에서 this는 실행되는 컨텍스트에 따라 값이 달라진다.
생성자 함수
생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.
생성자 함수가 아닌 일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작 할 수 있다는 것을 의미한다.
코드를 사용할때는 생성자 함수인것을 알 수 있게 첫문자는 대문자로 작성한다.
코드예시 ✍️
// 생성자 함수
function Person(name, gender) {
this.name = name;
this.gender = gender;
this.hello = function(){
console.log('안녕하세요! 저는 ' + this.name + "입니다!");
};
}
// 인스턴스의 생성
var person1 = new Person('박', 'male');
var person2 = new Person('김', 'female');
person1.hello(); // 안녕하세요! 저는 박입니다!
person2.hello(); // 안녕하세요! 저는 김입니다!객체 함수 들어가니까 이제 슬슬 다시 머리터지게따..ㅎ
참고한 영상은 1분코딩님 유튜브
자료는 모던 자바스크립트책과 사이트
