[자바스크립트 비기너] Object 오브젝트, Function 오브젝트, Global 오브젝트

인프런 자바스크립트 비기너 강좌

 

 

 

Object 오브젝트

 

오브젝트 구분

• 빌트인 오브젝트
• 네이티브 오브젝트
• 호스트 오브젝트

 

빌트인 오브젝트

• 사전에 만들어 놓은 오브젝트
• 빌트인 Number 오브젝트, 빌트인 String 오브젝트

 

네이티브 오브젝트

• JS 스펙에서 정의한 오브젝트
• 빌트인 오브젝트 포함
• JS 코드를 실행할 때 만드는 오브젝트
• 예: Argument 오브젝트

 

호스트 오브젝트

• 빌트인, 네이티브 오브젝트를 제외한 오브젝트
  • 예: window, DOM 오브젝트
• JS는 호스트 환경에서 브라우저의 모든 요소 기술을 연결하고 융합하며 이를 제어

/* querySelector()는 DOM 함수
*  DOM에서 제공하는 오브젝트를 호스트 오브젝트라고 부름
*  마치 JS 함수처럼 DOM 함수를 사용
*/

var node = document.querySelector("div");
log(node.nodeName);

// DIV

 

 

오브젝트와 인스턴스 구분

• 오브젝트
  • new 연산자를 사용하지 않고 빌트인 오브젝트로 만든 오브젝트를 지칭
• var abc = new Objcet(); var obj = {};
  • new 연산자를 사용한 abc는 인스턴스
  • 사용하지 않은 obj는 오브젝트

 

 

 

 

 

---

Object 인스턴스 생성, 프리미티브 값 구하기 

 

 

new Object()

• 인스턴스를 생성하여 반환
• 파라미터의 데이터 타입에 따라 생성할 인스턴스 결정
• 파라미터 값이 undefined, null이면 빈 Object 인스턴스 반환

var newNum = new Number(123);
web.log(typeof newNum); // new로 생성한 인스턴스 타입은 object
web.log(newNum + 100);

// object
// 223

var newObj = new Object(123);
web.log(typeof newObj);
web.log(newObj + 100); // 인스턴스 타입 object, 프리미티 값은 123 ==> Number 타입
					   // new Object()는 파라미터 값 타입이 Number 타입이면 Number 인스턴스 생성
                       // String 타입이면 String 인스턴스 생성

// object 
// 223


var newObj = new Object(); // undefined ==> 값을 갖지 않은 Object 인스턴스 생성
web.log(newObj);

// {}

 

 

 

Object()

• Object 인스턴스 생성
  • 파라미터는 {name: valeu} 형태

var obj = Object({name: "JS책"});
log(obj);

var emptyObj = Object(); // 파라미터를 작성하지 않으면 new Object()와 같음
log(emptyObj);

// {name: JS책}
// {}

 

 

 

Object 생성 방법

• var abe = {};
  • var abc = Object()와 같음
  • 즉, var abc = {}를 실행하면 Object 인스턴스가 생성됨
• {} 표기를 오브젝트 리터럴(Literal)이라고 부름

var obj = Object({name: "value"});
log(obj);
log(obj instanceof Object); // Object로 생성한 인스턴스이면 true 출력

// {name: value}
// true

var obj = {name: "value"}; // Object()와 Object 리터럴{} 모두 Object 인스턴스 생성
log(obj);
log(obj instanceof Object);

// {name: value}
// true

 

 

 

ValueOf()

• data 위치에 작성한 Object 인스턴스의 프리미티브 값 반환

var obj = {key: "value"};
log(obj.valueOf());

// {key: value}

---

 

 

 

빌트인 오브젝트 구조

• 오브젝트 이름 (Object, String, Number...)
• 오브젝트.prototype
  • 인스턴스 생성 가능 여부 기준
  • 프로퍼티를 연결하는 오브젝트
• 오브젝트.prototype.constructor
  • 오브젝트의 생성자
• 오브젝트.prototype.method
  • 메소드 이름과 함수 작성

 

 

 

함수와 메소드 연결

• 함수
  • 오브젝트에 연결
  • Object.create()
• 메소드
  • 오브젝트의 prototype에 연결
  • Object.prototype.toString()

 

 

 

함수와 메소드 호출

• 함수 호출 방법
  • Object.create();

log(Obejct.create); // Object에 create가 존재하므로 함수 출력
log(Object.prototype.create); // Object.prototype에 create가 존재하지 않으므로 undefined 출력

// function create() { [native code] }
// undefined

 

• 메소드 호출 방법
  • Object.prototype.toString();
  • 또는 인스턴스를 생성하여 호출

log(Object.prototype.toString); // Object.prototype에 toString이 존재하므로 함수 출력

// 인스턴스를 사용하여 메소드를 호출할 때는 prototype 작성하지 않음
// prototype에 연결된 메소드로 인스턴스를 생성하기 때문
var obj = {};
log(obj.toString); 

// function toString() { [native code] }
// function toString() { [native code] }

 

• 함수와 메소드를 구분해야 하는 이유
  • JS 코드 작성 방법이 다르기 때문
  • 함수는 파라미터에 값을 작성하고 메소드는 메소드 앞에 값을 작성

/* 
* 함수 앞에 배열로 값을 작성하면 Array 오브젝트의 함수가 호출되므로
* String 오브젝트의 함수를 호출하면서 파라미터에 값을 작성해야 함.
*/
log(String.fromCharCode(49, 65));

// 1A

 

 

 

 

 

---

프로퍼티 처리 메소드

 

 

hasOwnProperty()

• 인스턴스에 파라미터 이름이 존재하면 true 반환, 존재하지 않으면 false 반환
• 자신이 만든 것이 아니라 상속팓은 프로퍼티이면 false 반환

var obj = {value: 123};
var own = obj.hasOwnProperty("value");
log(own); // obj 인스턴스에 value 프로퍼티가 존재하며 직접 작성했으므로 true

// true

var obj = {value: undefined}; // undefined가 값이지만 false로 인식
var own = obj.hasOwnProperty("value"); // 하지만 값은 체크하지 않고 존재 여부만 체크하므로 true
log(own);

// true

/*
* hasOwnProperty()는 자신이 만든 것이 아니라 빌트인 Object 오브젝트에 있는 것
* {}를 실행하면 빌트인 Object 오브젝트의 prototype에 연결된 메소드를 사용하여 Object 인스턴스를 만드므로 
* 자신이 만든 것이 아님.
*/
var obj = {};
var own = obj.hasOwnProperty("hasOwnProperty");
log(own);

// false

 

 

 

propertyIsEnumerable()

• 오브젝트에서 프로퍼티를 열거할 수 있으면 true 반환, 없으면 false 반환

var obj = {sports: "축구"};
log(obj.propertyIsEnumerable("sports"));

// true

var obj = {sports: "축구"};
Object.defineProperty(obj, "sports", {
	enumerable: false // 열거 불가 설정
});

log(obj.propertyIsEnumerable("sports"));

for(var name in obj){ // for-in 문에서 프로퍼티가 열거되지 않음
	log(name);
}

// false

---

 

 

 

빌트인 Object 특징

• 인스턴스를 만들 수 있는 모든 빌트인 오브젝트의 __proto__에 Object.prototype의 6개 메소드가 설정됨
• 따라서 빌트인 오브젝트로 만든 인스턴스에도 설정됨

 

 

isPrototypeOf()

• 파라미터에 작성한 오브젝트에 object 위치에 작성한 prototype이 존재하면 true 반환, 존재하지 않으면 false 반환

var numObj = new Number(123);
log(Object.prototype.isPrototypeOf(numObj));

// true

 

 

toString()

• 인스턴스 타입을 문자열로 표시
• 오브젝트에 toString()이 있으면
  • toString()이 호출되고
  • 없으면 Object의 toString()이 호출됨

var point = {book: "책"};
log(point.toString());

var obj = new Number(123);
log(Object.prototype.toString.call(obj));

// [object Object] // object는 인스턴스, Object는 빌트인 Object 의미
// [object Number]

 

 

toLocaleString()

• 지역화 문자 변환 메소드 대체 호출
  • Array, Number, Date 오브젝트의 toLocalString() 메소드가 먼저 호출됨.

log(1234.56.toLocalString()); // Number.prototype.toLocalString() 메소드 호출됨
log("4567.89".toLocalString()); 
/* 
* "4567.89"는 String 타입이며 String.prototype.toLocalString()이 없으므로
* Object.prototype.toLocalStrig() 메소드가 호출됨.
* Object의 toLocalString()이 없으면 에러 발생 ==> 에러 발생 방지 위한 것
*/

// 1,234.56
// 4567.89

 

 

 

 

Function 오브젝트

 

 

new Function()

• Function 인스턴스 생성
• 파라미터에 문자열로 함수의 파라미터와 함수 코드 작성
  • var obj = new Function("book", "return book;");
  • obj("JS 책");
• 파라미터 수에 따라 인스턴스 생성 기준이 다름
  • 파라미터 2개 이상 작성
    • 마지막 파라미터에 함수에서 실행할 함수 코드 작성
    • 마지막을 제외한 파라미터에 이름 작성
  • 파라미터 하나 작성
    • 함수에서 실행할 함수 코드 작성
    • 파라미터가 없을 때 사용
  • 파라미터를 작성하지 않으면
    • 함수 코드가 없는 Function 인스턴스 생성

var obj = new Function("one, "two", "return one + two;");
log(obj(100,200));

// 300

var obj = new Function("return 1 + 2;"); 
log(obj());

// 3

 

 

Function()

• Function 인스턴스 생성
• 처리 방법과 파라미터 작성이 new Function()과 같음
• 단지 new 연산자를 사용하지 않은 것

 

 

함수 분류

• function 분류
  • 빌트인 Function 오브젝트
  • function 오브젝트
  • function 인스턴스 (new 연산자 사용)
• function 오브젝트 생성 방법
  • function 키워드 사용
  • function getBoot(title){return title};
• JS 엔진이 function 키워드를 만나면
  • 이름이 getBook인 function 오브젝트 생성

 

 

 

함수 생명 주기

• 함수 호출
  • getBook("JS북");
  • 함수를 호출하면서 파라미터 값을 넘겨 줌
• 함수 코드 실행
  • JS 엔진 컨트롤이 함수의 처음으로 이동
  • 파라미터 이름에 넘겨 받은 파라미터 값 매핑
  • 함수 코드 실행
  • return 작성에 관계없이 반환 값을 갖고 함수를 호출한 곳으로 돌아 감

function getBook(title){
	return title;
};
var result = getBook("JS북");
log(result);

// JS북

 

 

 

length 프로퍼티

• 함수의 파라미터 수가
  • 생성되는 function 오브젝트에 설정됨
  • 함수를 호출한 곳에서 보낸 파라미터 수가 아님
• JS 엔진이 자동으로 설정

function add(one, two){
	return one + two;
};
log(add.length);

// 2

add(1, 2, 3, 4);
log(add.length); // add() 함수를 호출한 곳에서 보낸 값의 수가 아님.

// 2

 

 

 

함수 형태

• 함수 선언문 (Function Declaration)
  • function getBook(book){코드}
• 함수 표현식 (Function Expression)
  • var getBook = function(book){코드}

 

 

함수 선언문

• function getBook(title){함수 코드} 형태
  • function 키워드, 함수 이름, 블록{}은 작성 필수
  • 파라미터, 함수 코드는 선택
• 함수 이름을 생성한 function 오브젝트의 이름으로 사용

function getBook(title){
	return title;
};
var result = getBook("JS책");
log(result);

// JS책

 

 

 

함수 표현식

• var getBook = function(title){코드}
  • function 오브젝트를 생성하여 변수에 할당
  • 변수 이름이 function 오브젝트 이름이 됨
• 식별자 위치의 함수 이름은 생략 가능
  • var name = function abc(){]에서 abc가 식별자 위치의 함수 이름

var getBook = function(title){
	return title;
};
var result = getBook("JS책");
log(result);

var getBook = function inside(value){
	if(value === 102){
    	return value;
	};
    log(value);
    return inside(value + 1);
};
getBook(100);

 

 

 

---

함수 호출

 

 

call()

• getTotal.call(this, 10, 20);
• 첫 번째 파라미터
  • 호출된 함수에서 this로 참조할 오브젝트
  • 일반적으로 this 사용. 다른 오브젝트 작성 가능

function getTotal(one, two){
	return one + two;
};
var result = getTotal.call(this, 10, 20); // 첫 번째 파라미터 this가 파라미터 값으로 넘어가지 않음
log(result);

// 30

var value = {one: 10, two: 20};
function getTotal(){
	return this.one + this.two;
};
var result = getTotal.call(value);
log(result);

// 30

 

 

 

apply()

• getTotal.appy(this, [10, 20]);
• 파라미터 수가 유동적일 때 사용. 두 번째 파라미터에 배열 사용.
• call(), apply() 부가적인 목적?
  • 첫 번째 파라미터에 호출된 함수에서 this로 참조할 오브젝트 사용

function gotTotal(one, two){
	return one + two;
};
var result = getTotal.apply(this, [10, 20]); 
log(result);

// 30

 

 

 

toString()

• 모든 빌트인 오브젝트에 toString() 있지만, 오브젝트마다 반환되는 형태가 다름
• function 오브젝트의 toString()은 함수 코드를 문자열로 반환

var getBook = function(){
	return 100 + 23;
};
var result = getBook.toString();
log(result);

// function(){ return 100 + 23; }

 

 

 

Argument 오브젝트

• 함수가 호출되어 함수 안으로 이동했을 때 arguments 이름으로 생성되는 오브젝트
• 함수를 호출한 곳에서 넘겨 준 값을 순서대로 저장
• 호출된 함수에 파라미터를 작성한 경우
  • 호출된 함수의 파라미터에도 값을 설정하고 argument 오브젝트에도 저ㅏㅇ
  • apply()와 argument 오브젝트
• 파라미터라고 부른 것은 argumnet 오브젝트와 구분하기 위한 것

/*
* 함수가 호출 받게 되면 함수 안에 arguments 이름을 가진 오브젝트를 생성
* arguments에 10, 20, 30 순서대로 설정
*/
function getTotal(one){
	return one + arguments[1] + arguments[2];
};
var result = getTotal(10, 20, 30);
log(result);


// 60

/*
* applu()의 두 번째 파라미터가 배열이며, 파라미터 값이 유동적
* 이때 arguments를 사용하여 유동적인 파라미터 수에 대응 가능
* e.g. checkbox로 선택받으면 선택한 수 유동적
*/
function getTotal(one){
	return one + arguments[1] + arguments[2];
};
var result = getTotal.apply(this, [10, 20, 30]);
log(result);

// 60

 

 

 

 

 

 

Global 오브젝트

 

 

Global 오브젝트 개요

• 모든 <script>를 통해 하나만 존재
  • new 연산자로 인스턴스 생성 불가
  • 모든 코드에서 공유
• 이름(Global)은 있지만
  • 오브젝트 실체가 없음
  • 오브젝트를 작성(사용)할 수 없음

 

 

 

Global 오브젝트 함수, 변수

• Global 오브젝트의 함수, 변수를 Global 함수, Global 변수라고 부름
• 함수 안에 작성한 것
  • 지역 함수, 로컬 함수라고 부름
  • 지역 변수, 로컬 변수라고 부름
• 전역 객체라고 부르기도 함

 

 

 

Global 프로퍼티

• Global 프로퍼티 종류
  • NaN: Not-a-Number
  • Infinity
  • undefined
• 상수 개념으로 사용
  • 외부에서 프로퍼티 값 변경 불가
• delete 연산자로 삭제 불가

 

 

 

Global과 window 관계

• 글로벌과 window 오브젝트 주체
  • 글로벌 오브젝트는 JS가 주체
  • window 오브젝트는 window가 주체
• 주체는 다르지만, 글로벌 오브젝트의 프로퍼티와 함수가 window 오브젝트에 설정됨
• Host 오브젝트 개념 활용

---

 

 

 

parseInt()

• 값을 정수로 변환하여 반환
• 값이 "123px"이면 123 반환 (이 용도로도 많이 사용)
• 0 또는 빈 문자열을 제외시킴
• 진수를 적용하여 값을 변환

log(parseInt("12AB34"));
log(parseInt("0012"));
log(parseInt("   123"));
log(parseInt()); // 값을 작성하지 않으면 NaN. undefined가 아닌 것은 기준이 Number이기 때문.
log(parseInt(13, 16)); // 13을 16진수로 변환
log(parseInt("0x13")); 

// 12
// 12
// 123
// NaN
// 19
// 19

 

 

parseFloat()

• 값을 실수로 변환하여 반환
  • JS는 기본적으로 실수로 처리하므로 실수로 변환하는 것은 의미가 없지만
  • 문자열의 실수 변환은 의미가 있음
• 지수, 공백 변환

log(parseFloat("12.34AB56"));
log(parseFloat("1.2e3"));

// 12.34
// 1200

 

 

isNaN()

• 값의 NaN 여부 반환
• 숫자 값이 아니면 true 반환
• 숫자 값이면 false 반환
  • 값이 숫자로 변환되면 숫자로 인식
• NaN === NaN 결과는 false
  • 설계 실수
  • ES6의 Object.is() 사용

log(isNaN()); // 파라미터를 작성하지 않으면 undefined와 같음
log(isNaN("123")); // String 타입이라도 값이 숫자이면 숫자로 인식
log(isNaN(null)); // null을 숫자로 변환하면 0
log(NaN === NaN);
log(Object.is(NaN, NaN));

// true
// false
// false
// false
// true

 

 

 

isFinite()

• 값이 Infinity, NaN이면 false 반환
  • finite이면 true 반환
• 값이 숫자로 변환되면 숫자로 인식

log(isFinite(0 / 0)); // NaN
log(isFinite(1 / 0)); // Infinity
log(isFinite("ABC")); // NaN
log(isFinit(123));
log(isFinite("123"));
log(isFinite(false)); // 0

// false
// false
// false
// true
// true
// true

---

 

 

 

encodeURI()

• URI를 인코딩(Encoding)하여 반환
  • Uniform Resource Identifier
  • 인코딩 제외 문제를 제외하고 "%16진수%16진수"형태로 변환
• 인코딩 제외 문자
  • 영문자, 숫자
  • # ; ? : @ & = + $ , - _ . ! ~ * ( ) 따옴표

var uri = "data?a=번&b=호";
log(encodeURI(uri));

// data?a=%EB%B2%88&b=%ED%98%B8

 

 

encodeURIComponent()

• URI를 인코딩하여 반환
  • " ; / ? : @ & = + 4 , " 를 인코딩하는 것이 encodeURI()와 다름
  • 인코딩 제외 문자를 제외하고 "%16진수 16진수" 형태로 변환
• 인코딩 제외 문자
  • 영문자, 숫자
  • # - _ . ! ~ * ( ) 따옴표

 

 

decodeURI()

• 인코딩을 디코딩(Decoding)하여 반환
• 파라미터에 encodeURI()로 인코딩한 문자열 작성

var uri = "data?a=%EB%B2%88&b=%ED%98%B8";
log(decodeURI(uri));

// data?a=번&b=호

 

 

decodeURIComponent()

• 인코딩을 디코딩하여 반환
• 파라미터에 encodeURIComponent()로 인코딩한 문자열 작성

---

 

eval()

• 파라미터의 문자열을 
  • JS 코드로 간주하여 실행
  • 실행 결과를 반환 값으로 사용
  • 값을 반환하지 않으면 undefined 반환
• 보안에 문제가 있다고 알려져 있음 ==> 사용 비권장

var result = eval("parseInt('-123.45')");
log(result);

// -123