#11. Property 와 Method (현상편)

데이터 타입의 Property 와 Method

지금까지 JavaScript 의 주요 데이터 타입인 Number, String, Array, Function, Object 가 갖고 있는 기본 특징을 살펴보았습니다. #4. 데이터 타입 편에서 언급했듯이 게임 스타크래프트 종족별로 사용할 수 있는 스킬이 다르듯 JavaScript 데이터 타입별로 사용할 수 있는 스킬이 다릅니다. 여기서 얘기하는 스킬이 바로 JavaScript 의 Property 와 Method 를 의미합니다. 

이번 장에서는 각각의 데이터 타입이 어떤 Property 와 Method 를 갖고 있는지 알아보겠습니다. 아직 Property 와 Mehtod 가 구분이 잘 되지 않는다면, () 가 없으면 Property, 있으면 Method 로 생각하면 됩니다. ^^

데이터 타입별로 존재하는 Property 와 Method 는 아래 사이트에서 확인할 수 있습니다.

Standard built-in objects

---

1. Number 

MAX_VALUE  ( <-> MIN_VALUE )

MAX_VALUE 는 JavaScript 로 나타낼 수 있는 가장 큰 수를 반환하는 Property 입니다. 반대로 MIN_VALUE 는 JavaScript 로 나타낼 수 있는 0에 가장 가까운 수를 반환합니다. 

Number.MAX_VALUE     //     1.7976931348623157e+308
Number.MIN_VALUE     //     5e-324

toString()

Number 데이터 타입을 String 으로 반환합니다. 

var num = 3.141592;
typeof num.toString();    //    String

Number 에서 String 으로 데이터 타입을 바꾸는 toString() 처럼 JavaScript 의 몇몇 Method 의 경우에는 변수가 갖고 있는 원래의 데이터 타입을 변화시키기도 합니다.

toFixed()

소수 자리의 길이를 제한하고 반올림한 값을 String 으로 반환합니다.

var num = 3.141592;
num.toFixed();                      //    3
num.toFixed(4);                    //    3.1416
typeof num.toFixed(4);       //    String

Number

---

2. String

length

띄어쓰기를 포함한 문자의 전체 길이를 반환합니다.

var str = "Hello World";
str.length;    //    11

indexOf()

String 안에 있는 특정 키워드가 시작되는 Index ( 위치 ) 를 반환합니다. Array 와 마찬가지로 String 의 Index 는 0 부터 시작됩니다. indexOf() 의 첫 번째 argument 는 찾고자 하는 키워드, 두 번째 argument 는 검색을 시작할 Index 의 시작 지점을 의미합니다. 입력시 대소문자를 구분하여 정확하게 입력해야 하며, 특정 키워드가 없을 경우에는 -1 을 반환합니다. 

var str = "Hi, I am developer";
str.indexOf("Hi");                           //    0
str.indexOf("developer", 9);        //    9
str.indexOf("developer", 10);      //   -1

substring()

특정한 구간에 있는 String 을 추출할 때 사용하는 Method 입니다. 첫 번째 argument 는 시작 지점, 두 번째 argument 는 끝나는 지점을 의미하며, 입력된 두 argument 사이에 있는 String 을 반환합니다.

var str = "Hi, I am developer";
str.substring(7);          //      m developer     7부터 끝까지
str.substring(0, 7);     //       Hi, I a      0 ~ 7미만까지

split()

String 을 split() argument 를 기준으로 쪼개서 Array 로 반환합니다. 첫 번째 argument 는 무엇을 기준으로 쪼갤 것인지, 두 번째 argument 는 쪼개진 값들 중 몇 개를 Array로 반환할지를 의미합니다. 

var str = "Hi, I am developer";
str.split("");          //    단어 하나하나가 배열에 들어감 ( 분량이 너무 많아서 넣지 못했습니다 ㅠ.ㅠ )
str.split(" ");         //    띄어쓰기 기준으로 배열에 들어감 [ 'Hi,', 'I', 'am', 'developer' ]
str.split(" ", 2);     //    띄어쓰기 기준으로 2개만 배열에 들어감 [ 'Hi,', 'I' ]

String

---

3. Array

length

Array 안에 몇 개의 item 이 담겨있는지 알려줍니다.

var arr = ["apple", "banana", "tomato"];
arr.length;    //    3 

push()  ( <-> unshift() )

Array 에 새로운 Item 을 추가할 때 사용되며, 추가된 Item 은 Array 의 마지막 index 에 위치합니다. 반대로 unshift() 는 Array 의 맨 앞의 index 에 item 을 추가합니다.

var arr = ["apple", "banana", "tomato"];
arr.push("TV");      //    4 
arr;                           //    ["apple", "banana", "tomato", "TV"]

arr.unshift("Jobs");     //    5
arr;                                 //    ["Jobs", "apple", "banana", "tomato", "TV"]

pop()  ( <-> shift() )

Array 의 마지막 index 에 위치한 item 을 제거한 후에 이를 반환합니다. 반대로 shift() 는 Array 의 맨 앞의 item 을 제거한 후 이를 반환합니다.

var arr = ["apple", "banana", "tomato"];
arr.pop();    //    tomato 
arr;              //    ["apple", "banana"]

arr.shift();    //    apple
arr;               //     ["banana"]

Join()

Array 의 모든 Item 을 argument 를 사용하여 하나의 String 으로 만듭니다.

var arr = ["apple", "banana", "tomato"];
arr.join(" ");       //     띄어쓰기 사용     "apple banana tomato"
arr.join("-");      //     - 사용                   "apple-banana-tomato"
arr.join(", ");      //     ,띄어쓰기 사용     "apple, banana, tomato"

Array

---

4. Function

   

name

Function 의 이름을 반환합니다.

function sum(a, b, c) {    
    console.log(a + b + c);    
}
sum.name    //    sum 반환

length

MDN 에서는 함수에 의해 기대되는 인수의 수를 나타낸다고 설명하고 있습니다. 조금 풀어서 얘기한다면 함수에 있는 parameter 의 개수를 의미한다고 볼 수 있습니다.

function sum(a, b, c) {    
    console.log(a + b + c);    
}
sum.length;    //    3

Function 에는 call(), apply() 2가지 주요 Method 가 존재하는데, 이를 이해하기 위해서는 this 라는 개념을 숙지할 필요가 있기 때문에 이번 장에서는 스킵하도록 하겠습니다.

Function

---

Object

hasOwnProperty()

앞서 #9.Object 편에서 언급했던 hasOwnProperty() 가 바로 Object 의 Method 입니다. 다시 한번 소개하면 특정 property 의 존재 유무를 확인할 때 사용되며 값이 존재한다면 true, 없으면 false 를 반환합니다. 

var apple = {
    "color" : "red",
    "taste" : "great",
};
apple.hasOwnProperty("color");       //    true
apple.hasOwnProperty("origin");     //     false

Object

---

이번 연재글은 각각의 데이터 타입별로 존재하는 Property 와 Method 에 대해 어디서부터 어떻게 설명해야 할지 고민의 시간의 길어져 발행이 늦어졌습니다. Function 과 Object 의 몇몇 Property 와 Method 의 경우 구체적으로 설명하기에는 여러 개념이 얽혀있어 난이도 상승과 분량이 길어지기 때문에 이번 장에서 마무리 하기에는 무리라고 생각되었습니다. Object 편에서 언급했던 모순점과도 연결되는 부분이라 다시 장에서 한꺼번에 설명드릴 예정이니 조금만 참아주세요 ^^

이번 장에서는 데이터 타입별 Property 와 Method 의 역할에 대해서 간략히 살펴보았습니다. 그외 스킬들에 대해서는 링크로 남겨드린 MDN 사이트에서 확인할 수 있습니다. 그럼 #12. Property 와 Method (기원편) 에서 나머지 뒷 이야기를 이어가도록 하겠습니다.