5. 자바스크립트 - 참조타입

이번 포스트에서 알아볼 참조타입들

원시타입이 아닌 참조 타입은 여러 종류가 있습니다.
이번 포스트는 각종 참조 타입의 설명과 참조 타입별로 지원하는 메서드를 정리해놓은 포스트입니다.
포스트를 시작하겠습니다.

참조 값(객체)이란

특정 ‘참조 타입’의 인스턴스 입니다.
참조 타입을 ‘클래스’라 부르는데 이는 잘못된 표현입니다.
비슷하긴 하지만 다른 개념이며, 참조 타입은 객체가 가져야 할 프로퍼티와 메서드를 정의한다는 점 때문에 객체 정의 라고 불리기도 합니다.
객체를 생성할 떄는 new 연산자를 사용합니다.

var person = new Object();

이 코드는 Object에 기본 프로퍼티와 메서드만 가진 단순한 객체를 생성합니다.

Object 타입

Object는 많은 기능이 들어있지 않지만 데이터 저장및 전송에 안성맞춤인 타입입니다.
그런 이유로 많이 사용되고 있습니다.
아래와 같은 두가지 방식으로 사용 할 수 있습니다.

//1. new로 생성
var person = new Object();
person.name = "kendrick";
person.age = 28;

//2. 객체 리터럴 표기법 생성
var person = {
     name : "kendrick",
     age : 28
}

//ex) 두가지를 섞어서
var person = {};     // new Object와 동일
person["name"] = "kendrick";      //점표기법 대신 대괄호 표기법 사용

1번처럼 new로 Object를 생성하여 프로퍼티를 추가 할 수도 있고
2번처럼 객체 리터럴 표기법(여러 가지 프로퍼티를 가진 객체를 쉽게 정의할 수 있도록 디자인된 표기법)을 사용 할 수도 있습니다.
ex)와 같이 섞어서 사용 할 수도 있습니다.
ex)는 프로퍼티 생성에 점표기법 대신 대괄호 표기법을 사용했습니다.

대괄호 표기법의 경우 프로퍼티 이름에 공백이 있거나 변수를 사용 할 수 있습니다.
일반적으로 점 표기법이 더 좋으며 대괄호 표기법은 프로퍼티 이름에 변수가 필요할때 쓰길 권합니다.

Array 타입

ECMAScript의 배열은 다른 프로그래밍 언어의 배열과 매우 다릅니다.
데이터의 순서 있는 목록이라는 점은 같으나, 자바스크립트는 타입의 구애를 받지 않습니다.
즉 배열 첫 슬롯은 문자열, 두 번째 슬롯은 숫자, 세 번째는 객체 등으로 데이터를 넣을 수 있습니다.
또한 배열이 동적으로 크기를 조절합니다. 데이터를 추가 하면 자동으로 커집니다.

//1. new를 이용한 생성
var colors1 = new Array();          //빈 배열을 생성
var colors2 = new Array(20);     //길이가 20인 배열을 생성
var colors3 = new Array("red", "blue", "gray");     //괄호 안 3개의 데이터를 가진 배열을 생성

//2. 배열 리터럴 표기법
var colors1 = ["red", "blue", "gray"];     // 문자열이 세 개 있는 배열 생성
var colors2 = [];     //빈 배열 생성

배열에 대한 접근은 대괄호 안에 0으로 시작하는 index를 넣으면 됩니다.

var colors = ["red", "blue", "green"];
alert(colors[0]);     // 첫 번째 데이터를 표시합니다.
colors[2] = "black";     // 세 번째 데이터를 변경 합니다.
colors[3] = "gray"; //네 번째 데이터를 추가 합니다

배열의 개수를 확인 할 수 있는 length 프로퍼티를 사용 할 수 있습니다.

var colors = ["red", "blue", "green"];
alert(colors.length);     // 3 출력

//length임의 변경
colors.length = 2; //크기가 2로 됩니다.
alert(colors[2]); //undefined

length프로퍼티 값을 변경 시 위와 같이 배열의 길이가 변하며, 빈 슬롯은 undefined로 채워집니다.

배열 감지

객체인지 배열인지 어떻게 확인 할까요
일반적으로 아래와 같이 확인 할 것입니다.

if (value instanceof Array){
     //코드
}

허나 instanceof는 다른 곳에서 전달받은 배열의 경우 다른 생성자 함수를 가지기 때문에 정확히 판별이 되지 않는 문제가 있습니다.
그런 문제를 우회하기 위해서 Array.isArray() 메서드를 제공하고 있습니다.
아래와 같이 사용할 수 있습니다.

if (Array.isArray(value)){
     //코드
}

이런 좋은 점이 있지만 브라우저 버전이 낮다면 사용할 수 없는 단점이 존재합니다.
ie9이상, 파폭 4이상, 사파리 5이상, 오페라 10.5 이상, 크롬은 모든버전에서 메서드를 지원하므로, 지원하지 않는 브라우저는 유의하시기 바랍니다.

변환 메서드

객체에는 모두 toLocaleString(), toString(), valueOf() 메서드가 존재합니다.

var colors = ["red","blue","green"];
alert(colors.toString());    // red,blue,green
alert(colors.valueOf());     // red,blue,green
alert(colors);                     // red,blue,green

toString과 valueOf는 동일한 값을 반환합니다.
배열의 각 값을 쉼표로 구분한 문자열을 반환합니다.

join메서드를 통해서 배열의 구분자를 변경할 수도 있습니다.

var colors = ["red","blue","green"];
alert(colors.join(','));     // red,green,blue
alert(colors.join('||'));    // red||green||blue

join메서드는 구분자가 될 문자열을 받고 배열 데이터를 모두 포함한 문자열을 반환합니다.
매개변수를 넘기지 않을 경우의 구분자는 쉼표로 사용합니다.

스택 메서드

자바스크립트의 배열은 몇가지 메서드를 이용하여 LIFO(last in first out)나 FIFO(first in first out)등을 구현 할 수 있습니다.
스택처럼 동작하는 함수의 예제를 보겠습니다
push()를 이용하여 배열 맨 뒤에 삽입을 하고
pop()을 이용하여 배열 맨뒤에 데이터를 꺼낼 수 있습니다.(배열에서 제거)

var colors = new Array();
var count = colors.push("red","green")     //데이터 2개 추가
alert(count); // 2

var item = colors.pop();
alert(item); // "green"
alert(colors.length) // 1

위 예제와 같이 push()와 pop()을 이용해서 LIFO 자료구조를 사용 할 수 있습니다.

큐 메서드

위에서 스택 메서드를 이용하여 LIFO로 제한하였다면 이번에는 큐 즉 FIFO를 구현해 봅시다.

배열 메서드 중에는 shift() 메서드가 있습니다. 이 메서드는 배열의 첫 번째 데이터를 꺼내서 반환하며 배열 길이는 1만큼 줄어 듭니다.
push()와 shift()를 사용하면 큐처럼 동작하게 만들 수 있습니다.

var colors = new Array();
var count = colors.push("red","green")     //데이터 2개 추가
alert(count); // 2

var item = colors.shift();
alert(item); // "red"
alert(colors.length) // 1

의문이 생기네요, 배열 맨뒤에 추가 삭제가 가능한 push와 pop이 있었습니다.
맨앞에 데이터를 제거하는 shift도 있었습니다. 그렇다면 맨앞에 데이터를 넣어주는 메서드가 빠진거 같네요..
그게 바로 unshift입니다. 배열 맨 앞에 데이터를 추가해 줍니다.

var colors = new Array();
var count = colors.push("red","green")     //데이터 2개 추가
alert(count); // 2

var item = colors.unshift('black');
alert(colors); // black,red,green
alert(colors.length) // 3

위에서 배운 4가지 메서드를 이해해 두면 나중에 많은 도움이 될 것입니다.

정렬 메서드

배열 순서를 조작해주는 메서드도 존재합니다.
reverse()와 sort()입니다. 이름도 직관적이라서 바로 이해가 되네요 바로 예제를 봅시다.

//reverse
var values = [1,2,3,4,5];
values.reverse();
alert(values); // 5,4,3,2,1

//sort
var values2 = [3,2,4,1,5];
values2.sort();

alert(values2); // 1,2,3,4,5

예상한 대로입니다.
하지만 reverse는 유연성이 없기 때문에 저정도만 알면 사용하는데 무리가 없지만 sort는 비교함수 등을 넘겨서 순서를 조절 하거나 할 수 있습니다. 즉 자유롭게 사용 할 수 있습니다.

비교함수는 매개변수 두 개를 받아서 첫번째 매개변수가 두번째 매개변수보다 앞에 있어야 한다면 음수를, 같다면 0을, 뒤에있어야 한다면 양수를 반환합니다.
아래 예제를 봅시다.

function compare(value1, value2) {
     if (value1 < value2){
          return 1;
     } else if (value1 > value2){
          return -1;
     } else {
          return 0;
     }
}
var values = [0, 1, 10, 4, 2];
values.sort(compare);
alert(values); // 10, 4, 2, 1, 0

비교 함수에서 큰값이 첫 번째에 오도록 역순으로 정리되게 하였습니다.
작은값이 첫 번째로 오도록 하려면 return 1과 return -1을 바꿔주면 되겠죠?
중간에 if(value1 == 4) { return 1; } 과 같은 코드를 넣어서 4가 무조건 앞으로 나오게 할 수도 있습니다.
비교함수 구현에 따라서 원하는 정렬을 생성 할 수 있습니다.

숫자 타입이나 Date객체처럼 valueOf() 메서드를 호출하면 숫자형 값을 반환하는 객체에서는 비교함수를 더 단순하게 만들 수 있습니다. 아래 예제를 봅시다.

function compare(value1, value2){
     return value2 - value1;
}

참 쉽죠? 비교 함수의 역할은 음수, 양수, 0 중에 하나를 반환하는 것이므로 첫번째 매개 변수에서 두 번째 매개 변수를 빼기만해도 정상적으로 동작 합니다.

조작 메서드

배열에 데이터를 조작하는 메서드를 알아봅시다.

1. concat()
   concat() 메서드는 현재 배열 데이터를 기반으로 새로운 배열을 만듭니다.
   concat() 메서드에 매개변수를 추가하면 복사할 배열에 매개변수를 합친 배열을 생성합니다.

   var values = [1, 2, 3, 4, 5, 6];
   var values2 = values.concat(7, [8, 9]);
   console.log(values2);     //[1,2,3,4,5,6,7,8,9]
   

   매개변수를 추가 했습니다.
   값 7과 배열 8, 9를 매개변수로 넘겼습니다.
   값으로 여러 매개변수를 넘겨도 되며, 배열로 넘겨도 된다는 것을 확인 할 수 있습니다.

2. slice()
   이 메서드는 배열에 포함된 데이터 일부를 가진 새 배열을 만듭니다.
   매개변수는 두개를 받으며, 각 매개변수는 원래 배열에서 가져올 데이터 범위의 시작과 끝입니다.
   매개변수를 하나만 넘길 경우 해당 인덱스에서 끝까지 입니다.

var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1, 4);

alert(colors2);     // green,blue,yellow,purple
alert(colors3);     // green,blue,yellow

인덱스는 0부터 시작하므로 slice(1)의 경우 red부터 끝까지, slice(1, 4)의 경우 red부터 yellow까지 입니다.

1. splice()
   이 메서드의 목적은 중간에 데이터를 삽입하는 것인데, 이 메서드는 세 가지 방법으로 사용합니다.
   삭제, 삽입, 대체
   첫번째, 두번째 매개변수는 인덱스의 시작과 끝이며, 그 뒤에 매개변수는 추가,대체 할 데이터를 넣어주면 됩니다. 안넣을 경우 삭제와 같이 이용할 수 있습니다
   예제를 봅시다

//삭제
var colors = ["red", "green", "blue"];
var removed = colors.splice(0, 1);     //첫번쨰 데이터 제거
console.log(colors);     // green,blue
console.log(removed);//red

//삽입
removed = colors.splice(1, 0, "yellow", "orange");//인덱스에 1에 데이터 2개 추가
console.log(colors);     //green,yellow,orange,blue
console.log(removed);//빈배열

//대체
removed = colors.splice(1, 1, "red", "purple");     //데이터 2개 추가 1개 제거
console.log(colors);     // green,red,purple,orange,blue
console.log(removed);// yellow

위치 메서드

indexOf()와 lastIndexOf()가 있습니다.
매개변수는 두개를 사용하며, 첫 번째 매개변수는 검색 할 데이터, 두번째 매개변수는 검색을 시작할 인덱스 입니다.
데이터를 찾지 못했다면 -1를 반환합니다.

var numbers = [1,2,3,4,5,2,4,3,1];

console.log(numbers.indexOf(4));          //3

console.log(numbers.lastIndexOf(4));    //6

console.log(numbers.indexOf(4, 4));          //6

console.log(numbers.lastIndexOf(4, 4));    //3

이런 방법으로 배열에서 특정 데이터의 위치를 쉽게 찾을 수 있습니다.

반복 메서드

ECMAScript 5 에서는 배열에 다섯가지 반복 메서드를 추가 했습니다.
이들은 모두 매개변수를 두개 받으며 하나는 배열에 각 데이터에서 실행할 함수, 다른 하나는 함수를 실행할 스코프 객체입니다.
콜백함수는 모두 데이터, 데이터의 인덱스, 배열 자체의 세 가지 매개변수를 받습니다.
콜백 함수를 실행 했을 때 메서드의 반환값에 어떤 영항을 미치는 지는 메서드에 따라서 다릅니다.

• every() : 배열의 모든 데이터에서 콜백 함수를 호출, 반환 값이 전부 true이면 true를 반환
• filter() : 배열의 모든 데이터에서 콜백 함수를 호출, 반환값이 true인 데이터를 새 배열에 저장하여 반환.
• forEach() : 배열의 모든 데이터에서 콜백 함수를 호출, 이 메서드는 반환값이 없음
• map() : 배열의 모든 데이터에서 콜백 함수를 호출, 그 결과를 새 배열에 저장하여 반환.
• some() : 배열의 모든 데이터에서 콜백 함수를 호출, 반환 값 중 하나라도 true이면 true반환.

이들은 원래 배열에 데이터를 바꾸지는 않으며, every, some메서드는 원래 배열의 데이터를 특정 조건에 따라서 쿼리한다는 점이 비슷합니다.

var numbers = [1,2,3,4,5,2,23];

//every
var everyResult = numbers.every(function(item, index, array){
     return (item > 2);
});

console.log(everyResult);     //true

//some
var someResult = numbers.some(function(item, index, array){
     return (item > 2);
});
console.log(someResult);     //true

//filter

var filterResult = numbers.filter(function(item, index, array){
     return (item > 2);

});
console.log(filterResult);     // [3, 4, 5, 23]

//map
var mapResult = numbers.map(function(item, index, array){
     return item * 2

});
console.log(mapResult);     // [2, 4, 6, 8, 10, 4, 46]

//forEach
numbers.forEach(function(item, index, array){
     //코드
});

감소 메서드

ECMAScript 5에서는 배열의 감소메서드가 도입되었습니다.
reduce(), reduceRight()입니다.
두 메서드 모드 배열을 순회하며 콜백 함수를 실행하고 값을 하나 만들어 반환합니다.
reduce()메서드는 이 작업을 배열의 첫 번째 데이터에서 시작하여 마지막 까진 진행합니다.
reduceRight()는 반대로 배열의 마지막에 데이터에서 시작하여 첫 번째까지 진행합니다.

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
     return prev + cur;
});
alert(sum); //15

처음 실행시 prev는 1 cur은 2입니다.
두번째 실행할때는 prev는 3( 1 + 2 )이고 cur은 3입니다 이런 식으로 배열의 모든 데이터를 순회한 다음 최종 결과를 반환합니다.
reduceRight()메서드도 같은 방식으로 동작 및 사용 하며 단지 방향만 반대입니다.

Date 타입

Date타입은 자바 초기 버전의 java.util.Date에 기반합니다.
즉 1970년 1월 1일 자정부터 몇 밀리초가 지났는지 나타내는 숫자를 사용합니다.

날짜 객체 생성은 다음과 같은 new 연산자를 이용해서 합니다.

var now = new Date()

매개변수를 넘기지않고 위와같이 생성 할 경우 현재 날짜와 시간이 저장됩니다.
특정 날짜와 시간을 저장하고 싶을 경우 해당 시각의 밀리초를 넘겨주면 됩니다.
이때 밀리초 계산을 하기는 힘드므로 Date.parse()와 Date.UTC()를 사용합니다.

var someDate = new Date(Date.parse("May 25, 2004"));

Date.parse()에 넘긴 문자열이 올바른 형식이 아닐 경우 NaN을 반환합니다.
Date 생성자는 문자열을 넘겨받으면 이면에서 Date.parse()를 호출 합니다. 즉 다음 코드는 이전 예제와 동일합니다.

var someDate = new Date("May 25, 2004");

ECMAScript5에서는 now()메서드가 추가되었습니다.
이 메서드는 현재 시간을 밀리초 표현으로 반환합니다.

var start = Date.now();

만약 Date.now()를 지원하지 않는 브라우저의 경우 아래와 같이 + 연산자를 써서 Date객체를 숫자로 변환하여 같은 방법으로 활용하시면 됩니다.

var start = +new Date();

상속된 메서드

Date 타입 역시 toString(), toLocaleString(), valueOf()메서드를 오버라이드 하지만.. 이들 메서드는 조금 다른 값을 반환합니다.
toLocaleString()은 날짜와 시간형식을 브라우저가 실행중인 지역의 관습에 맞게 바꾸며,
toString()의 경우 일반적으로 날짜와 시간에 타임존 정보를 포함하며 시간은 24시간 형식으로 표시합니다.
허나 브라우저에 따라서 각 메서드가 반환하는 형식이 상당한 차이가 있기 때문에 toLocaleString이나 toString은 디버그 목적으로나 쓰지 사용자에게 보이는 화면에서 저 메서드를 사용할 일은 대부분 없습니다.
valueOf의 경우는 밀리초가 반환됩니다. 비교 연산자가 정확히 작동하도록 하기 위해서 입니다.

날짜 표시 메서드

아래 메서드의 정확한 형식은 브라우저에 따라 다르긴하지만 일반적으로 아래와 같습니다.

• toDateString() : 날짜를 요일, 월, 일, 년 형식으로 표시
• toTimeString() : 날짜를 시, 분, 초, 타임존 형식으로 표시
• toLocaleDateString() : 날짜를 요일, 월, 일, 년 형식으로 표시
• toLocaleTimeString() : 날짜를 시, 분, 초, 타임존, 형식으로, 표시
• toUTCString() : 날짜를 UTC(협정 세계시)형식으로 표시

이들 메서드가 반환하는 문자열은 브라우저마다 다르므로 일관된 형식을 쓰고싶다면 그대로 사용하시면 안됩니다.

날짜/시간 부속 메서드

getDate() : 로컬 시간을 사용하여 일(월 기준) 값을 반환합니다.
getDay() : 로컬 시간을 사용하여 일(주 기준) 값을 반환합니다.
getFullYear() : 로컬 시간을 사용하여 연도 값을 반환합니다.
getHours() : 로컬 시간을 사용하여 시간 값을 반환합니다.
getMilliseconds() : 로컬 시간을 사용하여 밀리초 값을 반환합니다.
getMinutes() : 로컬 시간을 사용하여 분 값을 반환합니다.
getMonth() : 로컬 시간을 사용하여 월 값을 반환합니다.
getSeconds() : 로컬 시간을 사용하여 초 값을 반환합니다.
getTime() : Date 개체의 시간 값을 1970년 1월 1일 자정 이후로 밀리초 단위로 반환합니다.
getTimezoneOffset() : 호스트 컴퓨터와 UTC(지역 표준시) 사이의 시간 차를 분으로 반환합니다.
getUTCDate() : UTC를 사용하여 일(월 기준) 값을 반환합니다.
getUTCDay() : UTC를 사용하여 일(주 기준) 값을 반환합니다.
getUTCFullYear() : UTC를 사용하여 연도 값을 반환합니다.
getUTCHours() : UTC를 사용하여 시간 값을 반환합니다.
getUTCMilliseconds() : UTC를 사용하여 밀리초 값을 반환합니다.
getUTCMinutes() : UTC를 사용하여 분 값을 반환합니다.
getUTCMonth() : UTC를 사용하여 월 값을 반환합니다.
getUTCSeconds() : UTC를 사용하여 초 값을 반환합니다.
getVarDate() : Date 개체의 VT_DATE 값을 반환합니다.
getYear() : 연도 값을 반환합니다.
hasOwnProperty() : 개체에 지정된 이름을 가진 속성이 있는지 여부를 나타내는 부울 값을 반환합니다.
isPrototypeOf() : 개체가 다른 개체의 프로토타입 체인에 있는지 여부를 나타내는 부울 값을 반환합니다.
propertyIsEnumerable() : 지정된 속성이 개체의 일부인지와 열거할 수 있는지 여부를 나타내는 부울 값을 반환합니다.
setDate() : 로컬 시간을 사용하여 숫자로 된 날짜(월 기준)를 설정합니다.
setFullYear() : 로컬 시간을 사용하여 연도 값을 설정합니다.
setHours() : 로컬 시간을 사용하여 시간 값을 설정합니다.
setMilliseconds() : 로컬 시간을 사용하여 밀리초 값을 설정합니다.
setMinutes() : 로컬 시간을 사용하여 분 값을 설정합니다.
setMonth() : 로컬 시간을 사용하여 월 값을 설정합니다.
setSeconds() : 로컬 시간을 사용하여 초 값을 설정합니다.
setTime() : Date 개체의 날짜와 시간 값을 설정합니다.
setUTCDate() : UTC를 사용하여 숫자로 된 날짜(월 기준)를 설정합니다.
setUTCFullYear() : UTC를 사용하여 연도 값을 설정합니다.
setUTCHours() : UTC를 사용하여 시간 값을 설정합니다.
setUTCMilliseconds() : UTC를 사용하여 밀리초 값을 설정합니다.
setUTCMinutes() : UTC를 사용하여 분 값을 설정합니다.
setUTCMonth() : UTC를 사용하여 월 값을 설정합니다.
setUTCSeconds() : UTC를 사용하여 초 값을 설정합니다.
setYear() : 로컬 시간을 사용하여 연도 값을 설정합니다.
toDateString() : 날짜를 문자열 값으로 반환합니다.
toGMTString() : GMT(그리니치 표준시)를 사용하여 문자열로 변환된 날짜를 반환합니다.
toISOString() : 날짜를 ISO 형식의 문자열 값으로 반환합니다.
toJSON() : JSON serialization 이전에 개체 형식의 날짜를 변환하는 데 사용됩니다.
toLocaleDateString() : 호스트 환경의 현재 로캘에 해당하는 문자열 값으로 날짜를 반환합니다.
toLocaleString() : 현재 로캘을 사용하여 문자열로 변환된 개체를 반환합니다.
toLocaleTimeString() : 호스트 환경의 현재 로캘에 해당하는 문자열 값으로 시간을 반환합니다.
toString() : 개체를 나타내는 문자열을 반환합니다.
toTimeString() : 시간을 문자열 값으로 반환합니다.
toUTCString() : UTC를 사용하여 문자열로 변환된 날짜를 반환합니다.
valueOf() : 지정한 개체의 원시 값을 반환합니다.

참고 : MSDN.aspx)

RegExp 타입

정규 표현식은 펄과 비슷한 문법을 써서 쉽게 생성 할 수 있습니다.

var expression = /pattern/flags;

pattern부분에는 정규 표현식을 씁니다. 이는 문자 클래스, 수량자, 그룹, 룩어헤드, 역참조 등이 포함됩니다.
각 정규 표현식은 flags를 통해 해당 정규 표현식이 어떻게 동작할지 나타냅니다.

g : 전역모드를 지정합니다, 문자열 패턴을 찾아도 종료하지 않고 문자열 전체에서 동작합니다.
i : 대소문자 비구분 모드를 지정합니다. 대소문자 구분을 하지 않습니다.
m : 여러줄 모드를 지정합니다 텍스트의 끝에 도달해도 계속 패턴을 찾습니다.

var pattern1 = /at/g;     //모든 at에 일치되는지 확인

var pattern2 = /[bc]at/i;      // bat이나 cat중 처음 나온것 일치되나 대소문자 구분안함

var pattern3 = /.at/gi;      //at로 끝나는 세글자일치, 대소문자 구분안함

생성은 정규 표현식 리터럴을 사용하거나 생성자를 이용해서 할 수 있습니다.

var pattern1 = /at/i;

var pattern2 = new RegExp("at", "i");

위에 pattern1, pattern2는 완전히 동일한 정규표현식입니다.

정규 표현식 인스턴스 프로퍼티

RegExp는 다음 프로퍼티가 존재합니다.

• global : g플래그가 설정되어있는지 나타내는 불리언값
• ignoreCase : i플래그가 설정되어있는지 나타내는 불리언값
• lastIndex : 패턴 매칭을 어느 위치에서 시작할지 나타내는 정수 값, 이 값은 0에서 시작
• multiline : m플래그가 설정되었는지 나타내는 불리언값
• source : 정규 표현식을 생성한 문자열

global에 대해서만 예를 봅시다

var pattern1 = /at/g;

console.log(pattern1.global); //true

다른 프로퍼티도 위에 설명을 참고하셔서 사용하시면 됩니다.

정규 표현식 인스턴스 메서드

가장많이 쓰이는 메서드로 exec()메서드가 있습니다.
이 메서드는 패턴을 테스트할 문자열을 매개변수로 받고 패턴에 일치하는 문자열 배열을 반환 받습니다.
일치하는 부분을 못찾으면 null을 반환합니다.

exec()메서드가 반환하는 배열은 Array의 인스턴스인 동시에 프로퍼티 두 개가 추가 됩니다.
패턴이 일치한 위치를 나타내는 index 프로퍼티, 넘긴 문자열을 가진 input 프로퍼티입니다.

var text = "mom and dad and baby";
var pattern = /mom(and dad(and baby)?)?/gi;

var matches = pattern.exec(text);
console.log(matches.index); //0
console.log(matches.input); // "mom and dad and baby"
console.log(matches[0]); //mom and dad and baby
console.log(matches[1]); //and dad and baby
console.log(matches[2]); // and baby

예제에는 패턴에 그룹이 2개가 존재하며 그룹 별로 matches에 배열이 생성됩니다.

그룹을 사용하지 않는다면, exec() 메서드는 g플래그가 설정되어있어도 한번에 한 가지 매치에 대한 정보만 반환합니다.
아래 예제를 봅시다

var text = "cat, bat, sat, fat";
var pattern1 = /.at/;

var matches = pattern1.exec(text);
console.log(matches[0]); //cat

matches = pattern1.exec(text);
console.log(matches[0]); //cat

//아래는 g를 추가해였습니다.
var text2 = "cat, bat, sat, fat";
var pattern2 = /.at/g;

var matches2 = pattern2.exec(text2);
console.log(matches2[0]); //cat

matches2 = pattern2.exec(text2);
console.log(matches2[0]); //bat

위와같이 g를 선언하지 않은 패턴은 exec를 실행해도 계속 cat, 즉 첫번쨰 문자열만 반환하며
g를 선언하면 exec()를 실행할 때마다 깊게(다음 문자열을) 검색합니다.

이번에 소개할 다른 메서드는 test()입니다.
이 메서드는 문자열을 매개변수로 받으며 패턴이 일치하면 true 아니면 false를 반환합니다.
이 메서드는 문자열이 패턴에 일치하는지만 확인할 때 사용하면 유용합니다.

var text = "000-00-0000";
var pattern = /\d{3}-\d{2}-\d{4}/;

if(pattern.test(text)){
     alert("The pattern was matched.");
}

위 예제는 특정한 숫자 패턴에 맞는지 테스트 합니다. 일치할 경우 메시지를 표시합니다.
사용자가 입력한 문자열이 유용한지만 확인하려 할때 사용하면 좋습니다.

패턴의 한계

자바스크립트에 정규 표현식은 현재 완전히 개발된 상태이나, 펄 같은 언어에서 가능한 고급 정규 표현식 기능은 미치지 못합니다.

• 이름 붙은 캡처그룹
• 병합클래스
• 조건문
• 정규 표현식 주석
• 룩비하인드(룩어헤드 반대)
• 텍스트의 처음과 마지막 일치
  위 제한외에도 많이있습니다. 하지만 제한이 있어도 ECMAScript에서 지원하는 정규 표현식 기능만으로도 대부분의 작업은 문제없습니다.

Function 타입

자바스크립트는 다른언어와 다르게 함수가 사실 객체입니다.
모든 함수는 Function타입의 인스턴스이며 다른 참조 타입과 마찬가지로 프로퍼티와 메서드가 존재합니다.
함수 이름은 단지 함수 객체를 가리키는 포인터일 뿐, 함수와 단단히 결합되는 것이 아닙니다.

함수 선언 문법은 아래와 같습니다.

function sum (num1, num2){
     return num1 + num2;
}

var sum = function(num1, num2) {
     return num1 + num2;
};

위 코드의 두 선언은 동일합니다.
아래 코드는 변수 sum을 정의하면서 익명함수를 생성해줬습니다.
그리고 다른 변수 초기화 문장과 마찬가지로 세미콜론도 추가되어 있습니다.
이 두가지 방법 외에도 new Function() 생성자로 생성하는 방법도 있으나 권장하지 않는 방법이기 때문에 넘어가도록 하겠습니다.

아래 예제를 보겠습니다.

function sum (num1, num2){
     return num1 + num2;
}
alert(sum(10, 10)); //20

var anotherSum = sum;
alert(anotherSum(10, 10)); //20

sum = null;
alert(anotherSum(10, 10)); //20

이전 포스트에서 원시값 참조값의 복사를 눈여겨 보신 분이라면 이해가 쉽게 되는 부분입니다.
sum은 함수 위치에 대한 포인터를 가지고 있으며, anotherSum에 sum을 복사 할때 함수를 복사 하는게 아닌 함수 위치에 대한 포인터를 복사하기 때문에 sum변수에 null을 할당하여도 anotherSum은 여전히 함수 위치에 대한 포인터를 바라볼 뿐입니다.

오버로딩 없음

함수가 단순한 포인터임을 알면 함수 오버로딩이 불가능한 이유도 이해할 수 있습니다.
동일한 함수명으로 생성할 경우 마지막에 정의한 함수가 이전에 정의한 함수를 덮어 씁니다.
예제를 봅시다

function addSomeNumber(num){
     return num + 100;
}

function addSomeNumber(num){
     return num + 200;
}

console.log(addSomeNumber(100)); //300

이걸로는 잘 이해가 안되네요. 위 예제는 아래 예제와 같습니다.

var addSomeNumber = function(num){
     return num + 100;
}

addSomeNumber = function(num){
     return num + 200;
}

console.log(addSomeNumber(100)); //300

위에 두개의 코드는 같은 내용입니다. 하지만 아래껄로 보면 이전에 정의한 함수를 덮어쓴다는 개념이 이해가 더 쉽게 될 것 입니다.

함수 선언 vs 함수 표현식

함수 선언식과 함수 표현식을 보겠습니다.

//함수 선언식
alert(sum(10, 10));
function sum(num1, num2){
     return num1 + num2;

}

//함수 표현식
alert(sum(10,20));
var sum = function(num1, num2){
     return num1 + num2;
}

두가지 방식은 차이가 없습니다..만 한가지 큰 차이가 있습니다.
바로 함수 선언 호이스팅을 하지 못합니다.
위에 함수 선언식의 경우 sum을 선언하기 전에 alert에서 호출하여도 정상적으로 동작합니다.
왜냐하면 함수 선언 호이스팅이라는 과정을 통해서 함수 선언을 미리 읽고 실행 컨텍스트에 추가해놓기 때문입니다.
하지만 함수 표현식으로 생성한 함수의 경우 함수 선언이 아니고 초기화 문장의 일부로 보기 때문에, 함수 표현식의 alert은 실행되기 전에 변수 sum에 할당되지 않았기 때문에 예기치 못한 식별자(unexpected identifier)에러를 발생 시킵니다.
이런 중요한 차이 하나를 제외하면 두 문법 사이에 다른 차이는 없습니다.

값처럼 쓰는 함수

함수는 단지 변수일 뿐.. 함수도 다른 값이 올 수 있는 곳이라면 어디든 올 수 있습니다.
매개변수로 넘기거나 함수가 실행 결과로 다른 함수를 반환하는 일이 가능합니다.

function testFunction(someFunction, someArgument){
     return someFunction(someArgument);
}

첫번째 매개변수는 함수, 두번째 매개변수는 콜백 함수에 넘길 값입니다.

function add10(num){
     return num + 10;
}

var result 1 = testFunction(add10, 10);
console.log(result1);     //20

function getGreeting(name){
     return "hello, " + name;
}

var result2 = testFunction(getGreeting, "Kendrick");
console.log(result2);     //hello, Kendrick

주의할 점은 함수를 넘길 때는 함수를 가르키는 포인트를 넘겨야지, 함수가 동작하고나서 반환하는 값을 넘기면 안되게 때문에 괄호를 넣지 않습니다.
함수로 함수를 반환하게 만들 수도 있으며 이런 패턴은 매우 유용합니다.
ex) sort() 매개변수로 넘겨줄 함수를 만드는 특별한 함수를 만든다던지 할 수 있습니다.

함수의 내부구조

함수 내부에는 arguments, this라는 특별한 객체가 있습니다.
arguments는 배열과 비슷한 객체이며, 함수에 전달된 매개변수를 모두 포함합니다.
이 객체의 주요 목적은 함수 매개변수를 표현하는 것입니다. 하지만 객체의 소유자인 함수를 가리키는 포인터인 callee라는 프로퍼티도 있습니다.

function factorial(num){
     if (num <= 1){
          return 1;
     } else {
          return num * factorial(num-1);
     }
}

일반적은 재귀함수는 위 예제 처럼 구현합니다.
위와 같은 경우는 factorial 함수명이 변경 되었을때 내용에 의존되어있는 함수명도 변경되어야 합니다.
하지만 callee를 이용하여 아래처럼 구현하면 함수명만 변경하여도 동일하게 동작합니다.

function factorial(num){
     if (num <= 1){
          return 1;
     } else {
          return num * arguments.callee(num-1);
     }
}

arguments 객체의 소유자 함수를 가리키는 callee를 구현하면 함수명이 변경되더라도 내용 수정이 필요없이 재귀 호출은 그대로 이루어 집니다.

이번엔 this에 대해서 알아봅시다.
c#이나 자바의 this 객체와 비슷하지만 같지는 않습니다.
this는 함수가 실행 중인 컨텍스트 객체에 대한 참조입니다.
함수를 웹 페이지의 전역 스코프에서 호출했다면 this 객체는 window를 가리킵니다.

window.color = "red";
var o = {color: "blue" } ;

function sayColor(){
     alert(this.color);
}

sayColor(); // red

o.sayColor = sayColor;
o.sayColor(); //blue

전역에 생성된 sayColor() 함수는 this객체를 가지고 있으며, 이 함수가 반환하는 값 역시 함수를 호출하는 시점에 따라서 다릅니다.
전역스코프에서 sayColor()를 호출하면 red를 반환하며, 객체 o의 메서드로 할당한 다음 o.sayColor()를 호출하면 this객체는 o를 기리키므로 blue를 반환합니다.

caller프로퍼티도 있습니다.
이 프로퍼티는 해당 함수를 호출한 함수에 대한 참조를 저장하며, 전역 스코프에서 호출했다면 null이 저장됩니다.

함수 프로퍼티와 메서드

함수는 객체이며 그렇기 때문에 프로퍼티와 메서드를 가집니다.

length 프로퍼티는 함수가 가진 매개변수의 개수를 반환합니다.

prototype은 모든 참조 타입의 인스턴스 메서드가 존재하는 곳입니다.
toString()이나 valueOf()같은 메서드는 모두 prototype에 존재하며, 객체 인스턴스는 이곳에 접근합ㄴ디ㅏ.
prototype은 6장에서 설명 예정이므로 여기서는 다루지 않습니다.

apply() 함수는 매개 변수로 소유자 함수에 넘길 this와 매개변수 배열을 받습니다.

function sum(num1, num2){
     return num1 + num2;
}

function callSum1(num1, num2){
     return sum.apply(this, arguments); // arguments 대신 [num1, num2]와 같이 배열을 넘겨도 됨
}

console.log(callSum1(10, 10)); //20

위와 같이 사용할 수 있습니다.

call()메서드도 apply()와 마찬가지로 동작합니다. 허나 매개변수 전달 방식이 다릅니다.
arguments나 배열을 넘기지않고 각 매개변수를 각각 넣어줍니다.

function sum(num1, num2){
     return num1 + num2;
}


function callSum1(num1, num2){
     return sum.call(this, num1, num2); // arguments, 배열 대신 각각 넣어줌
}

console.log(callSum1(10, 10)); //20

전달하는 매개변수만 다르고 동일합니다.
편리한 방식을 사용하시면 됩니다.

apply()와 call()의 진가는 매개변수를 전달해 호출하는 것이 아닌 this를 바꾸는데 있습니다. 아래 예제를 봅시다.

window.color = "red";
var o = { color : "blue" } ;

function sayColor(){
     alert(this.color);
}

sayColor();     //red

sayColor.call(this);     //red
sayColor.call(window); //red
sayColor.call(o);      //blue

call을 이용해 스코프를 바꾸면 객체마다 일일히 메서드를 등록하지 않아도 되는 장점이 있습니다.

ECMAScript5에 추가된 bind()라는 함수도 있습니다.
이 메서드는 새 함수 인스턴스를 만드는데 그 this는 bind()에 전달된 값 입니다.

window.color = "red";
var o = { color: "blue" };

function sayColor(){
     alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor();     // blue

원시 래퍼 타입

원시 래퍼타입은 Boolean, Number, String이 있으며, 원시 값을 편리하게 조작하기 위해 디자인된 참조 타입입니다.
원시값을 읽을 때 이에 해당하는 래퍼 타입이 이면에서 생성되어 메소드를 사용할 수 있습니다.
각 원시 래퍼타입이 지원하는 메서드를 알아보겠습니다.

불리언 타입

Boolean값에 대응하는 참조타입입니다.
Boolean객체는 혼란스러운 점이 있어서 사용하지 않는걸 권하고 있습니다.

var falseObject = new Boolean(false);
var falseValue = fasle;

console.log(typeof falseObject); //object
console.log(typeof falseValue); //boolean
console.log(falseObject instanceof Boolean); //true
console.log(falseValue instanceof Boolean); //false

네 다시한번 말하지만 Boolean객체는 결코 쓰지 말기를 권합니다.

Number 타입

숫자형 값의 참조타입입니다.
new를 이용하여 생성합니다.

Number타입의 옵션으로 숫자를 매개변수로 받습니다.

var num = 10;
console.log(num.toString());
console.log(num.toString(2));
console.log(num.toString(8));
console.log(num.toString(10));
console.log(num.toString(16));

각 매개변수 숫자의 진수로 변형되어 출력됩니다.
없을 경우 기본적으로 10진수입니다.

이 외에도 다양한 형식의 문자열로 반환하는 메서드가 있습니다.
toFixed() 메서드는 지정한 만큼의 정확도로 소수점을 찍은 문자열을 반환합니다.

var num = 10;
alert(num.toFixed(2));     // 10.00

var num2 = 10.005;
alert(num.toFixed(2));    // 10.01

num2와 같이 소수점 뒤 자리 수가 매개변수로 지정한 자리수 보다 크다면 반올림을 해줍니다.
일반적으로 브라우저에서 소수점 이하 20자리 까지 지원합니다.

toExponential()메서드는 숫자 형식에 관한 메서드입니다.
이 메서드는 숫자를 지수 표기법 문자열로 반환합니다.

var num = 10;
alert(num.toExponential(1));     // 1.0e+1

toPrecision() 메서드도 toExponential() 보다 유연하게 사용할 수 있는 메서드 입니다.
매개 변수는 숫자 표현에 사용할 총 자리 수 이며 이에 따라 다르게 표시됩니다

var num = 99;
console.log(num.toPrecision(1)); // 1e+2 , 99를 한자리 숫자로 표현하기 힘들어서 100으로 반올림하여 처리
console.log(num.toPrecision(2)); // 99, 2자리 숫자로 표현
console.log(num.toPrecision(3)); // 99.0, 3자리 숫자로 표현

toPrecision()메서드는 객체의 숫자형 값에 따라 toFixed()나 toExponential()중 하나를 선택하여 호출합니다.
그리고 모두 매개변수로 지정한 자리수에 맞게 적절하게 반올림 하거나 내림합니다.

Number 객체는 숫자형 값을 다룰 때 중요한 기능을 포함하고 있으나 Boolean객체와 비슷한 문제가 잠재하므로 사용을 피하는 편을 권합니다.

String 타입

문자열을 나타내는 객체이며 다음과 같이 String생성자를 이용해서 생성합니다.

var stringObject = new String("hello world");

String 객체의 메서드는 모두 원시 문자열에서 사용할 수 있습니다.
valueOf(), toLocaleString(), toString()은 모두 객체의 원시 문자열 값을 반환합니다.
length프로퍼티도 존재하며 문자열 길이를 나타내는 숫자가 저장됩니다.
2바이트 문자라도 1로 계산합니다.

글자 메서드

문자열의 특정 문자로 접근하는 메서드입니다.
charAt(), charCodeAt() 두가지가 있으며 배열로도 접근할 수 있습니다.
charAt()은 해당 인덱스의 글자를 반환하며
charCodeAt()은 해당 인덱스 글자의 코드를 반환합니다.

var stringValue = "hello world";
console.log(stringValue.charAt(1)); // e
console.log(stringValue.charCodeAt(1)); // 101
console.log(stringValue[1]); // e

문자열 조작 메서드

문자열 값을 조작하는 메서드는 다양합니다.
concat() 메서드는 문자열을 병합하여 그 결과를 반환합니다.
slice(), substr(), substring() 의 예제를 아래서 확인 합시다.

var stringValue = "hello";
console.log(stringValue.concat(" world"); // hello world
console.log(stringValue.concat("?", "!"); // hello?!

var stringValue2 = "hello world";
console.log(stringValue2.slice(3));            // lo world
console.log(stringValue2.substring(3));    // lo world
console.log(stringValue2.substr(3));         // lo world
console.log(stringValue2.slice(3, 7));        // lo w
console.log(stringValue2.substring(3,7)); // lo w
console.log(stringValue2.substr(3, 7));     // lo worl

문자열 위치 메서드

indexOf(), lastIndexOf() 두 메서드는 두개의 매개변수를 받습니다.
첫번째 매개변수는 찾을 문자열, 두번째 매개변수는 시작할 위치입니다.
lastIndexOf는 IndexOf와 동일하지만 검색을 뒤에서부터 시작한다는 차이가 있습니다.

trim() 메서드

문자 왼쪽과 오른쪽 끝의 공백을 제거 합니다.

대소문자 메서드

toLowerCase(), toLocaleLowerCase(), toUpperCase(), toLocaleUpperCase() 네가지 입니다.
lowercase는 문자열을 소문자로, uppercase는 문자열을 대문자로 치환합니다.
locale이 붙은 메서드의 경우 지역 메서드와 범용 메서드가 똑같긴 하지만, 터키어 같은 일부 언어에서 유니코드 대소문자 변환에 따른 특별한 규칙이 필요하며 이 때문에 지역 메서드가 필요합니다.
작성한 코드가 어느 지역에서 실행될지 모른다면 지역 메서드를 쓰는 편이 안전합니다.

문자열 패턴 매칭 메서드

문자열 내에서 패턴 매칭을 하도록 만들어진 메서드입니다.
match()메서드입니다.
RegExp 객체의 exec() 메서드와 같은 결과를 반환합니다. 즉 매개변수도 똑같이 정규식 패턴을 넘겨 주면 됩니다.

search()메서드는 검색하여 인덱스를 반환하는 메서드입니다.
일치하는 것이 없다면 -1을 반환합니다.

replace()함수는 찾을 값을 대체 값으로 변환합니다.
매개변수는 두가지를 받으며 첫번째 매개변수는 찾을값, 두번째 매개변수는 대체할 값입니다.
하지만 문자열에 찾을 값이 2가지 이상있어도 맨처음 한가지 값만 대체 됩니다.
그렇기 때문에 아래와 같이 사용하면 전체를 변경할 수 있습니다.

text.replace(/at/g, "ond");

HTML 형식 생성에 필요한 몇가지 메서드가 존재 하나 이들 메서드를 쓰면 시맨틱 마크업을 해치므로 거의 사용하지 않습니다.
그런 이유로 자세한 내용은 넘어가겠습니다

내장된 싱글톤 객체

Object, Array, String 같은 내장객체는 알아봤으니 그 외의 두 가지 싱글톤 객체를 알아봅시다.
그것은 바로 Global, Math 입니다.

Global 객체

Global 객체는 명시적으로 접근할 수 없습니다.
사실 전역 변수나 전역 함수라는건 존재하지 않으며, 전역에서 정의한 변수와 함수는 모두 Global 객체의 프로퍼티가 됩니다.
참고로 isNaN(), isFinite(), parseInt(), parseFloat() 함수 등은 사실 Global 객체의 메서드입니다.
이외에도 여러가지 메서드를 소개하겠습니다.

URI 인코딩 메서드

encodeURI()와 encodeURIComponent() 메서드는 브라우저에 전달할 URI를 인코딩 하는 메서드입니다.
encodeURI() 는 URI의 일부분으로 쓰이는 특수 문자는 인코드 하지 않습니다.
encodeURIComponent()는 비표준 문자 모두 인코딩 합니다.

var uri = "http://gnin.herokuapp.com/#test";

console.log(encodeURI(uri)); 
//http://gnin.herokuapp.com/?t%20e%20s%20t

console.log(encodeURIComponent(uri)); 
//http%3A%2F%2Fgnin.herokuapp.com%2F%3Ft%20e%20s%20t

반대로 디코딩하기 위해서는 아래 메서드를 사용합니다.
decodeURI(), decodeURIComponent()

eval()메서드는 인터프리터 자체인 듯 동작하며 매개변수로 문자열을 하나 받는데 이 문자열은 실행할 수 있는 ECMAScript 코드여야 합니다.

eval("alert('hi')");
alert("hi");

위 eval()은 아래 alert()과 동일하게 동작 합니다.
인터프리터가 eval()을 만나면 매개변수를 실제 ECMAScript 문장으로 해석해서 eval()이 있던 위치에 삽입합니다.
eval()이 실행하는 코드는 eval()을 호출한 실행 컨텍스트의 일부분으로 간주되며 해당 컨텍스트와 같은 스코프 체인을 갖습니다.

eval("var msg = 'test';");
alert(msg);

문자열에서 실제 코드로 변환되기 때문에 아래 alert()에서 msg내용이 출력 됩니다.

스트릭트 모드에서는 eval()내부에서 정의한 변수나 함수에 접근 할 수 없으므로 위에 예제는 에러를 발생 시킵니다.
또한 스트릭트 모드에서는 eval에 값을 할당할 수 없습니다.

Global 객체의 프로퍼티와 메서드를 아래 주소에서 확인 하실 수 있습니다
undefined, NaN, Infinity 및 각종 타입의 생성자로 이루어져있습니다.
Mozilla Docs

window 객체는 접근할 수 없는 Global객체를 대신해 접근할 수 있게 해줍니다.
즉 전역 스코프에서 선언한 변수, 함수는 모두 window의 객체가 됩니다.
브라우저 객체 모델에 대해 설명할 때 자세하게 다루어질 예정입니다.

Math 객체

수학 공식과 각종 상수가 저장되어있는 객체 입니다.

프로퍼티 목록은 아래와 같으며 이런 값이 있음을 기억 해 두면 도음이 될 것 입니다.
Math.E - 자연로그의 밑 수인 e의 값
Math.LN2 - 2의 자연로그
Math.LN10 - 10의 자연로그
Math.LOG2E - e의 밑수가 2인 로그
Math.LOG10E - e의 밑수가 10인 로그
Math.PI - 파이 값
Math.SQRT1_2 - 1/2의 제곱근
Math.SQRT2 - 2의 제곱근

min(), max()

최소값과 최대값을 반환하는 메서드 입니다.

var max = Math.max(3, 23, 42);

console.log(max); //42

var min = Math.min(3, 23, 42);

console.log(min); //3

//배열 데이터 사용하기
var values = [1, 2, 3, 4, 5, 6, 7, 8];
var arrayMax = Math.max.apply(Math, values);

apply메서드를 사용하여 첫번째 매개변수를 Math로 넘김으로써 this가 정확히 설정되게 하는 방법입니다.
이렇게 두 번쨰 매개변수로 배열을 넣었을 때 배열에 최대값을 확인 할 수 있습니다.

반올림 메서드

Math.ceil() - 올림
Math.floor() - 내림
Math.round() - 반올림

매개변수로 소수점이 있는 값을 넣어주면 올림, 내림, 반올림 된 값을 반환합니다.

random 메서드

0과 1 사이의 난수를 반환합니다. 0과 1을 반환하지는 않습니다.
범위만 제공하면 그 사이의 난수를 반환하는 함수의 예제를 보겠습니다.

function selectFrom(lowerValue, upperValue) {
     var choices = upperValue - lowerValue + 1;
     return Math.floor(Math.random() * choices + lowerValue);
}

var num = selectFrom(2, 10);
alert(num); // 2와 10 사이의 난수

위 함수를 이용해서 아래와 같이 특정 배열의 값을 랜덤으로 가져올 수 있습니다.

var colors = ["red", "green", "blue", "yellow", "black", "purple"];
var color = colors[selectFrom(0, colors.length-1)];

Math객체에 다른 전체 메서드는 아래 문서에서 확인하실 수 있습니다.
Mozilla Docs

각 메서드가 반환하는 값의 정확도는 브라우저에 따라 다를수 있으니 유념해두시길 바랍니다.

마치며

참조 타입에 대하여 알아 봤습니다.
기본적으로 지원하는 프로퍼티와 메서드를 알고 작업시 유용하게 활용한다면 능률적인 작업을 할 수 있을 것입니다.
이번 포스트에서 설명하는 몇가지 개념들을 익혀놔야 나중에 다룰 포스트에서 이해하기 좋을 것입니다. 그러니 예제를 참고해서 반드시 이해하고 넘어가시길 바랍니다.
다음 포스트에서는 자바스크립트에서의 객체지향 프로그래밍에 대해서 설명할 예정입니다.
좋은 하루 되세요!

​

이 포스트는 프론트엔드 개발자를 위한 자바스크립트(인사이트)에서 발췌한 내용이 포함되어 있습니다.

내용 전문이 아니기 때문에 자세하게 알고싶으신 분은 프론트엔드 개발자를 위한 자바스크립트(인사이트) 서적을 참고 하시길 바랍니다.