객체와 배열
2014. 10. 20. 17:37 나홀로스터디/JS 완벽가이드
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
7.1 객체 생성하기
7.2 객체 프로퍼티
7.3 연관 배열로서의 객체
7.4 공통적으로 나타나는 객체 프로퍼티와 메서드
7.5 배열
7.6 배열 원소 읽고 쓰기
7.7 배열 메서드
7.1 객체 생성하기
객체는 복합 타입으로 여러 값들을 결합한 것으로 각각에 붙은 이름을 사용하여 원하는 값을 저장하고 읽어올수 있다. 다시 말하면 객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.
객체를 생성하는 가장 쉬운 방법은 객체 리터럴(중괄호 {})을 사용하는 것으로 이름과 값을 한 쌍으로 하는 프로퍼티들을 콤마로 분리하여 연결한 리스트다. 객체 리터럴은 평가될 때마다 새로운 객체를 생성하고 초기화함으로 루프 안에서 반복적으로 호출되는 함수 내에 있다면 복수의 새로운 객체를 생성해 낼 수 있다.
객체를 생성하는 다른 방법은 new 연산자를 사용하는것이다.
new 연산자 뒤에는 객체의 프로퍼티들을 초기화하는 생성자 함수의 호출이 뒤따라야 한다.
var a = new Array(); // 빈 배열 생성 var d = new Date(); // 현재 날짜와 시간을 나타내는 객체 생성 var r = new RegExp("javascript", "i"); // 패턴 매칭을 위한 객체 생성
Object() 생성자를 사용하면 리터럴 {}과 마찬가지로 빈 객체를 생성할 수 있다.
7.2 객체 프로퍼티
객체 프로퍼티에 접근하기 위해서는 마침표(.) 연산자를 사용하며 접근하려는 프로퍼티를 소유한 객체가 이 연산자 좌측에 위치한다. 우측에는 프로퍼티 이름이 위치해야 하고 반드시 식별자를 사용해야만 하며 문자열이나 표현식은 쓸수 없다.
객체에 값을 할당하는 방법으로 새로운 프로퍼티를 생성한 후에는 언제든 이 프로퍼티에 새로운 값을 할당함으로써 프로퍼티의 값을 변경할 수 있다.
book.title = "Javascrip : The Rhino Book"
7.2.1 프로퍼티 열거하기(for/in)
스크립트를 디버깅 할때 혹은 이름을 알수 없는 임의의 프로퍼티를 가진 객체에 접근하려 할때 유용하게 사용할수 있다. for/in 루프는 모든 사용자 정의 프로퍼티를 열거하지만 미리 정의된 프로퍼티나 메서드는 열거하지 않고 특정 순서를 따르지 않는다.
7.2.2 프로퍼티 존재 확인하기(in)
프로퍼티의 존재 여부를 확인하는 in 연산자는 좌측에 프로퍼티 이름이 문자열로 위치하고 오른쪽에는 프로퍼티의 존재를 확인하려는 객체가 위치한다.
if("x" in o) o.x =1; // 객체 o 에 프로퍼티 "x"가 있으며 1을 저장한다.
if(o.x !== undefined) o.x =1; // 프로퍼티 x가 존재하고 값이 undefined가 아니라면 1을 저장한다.객체에 없는 프로퍼티에 접근하려면 undefined 값이 반환되기 때문에 in 연산자는 자주 사용하지 않는다.
7.2.3 프로퍼티 삭제하기(delete)
객체의 프로퍼티를 삭제하기 위해서는 delete 연산자를 사용한다.
delete book.charter2;
프로퍼티를 삭제하는 것은 단순히 프로퍼티에 undefined 값을 할당하는 것이 아니라 실제로 객체에서 프로퍼티를 완전히 제거하는 것을 의미한다.
7.3 연관 배열로서의 객체
객체의 프로퍼티에 접근하기 위한 방법은 마침표(.) 연산자와 대괄호[]가 있다.
object.property
object["property"]
이 두 구문의 차이점은 프로퍼티 이름이 식별자인 것과 문자열이라는 점이다.
마침표(.) 연산자를 사용하여 프로퍼티에 접근할 때는 이름이 식별자로 표현되어야 하고 자바스크립트 프로그램에 직접 표기하는 이름이고 데이터 타입이 아니기 때문에 프로그램이 실행 시간에 조작할 수 없다.
반면 []를 사용하여 객체의 프로퍼티에 접근할 때에는 프로퍼티의 이름이 문자열로 표현된다.
문자열은 자바스트립트의 데이터 타입이므로 프로그램이 실행되는 동안 새롭게 생성되고 조작될 수 있다.
연관 배열은 동적으로 임의의 값과 임의의 문자열을 연관지어 저장할 수 있는 자료구조로 자바스크립트 객체에서는 추가로 데이터 값을 임의의 문자열과 연관지을 수 있는 강력한 기능이 있다.
7.4 공통적으로 나타나는 객체 프로퍼티와 메서드
자바스크립트의 모든 객체는 Object 클래스를 상속하고 상속받은 프로퍼티와 메서드가 있다.
7.4.1 constructor 프로퍼티
자바스크립트 모든 객체는 객체를 초기화하는데 사용되는 생성자 함수인 constructor 프로퍼티를 지니고 있다.
생성자 함수는 객체의 범주 즉 클래스를 정의하므로 constructor 프로퍼티는 객체의 타입을 판단하는데 사용될수 있다.
if((typefo o == "object") && (o.constructor == Date))
instanceof연산자는 constructor 프로퍼티의 값을 사용한다.
if((typeof o == "obeject") && (o instanceof Date))
7.4.2 toString() 메서드
toString() 메서드는 별도의 전달인자 없이 호출되며 메서드를 호출한 객체의 값을 어떤 방식으로든 표현하는 문자열을 만들어 결과로 반환한다. 배열을 문자열로 반환하면 배열의 각 원소를 문자열로 변환하여 연결한 문자열을 얻을 수 있으며 함수를 문자열로 변환하면 함수의 소스코드를 얻을 수 있다.
7.4.3 toLocaleString() 메서드
객체의 지역화된 문자열 표현을 제공하기 위한 것으로 그 자체로는 지역화 작업을 행하지 않는다. 그러므로 기본으로 제공되는 toLocalseStrung() 메서드가 반환하는 값은 toString()과 같다.
7.4.4 valueOf() 메서드
자바스크립트가 객체를 문자열이 아니라 숫자 같은 다른 기본 타입으로 변환하려 할때 호출되는 메서드로 객체가 기본 타입 값을 필요로 하는 문맥 안에서 사용될 때, 자바스크립트는 valueOf() 메서드르 자동으로 호출한다.
7.4.5 hasOwnProperty() 메서드
이 메서드는 프로퍼티의 이름을 담는 한 개의 문자열 전달인자를 받아 객체가 이 프로퍼티를 소유하고 있는지 검사하는데 프로퍼티가 상속받은 것이 아니고 객체 안에 지역적으로 정의되어 전재한다면 true를 반환하고 그렇지 않으면 false를 반환한다.
7.4.6 propertylsEnumerable() 메서드
이 메서드는 프로퍼티의 이름을 담는 한 개의 문자열 전달인자를 받아 이 이름의 프로퍼티를 객체가 상속받지 않고 직접 지역적으로 정의했는지 검사하고 이 프로퍼티가 for/in 루프를 사용하여 열거될 수 있는지 검사한다. 모든 조건을 충족하면 true를 반환하고 그렇지 않으면 false를 반환한다.
7.4.7 isPrototypeOf() 메서드
이 메서드의 객체가 전달인자로 주어진 객체의 프로토타입 객체라면 true를 반환하고 그렇지 않으면 false를 반환한다.
7.5 배열
배열은 순서 있는 값들의 집합이다. 배열 안의 각 값을 원소라 부르며 각 원소는 배열 안에서 그 위치를 가리키는 번호를 할당 받는데 이 번호를 인덱스(index)라고 한다.
배열리터럴([, ,])을 사용하면 가장쉽게 배열을 생성할수 있다.
var empty = []; // 빈배열
var primes = [2,3,4,5]; //4개의 숫자 값들로 이루어진 배열
var misc = [1.1, true, "a",] // 서로 다른 타입을 가진 3개의 원소로 구성된 배열
배열리터럴에는 상수뿐 아니라 임의의 표현식도 사용할 수 있고 객체 리터럴이나 또 다른 배열 리터럴을 포함할 수도 있다.
배열을 생성하는 또 다른 방법은 Array() 생성자를 사용하는 것이다
var a = new Array(); // 전달인자 없이 호출하는 방법
var a = new Array(5, 4, 3, 2, 1, "testing, testing"); // 명시적으로 배열의 처음 n개의 원소를 정의하며 호출하는 방법
var a = new Arra(10); // 배열의 길이를 지정하는 숫자값을 전달인자로 하여 호출하는 방법
7.6 배열 원소 읽고 쓰기
배열의 각 원소에 접근할 때에는 [] 연산자를 사용한다.
배열은 객체의 특별한 종류이기 때문에 . 또는 [] 구문을 사용하여 배열 안에 숫자가 아닌 이름의 객체 프로퍼티를 정의하고 접근할 수 있다.
7.6.1 배열에 새로운 원소 추가하기
자바스크립트의 배열은 임의 개수의 원소를 가질 수 있으며 원소의 개수는 언제든 변경할 수 있다.
배열의 인덱스는 연속적이지 않아도 되고 배열에 새로운 원소를 추가하려면 그 값을 할당하기만 하면된다.
a[10] = 10;
배열 원소는 객체에도 추가될 수 있다.
var c = new Circle(1,2,3);
c[0] = "this is an array element of an object!"; // c[0]은 객체의 배열 원소
위 예는 단지 객체에 "0"이라는 이름의 프로퍼티를 추가할 뿐이다. 객체에 배열 원소를 추가한다고 해서 객체가 배열이 되지는 않는다.
7.6.2 배열 원소 삭제하기(delete)
delete 연산자를 사용하면 배열 원소 그 자체는 사라지지 않고 존재하며 배열 원소의 값은 undefined 값으로 설정된다.
배열 원소를 배열에서 완전히 삭제하고 삭제한 배열 원소의 뒤쪽에 위치한 원소들을 앞쪽으로 옮겨서 저장하려면 배열 메서드를 사용해야만 한다.
Array.shift() 메서드는 첫번째 원소를 삭제하고 Array.pop() 메서드는 배열의 마지막 원소를 삭제하며 Array.slice() 메서드는 연속된 범위 안에의 원소들을 일괄적으로 삭제한다.
7.6.3 배열의 길이(length)
Array() 생성자 혹은 배열 리터럴 등의 방법을 사용하여 생성된 모든 배열에는 이 배열에 있는 원소의 수를 알려주기 위한 length라는 이름의 프로퍼티가 있다.
7.6.4 배열 순회하기
length 프로퍼티의 가장 일반적인 용도는 배열의 모든 원소를 순회하는 작업이다.
7.6.5 배열의 크기 조절하기
배열의 length 프로퍼티는 읽고 쓸 수 있는 값으로 length 프로퍼티를 현재의 값보다 작게 설정하면 배열은 새로운 길이로 축소된다.
7.6.6 다차원 배열
자바스크립트는 진정한 의미에서 다차원 배열을 지원하지는 않지만 배열의 배열에서 원소에 접근하기 위해서는 [] 연산자를 두 번 사용하면 된다.
7.7 배열 메서드
그 외에 다양한 종류의 메서드가 Array() 클래스 안에 정의되어 있다.
7.7.1 join()
Array.join() 메서드는 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환한다. 결과로 반환되는 문자열에서 배열의 원소들을 구분하기 위해 구분자 문자열이 사용되는데 Array.join()에 전달인자를 넘겨 구분자 문자열을 지정할 수 있다.
이 메서드는 String.split() 메서드와 반대되는 기능을 한다.
7.7.2 reverse()
Array.reverse() 메서드는 배열 안의 원소 순서를 반대로 정렬한다.
7.7.3 sort()
Array.sort() 메서드는 배열 안의 원소들을 정렬하여 반환하고 알파벳 순으로 정렬한다.
알파벳순이 아니라 다른 순서로 배열을 정렬하려면 sort() 메서드의 전달인자를 통해 비교 함수를 직접 명시해주어야 한다.
7.7.4 concat()
Array.concat() 메서드는 본래 배열의 모든 원소에 concat() 메서드의 전달인자들을 전부 이어붙인 배열을 새롭게 생성하여 반환한다.
7.7.5 slice()
Array.slice() 메서드는 배열의 일부분 혹은 부분 배열을 반환한다. slice() 메서드는 전달인자를 두 개 받는데, 반환되는 배열은 첫번재 배열인자가 지정하는 위치부터 두번째 전달인자가 지정하는 위치를 제외한 그 사이의 모든 원소를 포함한다.
7.7.6 splice()
Array.splice() 메서드는 배열에 원소를 삽입하거나 원소를 제거하려 할 때 사용할 수 있는 메서드다. 이 메서드는 배열안에서 직접 수행하므로 slice(), concat()과 달리 새로운 배열을 만들어 반환하지 않는다.
splice() 의 첫 번재 전달인자는 배열 상에서 삽입 혹은 삭제 작업이 시작하게 될 위치를 지정하며 두번재 전달인자는 배열에서 삭제할 원소들의 개수를 지정한다. 이렇게 잘라낸 배열을 반환하며 만약 잘라낸 원소가 하나도 없다면 빈배열을 반환한다.
7.7.7 push()와 pop()
이 메서드를 사용하면 배열을 마치 스택인것 처럼 조작할 수 있다.
push() 메서드는 하나 혹은 그 이상의 원소들을 배열의 끝 부분에 이어 붙이고 배열의 새로운 길이를 반환한다. pop() 메서드는 push()와 반대로 작동한다. pop() 메서드는 배열의 마지막 원소를 제거하고 배열의 길이를 감소시킨 후 배열에서 제거한 원소를 반환한다. 이 두 메서드는 새로운 배열을 만들어 반환하는 것이 아니라 배열 그 자체를 변화시킴을 유의하라
7.7.8 unshift()와 shift()
unshift()와 shift() 메서드는 push(), pop() 과 매우 유사하게 작동하는데 이 메서드들은 배열의 끝이 아니라 배열의 맨 앞에서 원소를 삽입하고 제거한다는 점이 다르다.
7.7.9 toString()과 toLocalString()
배열의 toString() 메서드는 우선 배열의 모든 원소를 문자열로 변형하고 이 문자열들을 콤마(,)로 분리한 목록을 반환한다.
결과 문자열은 대괄호 [] 문자나 배열 값들을 둘러싼 다른 종류의 구분자들을 포함하지 않는다.
toLocaleString() 은 toString()의 지역화된 버전으로 우선 배열의 각 원소들을 그 원소의 toLocaleString() 메서드를 사용하여 변환하고 지역에 특화되었거나 구현에 정의된 구분자 문자열을 사용하여 각 결과 문자열을 연결한다.
7.7.10 추가적인 배열 함수
indexOf(), lastIndexOf() - 배열상에서 주어진 값을 빠르게 찾을 수 있는 메서드
forEach() - 배열의 모든 원소에 대해 지정된 함수를 호출
map() - 배열의 각 원소에 지정된 함수를 호출하여 얻은 결과를 원소로 하는 배열 반환
filter() - 지정된 술어함수가 true를 반환하는 원소들로 구성된 배열을 반환
by 허클베리밋