본문 바로가기

복습/Javascript

[Javascript] 객체지향 자바스크립트 [객체 part3, 내장객체]

# Function


* 함수는 실제로 객체다
* Function() 이라는 내장 생성자 함수가 존재

* Function() 생성자는 eval() 과 동일한 단점을 가지므로 피하는 것이 좋다

function sum(a, b){ // 함수 선언
return a + b;
}
console.log(sum(1, 2)) // 3

var sub = function(a, b){ // 함수 표현식
return a - b;
}
console.log(sub(2, 1)) // 1

var multi = new Function('a', 'b', 'return a * b'); // Function() 생성자 이용
console.log(multi(1, 2)); // 2

* Function() 생성자 함수에 대한 참조를 가진 constructor 속성이 존재

* 함수가 원하는 매개변수의 수를 가진 length 속성이 존재

function foo(a){
return a;
}
console.log(foo.constructor); // [Function: Function] 출력
console.log(foo.length); // 1 출력, 매개변수 1개

function fooo(a, b, c, d){
return a + b + c + d;
}
console.log(fooo.length);// 4 출력, 매개변수 4개

* prototype 속성 사용 ( prototype은 추가 포스팅 예정, 맛보기)

function 객체의 prototype 속성은 다른 객체를 가리킴

function 으로 생성된 모든 객체는 prototype 속성에 대한 참조를 유지


let hero = {
name : "heecheol",
say: function(){
return `My name is ${this.name}`;
}
};

function foo(){}
console.log(typeof foo.prototype); // object 출력, 본문이 없는 함수라도 prototype 속성이 생성
foo.prototype = hero; // foo의 prototype이 hero를 가리킴


let superHero = new foo();
console.log(superHero.name); // heecheol 출력
console.log(superHero.say()); // My name is heecheol 출력

console.log(Object); // [Function: Object] 출력, 모든 객체의 조상은 함수임

/*
앞서 말했듯이 함수도 실제로 객체이다
Function() 이라는 내장 생성자 함수가 존재하기 때문이다
Function 객체는 Function.prototype 을 상속받으며
Function.prototype은 수정될 수 없습니다
prototype은 추후에 다시 다루겠습니다
*/

* call()

* apply()


다른객체의 메서드를 빌려서 자신의 메서드인 것처럼 호출 가능

var me = {
name: "heecheol",
say: function(who){
return `Hello ${who}, I'm ${this.name}`;
}
}

console.log(me.say("man")); // Hello man, I'm heecheol

var you = { name: 'foo' }
console.log(me.say.call(you, 'heecheol')); // Hello heecheol, I'm foo

/*
객체 you는 say() 메서드를 자신의 메서드같이 사용 하고싶다
이때 call() 함수를 이용한다

call() 의 동작법
say() 함수 호출에 필요한 this값이 첫번째 매개변수로 전달
그뒤의 인수는, 그 객체의 필요한 인수들 전달

say()가 호출될 때 this값에 대한 참조가 you를 가리킨다
me.say.call(you, 'aa')
*/

// apply()함수는 call()함수와 동일하지만 다른 객체의 메서드로 전달할 모든 매개변수가 배열로 전달

console.log(me.say.apply(you, ['heecheol'])); // Hello heecheol, I'm foo

* call() 함수를 이용해 argument 객체를 배열로 만들기

function foo(){
return arguments;
}

console.log(foo(1,2,3));
/*
arguments는 배열같이 보이지만 객체이다
배열같이 보이는 이유는
length 속성
index 요소
이 두가지를 가지고 있기때문인데 배열이 아닌이유는
sort(), slice() 와같은 메서드를 포함하고있지않다, [].slice.call(arguments)에서 []는 배열임을 나타낸다

Array.prototype.call(arguments) 로도 사용 가능하다
call() 함수를 이용해 배열로 변환가능하다
*/

function newFoo(){
let arr = [].slice.call(arguments);
return arr.sort();
}
let myarr = newFoo(2, 3, 4, 1);
console.log(myarr);



# Boolean


* Boolean() 생성자

* Boolean() 함수를 new 없이 일반함수로 호출되면 부울이 아닌값을 부울로 변환한다 ( !! 이중부정 과 동일 )


var bool = new Boolean();
console.log(typeof bool); // object 출력, 객체다
console.log(bool.valueOf()); // false 출력 기본값이 false
console.log(typeof bool.valueOf()); // boolean 출력, false의 타입은 boolean타입


/*
빈문자열
null
undefined
숫자 0
숫자 NaN
부울 false
이 여섯가지를 제외하고는 모두 true
*/
console.log(Boolean("foo")); // true출력, 이중부정을 사용하는것과 같다, 객체는 true
console.log(Boolean("")); // false출력, 빈문자열은 false
console.log(Boolean({})); // true출력, 객체
console.log(Boolean(new Boolean(false))); // true 출력, new된 객체이므로 true


# Number


* 객체를 생성하는 constructor 함수 (new 연산자 사용)

* 어떤 값을 숫자로 변환하는 일반 함수

let n = Number('24'); // 문자열 '24'
console.log(n); // 24 출력, 숫자로 변환됨
console.log(typeof n); // number출력

let numObj = new Number('24'); // new연산자 사용
console.log(typeof numObj); // object 출력, 객체로 생성됨

console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
console.log(Number.POSITIVE_INFINITY)
console.log(Number.NEGATIVE_INFINITY)
console.log(Number.NaN)
/*
Number() 함수의 내장 속성들

1.7976931348623157e+308
5e-324
Infinity
-Infinity
NaN


*/


# String


* new 연산자를 사용하게되면 객체로 생성되어 Object 객체에서 상속된 메서드들을 사용가능하다

* 기본문자열은 객체가 아니므로 메서드나 속성이 없지만, 객체처럼 취급할 때마다 String 객체가 백그라운드에서 생성되고 파괴됨

* String() 에 객체를 전달하면 toString() 이 먼저 호출됨

let str = "hee";
console.log(typeof str) // string 출력

let obj = new String("hee");
console.log(typeof obj) // object 출력, 객체이다

console.log(str.length) // 3
console.log(obj.length) // 3 String 객체도 문자배열과 비슷하게 length를 가지고있다

console.log(obj.valueOf()) // hee 출력, Object를 상속된 메서드 사용가능
console.log(obj.toString()) // hee 출력

console.log("hello".length) // 5출력
console.log("hello"[0]) // h출력
console.log("hello"["hello".length - 1]) // o 출력

console.log(Boolean("")) // false출력, 빈문자열은 false
console.log(Boolean(new String(""))) // true출력, 빈문자열인 객체이므로 true
console.log(String(1)) // "1" 출력, Number(), Boolean()과 마찬가지로 new없이 사용하면 원시값으로 변환

console.log(String([1, 2, 3])) // 1, 2, 3
console.log(String([1, 2, 3]) === [1, 2, 3].toString()) // true 출력, toString() 이 선행작업됨


# Math


* 함수가 아니므로 new 를 사용해 객체를 생성하는데 사용할 수 없다

* 수학 연산의 기능들을 제공하는 내장 전역 객체이다

* Math 객체의 속성들은 상수이므로 변경 불가하며 모두 대문자로 존재


Math.PI : 상수 PI

Math.SQRT2 : 2의 제곱근

Math.E : 오일러(Euler)의 상수

Math.LN2 : 2의 자연 로그

Math.LN10 : 10의 자연로그

console.log(Math.PI)
console.log(Math.SQRT2)
console.log(Math.E)
console.log(Math.LN2)
console.log(Math.LN10)
/*
3.141592653589793
1.4142135623730951
2.718281828459045
0.6931471805599453
2.302585092994046
*/

* Math.random() : 난수 생성

random() 함수는 0과 1 사이의 숫자를 반환

두 값 사이의 숫자 공식

((max - min) * Math.random()) + min  

/*
정수 1과 6사이의 난수 얻기

정수만 얻고싶다면
다음 메서드중 하나를 사용

floor() : 내림
ceil() : 올림
round() : 반올림

*/
console.log(Math.round((5 * Math.random()) + 1)) // 1 과 6 사이의 난수 출력, 1포함, 6 포함


# Date


* 날짜 객체를 생성하는 생성자 함수

* 아무것도 전달하지 않으면 default 값인 오늘 날짜

* 날짜 같은 문자열

* 일, 월, 시간 등이 구별된 값

* 타임스탬프

var today = new Date();
console.log(today) // 2018-02-09T06:32:45.468Z 출력


# RegExp


* 정규표현식, 텍스트를 검색하고 조작

* 추후에 공부