11 자바스크립트의 변수의범위와 객체

---

변수의 범위

 

- 자바스크립트에서는 객체, 함수가 모두 변수(상수)이다.
- 변수의 범위는 변수가 접근할 수 있는 변수, 객체, 함수의 집합이다.

 

변수	설명
지역변수	- 함수 내에서 선언된 변수이다. - 지역 변수는 변수가 선언된 함수 내에서 유효하고 함수가 종료되면 메모리에서 사라진다.
전역변수	- 함수의 외부에서 선언된 변수 - 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹페이지가 닫혀야만 메모리에서 사라짐

 

 

[예시]

let global = 0;
function func1(x,y){
	console.log(global); //0
}

console.log(x); //undefined
console.log(y); //undefined

 

지역 변수	x, y
전역 변수	global

 

 

자바스크립트의 객체

 

자바스크립트의 기본 타입(data type)은 객체(object)이다.

 

객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다.

프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.

 

변수 -> 프로퍼티, 함수 -> 프로퍼티 메소드

 

 

객체의 생성

 

1. 리터럴 표기법

[문법]

const 객체명 = {
        프로퍼티명 : 값,
        프로퍼티명 : 값,
        ...
        
        프로퍼티메소드명 : function(){
            메소드 호출시 실행될 문장;
        }
    }   

 

[예시]

const cat = {
        name : "루루",
        age : 3,
        color : "Brown",
        weight : 3.5,

        sleep : function(){
            console.log('쿨쿨');
	}
}

 

 

2. 생성자를 이용한 객체 생성

- new 연산자를 사용하여 객체를 생성하고 초기화 할 수 있다.
- 이때 사용하는 생성자는 메소드이며, 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 한다.

 

[문법]

function 생성자명(매개변수1,매개변수2,..){
        프로퍼티명 = 값;
        ...
    }    
    
    const 객체명1 = new 생성자명(값1,값2,...);
    const 객체명2 = new 생성자명(값1,값2,...);
    ...

 

[예시]

function Cat(name, color){
	this.name = name;
	this.color = color;
    this.sleep = function(){
    return `${this.name}이(가) 잠을 잡니다.`
	}
}
const LuLu = new Dog('루루','갈색');
const LaLa = new Dog('라라','흰색');

 

 

3. 클래스를 이용한 객체 생성

 

[문법]

 const 클래스명 = class{
        constructor(매개변수1,매개변수2,...){
            프로퍼티명 = 값;
            ..
        }   
        메소드명(매개변수1, 매개변수2,...){

        }
        ...
    }
    
const 객체명 new 클래스명(값1,값2,...);

 

[예시]

 const Cat = class{
            constructor(name,age,color){
                this.name = name;
                this.age = age;
                this.color = color;
                this.family = '먼치킨';
            }
            play(){
                return `${this.name}가(이) 즐겁게 놉니다.`
            }
        }

const LaLa = new Dog('라라',3,'흰색');

 

 

객체의 프로퍼티 참조

 

[문법]

객체이름.프로퍼티이름
//OR
객체이름["프로퍼티이름"]

 

[예시]

const Cat = {
        name : "루루",
        age : 3,
        color : "Brown",
        weight : 3.5,
}

console.log(Cat.name);
console.log(Cat['name']);

 

 

객체의 프로퍼티 메소드 참조

 

[문법]

객체이름.메소드이름();

 

[예시]

const cat = {
        name : "루루",
        age : 3,
        color : "Brown",
        weight : 3.5,

        sleep : function(){
            console.log('쿨쿨');
	}
}

cat.sleep(); // 쿨쿨
cat.sleep; //ƒ play(){return `${this.name}가(이) 즐겁게 놉니다.`}

---

열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.

수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>