/* querySelector()는 DOM 함수
* DOM에서 제공하는 오브젝트를 호스트 오브젝트라고 부름
* 마치 JS 함수처럼 DOM 함수를 사용
*/
var node = document.querySelector("div");
log(node.nodeName);
// DIV
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);
// {}
var obj = Object({name: "JS책"});
log(obj);
var emptyObj = Object(); // 파라미터를 작성하지 않으면 new Object()와 같음
log(emptyObj);
// {name: JS책}
// {}
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
var obj = {key: "value"};
log(obj.valueOf());
// {key: value}
log(Obejct.create); // Object에 create가 존재하므로 함수 출력
log(Object.prototype.create); // Object.prototype에 create가 존재하지 않으므로 undefined 출력
// function create() { [native code] }
// undefined
log(Object.prototype.toString); // Object.prototype에 toString이 존재하므로 함수 출력
// 인스턴스를 사용하여 메소드를 호출할 때는 prototype 작성하지 않음
// prototype에 연결된 메소드로 인스턴스를 생성하기 때문
var obj = {};
log(obj.toString);
// function toString() { [native code] }
// function toString() { [native code] }
/*
* 함수 앞에 배열로 값을 작성하면 Array 오브젝트의 함수가 호출되므로
* String 오브젝트의 함수를 호출하면서 파라미터에 값을 작성해야 함.
*/
log(String.fromCharCode(49, 65));
// 1A
프로퍼티 처리 메소드
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
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
var numObj = new Number(123);
log(Object.prototype.isPrototypeOf(numObj));
// true
var point = {book: "책"};
log(point.toString());
var obj = new Number(123);
log(Object.prototype.toString.call(obj));
// [object Object] // object는 인스턴스, Object는 빌트인 Object 의미
// [object Number]
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
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 getBook(title){
return title;
};
var result = getBook("JS북");
log(result);
// JS북
function add(one, two){
return one + two;
};
log(add.length);
// 2
add(1, 2, 3, 4);
log(add.length); // add() 함수를 호출한 곳에서 보낸 값의 수가 아님.
// 2
function getBook(title){
return title;
};
var result = getBook("JS책");
log(result);
// JS책
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);
함수 호출
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
function gotTotal(one, two){
return one + two;
};
var result = getTotal.apply(this, [10, 20]);
log(result);
// 30
var getBook = function(){
return 100 + 23;
};
var result = getBook.toString();
log(result);
// function(){ return 100 + 23; }
/*
* 함수가 호출 받게 되면 함수 안에 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
<script>
를 통해 하나만 존재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
log(parseFloat("12.34AB56"));
log(parseFloat("1.2e3"));
// 12.34
// 1200
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
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
var uri = "data?a=번&b=호";
log(encodeURI(uri));
// data?a=%EB%B2%88&b=%ED%98%B8
var uri = "data?a=%EB%B2%88&b=%ED%98%B8";
log(decodeURI(uri));
// data?a=번&b=호
var result = eval("parseInt('-123.45')");
log(result);
// -123