자바스크립트의 기본 내장 객체

javascript-basic-grammer-07.md

개요

• javascript 재학습하면서 잊고 있던것, 긴가민가 했던것 재학습하면서 기록

기본 자료형과 객체의 메서드

• 기본 자료형의 속성이나 메서드르 사용하면 기본 자료형이 자동으로 일회용 객체로 변환됨
  • 자바스크립트 기본 자료형: 숫자, 문자열, 불
• 기본 자료형에는 속성과 메서드를 임의로 추가해서 사용할 수 없음
• 그러나, 기본 자료형을 Number 등으로 객체화 시킨 뒤에 Number 생성자 함수의 프로토타입에 메서드를 추가해 사용 가능함

var primitiveNumber = 273;
var objectNumber = new Number(273);

Number.prototype.method = function() {
  return "Method on Prototype";
}

var output = '';
output += primitiveNumber.method() + '\n';
output += objectNumber.method();
console.log("output: " + output);

// 출력
output: Method on Prototype
Method on Prototype

Object 객체

• Object 객체는 자바스크립트의 최상위 객체
• 자바스크립트의 모든 기본 내장 객체는 Object 객체를 기본으로 만들어짐
• 7가지의 메서드를 가짐

메서드 이름	설명
constructor()	객체의 생성자 함수를 나타냄
hasOwnProperty(name)	객체가 name 속성이 있는지 확인함
isPrototypeof(object)	객체 object의 프로토타입인지 검사
propertyIsEnumerable(name)	반복문으로 열거할 수 있는지 확인
toLocaleString()	객체를 호스트 환경에 맞는 언어의 문자열로 바꿈
toString()	객체를 문자열로 바꿈
valueOf()	객체의 값을 냄

• 자바스크립트는 객체를 문자열로 변환할 때 자동으로 toString() 메서드를 호출함
  • 재정의 하면 재정의한 toString() 호출됨
• Object 객체의 프로토타입에 속성 또는 메서드를 추가하면 모든 객체에서 활용할 수 있음

Object.prototype.test = function() {
  alert(this);
}
var number = 273;
number.test();

타입 검사

• Object 객체에 있는 constructor() 메서드는 객체의 생성자 함수를 의미하며, 자료형을 검사할 때 유용
• typeof로 자료형을 검사하면 문제 발생할 수 있는 요소가 존재

var primitiveNumber = 273;
var objectNumber = new Number(273);

var output = '';
// 출력 1. number
output += '1.' + typeof(primitiveNumber) + '\n';
// 출력 2. object
output += '2.' + typeof(objectNumber);
console.log("output: " + output);

• 이러한 두 대상을 같은 자료형으로 취급하고 싶을 때는 constructor() 메서드를 사용해야 함
  • 다른 자료형들도 마찬가지 임

var primitiveNumber = 273;
var objectNumber = new Number(273);

if (primitiveNumber.constructor == Number) {
  // true
  console.log("primitiveNumber.constructor: 숫자");
}
if (objectNumber.constructor == Number) {
  // true
  console.log("objectNumber.constructor: 숫자");
}

함수에도 속성과 메서드를 가지게할 수 있음

function Constructor() {}
Constructor.property = 273;
Constructor.method = function() {};
console.log(Constructor.property);

Math 객체는 자바스크립트의 기본 내장 객체중 유일하게 생성자 함수를 사용하지 않는 객체

HTML 5와 함께 출형한 자바스크립트 표준안을 ECMAScript 5라고 함

Array

• typeof로 Array 객체의 자료형을 확인하면 object 나오므로 constructor 메서드로 자료형 비교하는 방법을 써야함
• ECMAScript 5 환경이라면 Array.isArray()로 Array 객체이지 확인

// true
alert(Array.isArray([1, 2, 3]));
// false
alert(Array.isArray({}));
// false
alert(Array.isArray(1));

• forEach()
  • 배열 각각의 요소를 사용해 특정 함수를 for in 반복문처럼 실행
  • 매개변수로 함수를 넣음
  • 매개변수로 입력 함수에 배열으 요소와 관련된 정보를 넣어 반복
    • element: 현재 반복에서 배열의 요소
    • index: 현재 반복에서 요소의 인덱스
    • array: 현재 반복을 수행하는 배열 자체

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sum = 0;
var output = '';
array.forEach(function(element, index, array) {
  sum += element;
  output += index + ':' + element + ' => ' + sum + '\n';
});
console.log("output: " + output);

// 출력
output: 0:1 => 1
1:2 => 3
2:3 => 6
3:4 => 10
4:5 => 15
5:6 => 21
6:7 => 28
7:8 => 36
8:9 => 45
9:10 => 55

• map()
  • 기존의 배열에 특정 규칙을 적용해 새로운 배열을 생성
  • 배열의 각 요소를 변경해 새로운 배열을 리턴

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var output = array.map(function(element) {
  return element * element;
});

console.log("output: " + output);
// 출력
output: 1,4,9,16,25,36,49,64,81,100

• 조건 메서드
  • forEach() 와 같이 매개변수로 함수로 전달받고 매개변수 함수의 파라미터 또한 같음
  • 매개변수 함수는 불 자료형 값을 리턴해야함
  • filter()
    • 특정 조건을 만족하는 요소를 추출해 새로운 배열을 생성
  • every()
    • 배열의 요소가 특정 조건을 모두 만족하는지 확인
    • 배열의 모든 요소가 true를 리턴하면 true를 리턴함
  • some()
    • 배열의 요소가 특정 조건을 적어도 하나 만족하는지 확인
    • 배열의 요소중 적어도 하나 이상의 함수에서 true를 리턴하는 경우에 true를 리턴함
• 연산 메서드
  • reduce()
    • 배열의 요소가 하나가 될 때까지 요소를 왼쪽부터 두 개씩 묶는 함수를 실행
    • 초기값이 넘어간다는 의미에서 swift의 reduce랑 같음, 파라미터가 좀 다름
  • reduceRight()
    • 배열의 요소가 하나가 될 때까지 요소를 오른쪽부터 두 개씩 묶는 함수를 실행
    • 오른쪽 부터 하는것만

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var output = array.reduce(function(previousValue, currentValue, index, array) {
  return previousValue + currentValue;
});

console.log("output: " + output);

var output = array.reduceRight(function(previousValue, currentValue, index, array) {
  return previousValue + currentValue;
});

console.log("output: " + output);

• 화살표 함수를 이용한 Array
  • ECMAScript 6

var array = [{
  이름: 'a',
  국어: 80,
  수학: 70,
  영어: 60,
  과학: 95
},
{
  이름: 'b',
  국어: 10,
  수학: 20,
  영어: 30,
  과학: 45
}];

var filterA = array.filter((item) => item > 10);
// filterA: []
console.log("filterA: " + JSON.stringify(filterA));
var filterB = array.filter((item) => item.국어 > 10);
// filterB: [{"이름":"a","국어":80,"수학":70,"영어":60,"과학":95}]
console.log("filterB: " + JSON.stringify(filterB));

ECMAScript 5

String 객체

• trim()
  • 문자열 양쪽 끝의 공백을 제거
  • test -> test 됨

JSON 객체

• ECMAScript 5 부터는 정식으로 JSON 객체를 지원함
• JSON(JavaScript Object Notation)
• JSON.stringify()
  • 자바스크립트 객체를 JSON 문자열로 변환
  • 매개변수에 넣은 객체에 toJSON() 메서드가 없다면 객체 전체를 JSON으로 변환
  • 반면, toJSON() 메서드가 있다면 toJSON() 메서드에서 리턴한 객체를 JSON으로 변환
• JSON.parse()
  • JSON 문자열을 자바스크립트 객체로 변환

underscore 라이브러리

• 배열 정렬과 같은 기본적인 유틸리티 기능을 모아놓은 underscore 라이브러리를 사용하면 편리함
• 모든 웹 브라우져에서 작동함
• IE 8 이하의 웹 브라우져에서 ECMAScript 5에 추가된 메서드를 사용할 수 없을 때 보완하기 위한 목적으로도 활용 가능
• 모든 메서드가 비파괴적(nondestructive) 메서드임
  • 자기 자신을 변화시키지 않고 리턴만 하므로, 리턴을 활용해 코드를 구성해야 함