JavaScript - 호이스팅, 화살표 함수, 객체, 프로퍼티, 상속, 프로토타입
1. 호이스팅(hoisting)
- 자바스크립트의 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
- 자바스크립트의 인터프리터가 돌리기전에 한번 훑고 미리 올려넣을 거 올려넣은 다음에 코드실행하는 것을 의미
- var로 선언한 변수의 경우 호이스팅 시 undefiend로 변수를 초기화
- let과 const로 선업한 변수의 경우 호이스팅시 변수를 초기화하지 않음
1.1. 호이스팅 예시 - 선언형
func1() // 호이스팅이 실행전에 미리 함수를 메모리에 올려놓기때문에 이렇게 선언전에 먼저 사용해도 됨
function func1(){
....
}
인터프리팅 결과 (함수호이스팅)
function func1(){}
func1()
이 순서로 작성한 것과 동일1.2. 호이스팅 예시 - 표현형
func2() // 이런 애들은 호이스팅이 되지 않기때문에 선언전에 사용하면 에러가 남
let func2 = function(){
....
}
인터프리팅 결과 (변수 호이스팅) 호이스팅해도 변수만 선언되지 그 안의 function은 호이스팅 되지않음
let func2()
func2()
function func2(){}
2. 화살표 함수
- function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
- 화살표 함수는 항상 익명으로 만들어짐(1회성 사용 혹은 변수에 저장)
- 당연히 호이스팅 불가!!
2.1. 매개변수가 없을 경우
const 상수 = () => {
함수가 호출되었을때 실행할 문장 ,{}는 한줄일경우 생략가능
}
1.1 한 줄일 경우
const 상수 = () => 함수가 호출되었을때 실행할 문장2.2. 매개변수가 여러개일 경우
const 상수 = (매개변수1, 매개변수2, ..) => {
함수가 호출되었을때 실행할 문장 ,{}는 한줄일경우 생략가능
}
2.1 한 줄일 경우
const 상수 = (매개변수1, 매개변수2, ..) => 함수가 호출되었을때 실행할 문장2.3. 매개변수가 1개인 경우 (소괄호 생략경우)
const 상수 = 매개변수1 => {
함수가 호출되었을때 실행할 문장 ,{}는 한줄일경우 생략가능
}
3.1. 한 줄일 경우
const 상수 = 매개변수=> 함수가 호출되었을때 실행할 문장
3. 객체(Object)
- 하나의 주제를 가지고 관련있는 프로퍼티(property= 필드, 메소드 등등)를 가지고 있는 집합
4. 프로퍼티(property)
- 이름과 값으로 구성된 정렬되지 않은 집합
- 프로퍼티는 함수도 저장할 수 있음 -> 프로퍼티 메소드
5. 객체생성 방법 3가지
5.1. 리터럴 표기법(직접 대입하는 표기법, 재사용 불가능)
const 객체명 = {
프로퍼티명1:값1,
프로퍼티명2:값2
.....
프로퍼티명n:function(){ // 메서드 생성
프로퍼티가 호출되면 실행할 문장
}
}5.2. 생성자를 이용하는 객체를 만드는 방법 (재사용가능)
- 생성자 : 객체를 만드는 함수
function 생성자명(매개변수1, 매개변수2, ..){
this.프로퍼티명1 = 값1;
this.프로퍼티명2 = 값2;
this.프로퍼티명n:function(){ // 메서드 생성
프로퍼티가 호출되면 실행할 문장
}
}
const 객체명1 = new 생성자명(값1, 값2, ..);
const 객체명1 = new 생성자명(값1, 값2, ..);※ 생성자를 이용하여 객체를 만드는 것의 특징
- new 연산자를 사용하여 객체를 생성하고 초기화 가능
- 새롭게 생성되는 객체를 초기화하는 역할
- 같은 형태의 객체를 여러개 생성할 때 유리
5.3. 클래스 이용(클래스 이용해도 결국에서는 생성자로 바뀜)
- ECMA script6에 추가된 객체 생성 방법
- 내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동
const 클래스명 = class {
constructor(매개변수1,매개변수2,..){
this.프로퍼티명1 = 값1
this.프로퍼티명2 = 값2;
...
}
메소드명(매개변수1,매개변수2){
메소드가 호출되면 실행할 문장
}
}
const 객체명1 = new 클래스명(값1, 값2, ..)
const 객체명2 = new 클래스명(값1, 값2, ..)
6. 상속
- 클래스 기반의 객체지향 언어와는 다름
- 자바스크립트는 프로토타입 기반의 객체지향 언어
7. 프로토타입(prototype)
- 모든 객체는 프로토타입이라는 객체를 가지고 있음
- 모든 객체는 프로토타입으로 부터 프로퍼티와 프로파티 메소드를 상속받음
- 모든 객체는 최소한 하나이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 미리 만들어진 형태를 프로토타입이라고 함
const PPomi() - new Dog() // Dog.prototype 생성 -> PPomi에 Dog.prototype와 Object.prototype(기본적프로토타입) 상속<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>프로토타입</title>
</head>
<body>
<h2>프로토타입</h2>
<script>
function Dog(color,name, age){
this.color = color
this.name = name
this.age = age
}
const Rucy = new Dog('white','Rucy',14)
console.log(`이름: ${Rucy.name}`)
console.log(`색상: ${Rucy.color}`)
console.log(`나이: ${Rucy.age}`)
Rucy.family = '포메라니안'
Rucy.getFamily = function(){
return this.family
}
console.log(`종: ${Rucy.family}`)
console.log(`getFamily: ${Rucy.getFamily()}`)
console.log('--------------------------')
const PPomi = new Dog('white','PPomi',6)
console.log(`이름: ${PPomi.name}`)
console.log(`색상: ${PPomi.color}`)
console.log(`나이: ${PPomi.age}`)
// 뽀미에겐 추가하지 않았으니 에러남
// console.log(`종: ${PPomi.family}`)
// console.log(`getFamily: ${PPomi.getFamily()}`)
// 생성자 프로토타입(상속해주는 프로토타입)에 프로퍼티와 프로퍼티메서드 추가
Dog.prototype.owner = '김사과'
Dog.prototype.run = function(){
return this.name + '달립니다.'
}
// 프로토타입의 객체가 달라졌으니 모두 적용된다 호이스팅이 되어 적용됨으로 나중에 추가한애가 먼저 코드가 작성된 애인 rucy와 ppomi에게 영향을 준다
console.log(`소유자 : ${Rucy.owner}`)
console.log(`run : ${Rucy.run()}`)
console.log(`소유자 : ${PPomi.owner}`)
console.log(`run : ${PPomi.run()}`)
</script>
</body>
</html>