JAVASCRIPT STEP 29 - Hoisting, Object

★ 호이스팅, Hoisting

• 함수 호이스팅(*), 변수 호이스팅
• 코드를 실행하기 전, 변수 선언문과 함수 선언문은 해당 스코프의 최상단으로 끌어올려진다. > 코드를 재배치

//호출
m1();

//선언
function m1() {
    alert();
}

 

★ 객체, Object

• JavaScript에는 클래스가 없다. 하지만 내장 객체를 제공한다.
• 1. 내장 객체
  • Date, Array, Math, Object, Option 등..
  • new Date()
  • new Array()
• 2. BOM 객체
  • window, document, form, text, button 등..
  • BOM 트리 > 구성 요소들 ..
• 3. DOM 객체
  • element, attribute, text 등..
• 4. 사용자 정의 객체(***)
  • JavaScript에는 클래스가 없다 > 원하는 형태(구조)의 객체를 만들 수 있다.
  • ES6에서 클래스 문법이 만들어짐 > 진짜 class가 아니라, class처럼 흉내낸 문법을 도입
• 사용자 정의 객체 만드는 방법
  • 1. object 클래스 사용
  • 2. {}  : 객체 리터럴 표기법 사용

class User {
    public String name;
    public in age;
    public String address;
 }

 User hong = new User();

 hong.name = "홍길동";
 hong.age = 20;
 hong.address = "서울시 강남구";

• object 클래스 사용 ex)

const hong = new Object(); //빈 객체 

//Java의 HashMap과 유사
//JavaScript에서 객체에 프로퍼티를 추가하는 방법
hong.name = '홍길동';
hong.age = 20;

hong.address = '서울시 강남구';   //작성이 편함
hong['address'] = '서울시 강동구'; //작성이 불편함, 조작성 높음

let p = 'address';

console.log(hong.p);
console.log(hong[p]);

console.log(hong);

//hong과 동일한 구조를 가지는 다른 사람 1명 추가 생성하기

const lee = new Object();

lee.name = '이순신';
lee.age = 25;
lee.address = '서울시 동대문구';

console.log(lee);

//두 사람의 주소?
console.log(hong.address);
console.log(lee.address);

• 리터럴 표기법 사용 ex)

const you = {
    name : '유재석',
    age : 30,
    address : '서울시 은평구'
};// 객체 리터럴

you.email = 'you@gmail.com';

console.log(you);

• 실행 결과

실행 결과

• 중첩 리터럴

const address = {
    sido : '서울시',
    gugun : '강남구',
    dong : '역삼동'
};

const jo = {
    name : '조세호',
    age : 28,
    address : address
};

const yang = {
    name : '양세찬',
    age : 29,
    address : {
        sido : '서울시',
        gugun : '강남구',
        dong : '역삼동'
    }
};

console.log(yang.address.sido);