2021-12-03 TIL

디아·2021년 12월 3일

TIL

멋사FE스쿨1기

목록 보기

15/20

🦁 Day26

💻 오늘 배운 것

1. 데이터 타입

원시 타입 primitive type

number, string, null, boolean, undefined

객체 타입(참조 타입) reference type

값을 참조한다. 값이 저장되어 있는 주소를 바라본다.

2. 자바스크립트에서의 객체

자바스크립트는 객체지향 언어이다.
클래스 개념이 생기기 이전인 ES6 이전에는 new라는 키워드를 사용한 객체 지향 프로그래밍을 할 수 있었다.

자바스크립트에서의 객체는 두가지가 있다.

데이터 타입으로서의 객체 - key값, value값을 쌍으로 하는 자료형
클래스 인스턴스로서의 객체

// 클래스 인스턴스로서의 객체

'안녕하세요' // 리터럴 표현식. 리터럴이란 코드에 보여지는 그대로를 말한다.
	   // 자바스크립트 엔진이 보이는 그대로 문자열로 받아들인다.

new String('안녕하세요') // new 키워드를 사용한 객체 생성.

let str = new String('안녕하세요') // 생성자 함수를 통해 만듦.
// 생성자 함수를 통해서 만들어진 결과물을 인스턴스 라고 한다. 여기서 str이 인스턴스이다.
// 생성자 함수를 JS에서는 타입 생성자. 클래스를 타입이라고 부른다.
// 객체 = 인스턴스

myStr = 'hi';
console.log(myStr); // hi
		    // myStr를 선언한 적이 없는데도 값이 출력된다.
		    // 키워드가 없는 할당문은 앞에 var가 생략되어 선언된 것이다. 
                    // var,let,const 키워드를 쓰지 않아도 변수가 생성이 된다..!
                    // let, const는 생략할 수 없다!
	
'hello' // 객체, 인스턴스, 문자열, 리터럴, 유사배열객체
		// 객체라서 내장함수를 사용할 수 있는 것이다.
'hello'.length // 5

Object.getOwnPropertyDescriptors('hello'); // 'hello' 객체 자신의 속성에 대한 속성 설명자 반환

3. `this`

let myObj = {
    val1: 100,
    func1: function(){ console.log(this)}
                    // this는 함수를 호출한 객체를 말한다.
                    // this가 가리키는건 func1() 함수를 호출한 myObj이다.
}

myObj.func1(); // this



function aboutThis(){
	console.log(this);  // 여기서 this는 함수를 호출한 객체를 가리킨다. 여기서는 window이다.
}

aboutThis(); // Window {window: Window, self: Window, document: document, name: '', location: Location, …}
            // window 는 전역 객체이다. '전역'이란 어디서든 접근할 수 있는 공간을 의미한다. html문서의 전체 공간에 접근할 수 있는 최상위에 있는 객체.
            // window.aboutThis()와 같다. 즉, aboutThis()는 window 객체 안에 선언된 메소드,함수

4. 전역, 함수 스코프

// 전역 스코프
var val1 = 'hi'; // 전역변수. 수명 범위는 글로벌이다.
console.log(val2) // ReferenceError: myVal2 is not defined

function myFunc(){
  // 함수 스코프
  var val2 = "hello"; // 지역변수. 수명 범위는 함수 내부.
                      // 함수 내부는 폐쇄되어있다.
                        // return val2를 하지 않으면 함수 밖에서는 val2의 값을 절대 알 수 없다.
  
}

5. 클로저

폐쇄된 공간의 데이터에 접근하기 위한 테크닉
클로저 함수: 폐쇄된 공간에 접근할 권한을 가진 함수

function myFunction(){
  var val1 = "hello";
  return { getVal1 : function(){return val1} }
            // getVal1의 value값인 함수를 클로저 함수 라고 한다.
}

let result = myFunction(); 

result; // {getVal1: ƒ}

result.getVal1(); // 'hello'