2014. 10. 27. 11:42 나홀로스터디/JS 완벽가이드
8.1 함수 정의와 호출
8.2 함수 전달인자
8.3 데이터로서의 함수
8.4 메서드로서의 함수
8.5 생성자 함수
8.6 함수 프로퍼티와 메서드
8.7 유용한 함수들
8.8 함수 유효 범위와 클로저
8.9 function() 생성자
함수란 한 번 정의되면 임의 횟수에 거쳐 호출되거나 실행될 수 있는 자바 스크립트 코드 블록으로 매개변수(parameter) 혹은 전달인자(arguments)라 불리는 지역 변수를 가질수 있는데 이 변수의 값은 함수가 호출되는 시점에 주어진다. 객체상에서 호출되는 함수는 메서드라 칭하며 이때 객체는 함수의 암묵적 전달인자로 전달된다.
8.1 함수 정의와 호출
가장 일반적인 방법은 function문을 사용하는 것인데 이 문법은 function 키워드로 시작하며 다음과 같은 항목들이 따라온다
함수의 이름
괄호() 안에 0개 혹은 임의 개수의 매개변수 이름을 쉼표로 분리한 목록
중괄호 {} 안에 함수의 몸체를 구성하는 자바스크립트 문장들
만약 함수에 return 문이 없으면 단순히 함수 몸체를 이루는 문장들을 하나씩 실행한 뒤에 undefined 값을 호출자에게로 반환한다.
함수를 호출할 때에는 이름 뒤에 괄호() 연산자가 따라오고 이 괄호 안에는 선택적으로 전달인자 값(또는 표현식)을 쉼표로 분리하여 연결한 목록이 위치한다.
만약 함수가 기대하는 개수보다 많은 수의 전달인자를 전달하면 추가분의 전달인자들을 무시하고 만약 기대하는 개수보다 적은 수의 전달인자를 전달하면 빠뜨린 매개변수에는 undefined 값이 할당된다.
8.1.1 중첩된 함수
자바스크립트에서 함수는 다른 함수 안에 중첩되어 정의될 수 있는데 중첩된 함수는 그 함수가 중첩되어 위치하는 함수의 최상위 레벨에서만 정의될 수 있다.
8.1.2 함수 리터럴
함수 리터럴은 이름 없는 함수를 정의하는데 사용되는 표현식으로 자바스크립트 문장이 아니라 표현식으로 사용된다.
function f(x){ returnn x*x;} // function문 var f = function(x){ return x*x } // 함수 리터럴
한번만 사용되고 버려지기 때문에 일회용 함수를 정의하는데 적합하고 리터럴 표현식에 의해 기술된 함수는 변수에 저장될 수 있고 다른 함수에 전달인자로 전달될 수 있고 곧바로 호출될 수도 있다.
8.1.3 함수 이름 붙이기
함수 이름은 일반적으로 동사 혹은 동사로 시작하는 구절로 관습적으로 소문자로 시작하고 내부적으로만 사용하거나 숨겨진 함수로 사용하려면 밑줄 문자로 시작한다.
8.2 함수 전달인자
8.2.1 생략 가능한 전달인자
생략 가능한 전달인자를 사용하여 함수를 작성할 때는 생략 가능한 것들을 함수 전달인자 목록의 끝에 위치하게 하여 호출할 때에 임의로 생략할 수 있게 하는 것이 중요하다
8.2.2 가변 길이 전달인자 목록: 전달인자 객체
함수 몸체에서 식별자 arguments는 특별한 의미를 지니는데 arguments는 Arguments 객체를 참조하는 특별한 프로퍼티다. 이 객체는 배열과 유사한 객체로서 함수에 전달된 전달인자의 값을 전달인자 이름이 아니라 숫자를 사용해 접근하기 위한 방법을 제공한다. 전달인자가 없는 객체는 arguments[1] 로 접근할수 있다.
Arguments객체는 숫자 인덱스가 붙은 배열 원소들과 length 프로퍼티를 정의한다.
만약 함수에 이름붙은 전달인자가 있으면 Arguments 객체의 배열 원소는 함수 전달인자를 담은 지역 변수의 별칭이 된다.
8.2.2.1 callee 프로퍼티
Arguments 객체는 배열 원소뿐만 아니라 현재 실행되고 있는 자기 자신을 재귀적으로 호출할수 있는 callee 프로퍼티를 추가로 정의한다.
8.2.3 객체 프로퍼티를 전달인자로 사용하기
전달인자를 순서에 관계없이 이름과 값의 쌍으로 전달해 주는 방식의 함수 호출을 구현하려면 우선 하나의 객체를 전달인자로 받는 함수를 정의하고 함수의 사용자로 하여금 함수에서 필요로 하는 이름과 값의 쌍들을 객체 리터럴로 정의하여 전달하게 하면 된다.
8.2.4 전달인자 데이터 타입
자바스크립트에서는 필요에 따라 자유롭게 데이터 타입을 변환하기 때문에 만약 문자열 전달인자를 기대하는 함수를 작성하고 이 함수를 다른 데이터 타입의 값과 함께 호출하면 함수가 그 값을 문자열로 쓰려는 시점에 문자열로의 변환 작업이 수행된다.
8.3 데이터로서의 함수
자바스크립트에서 함수는 변수에 할당되거나 객체 프로퍼티와 배열 원소들에 저장될 수 있고 함수의 전달인자 등으로도 사용될 수 있다.
8.4 메서드로서의 함수
메서드는 객체 프로퍼티에 저장되어 객체를 통해 호출할 수 있는 자바스크립트 함수에 지나지 않는다. 메서드의 몸체 안에는 this 라는 키워드 값이 있다.
만약 함수를 메서드로서가 아니라 함수로 호출했다면 this 키워드는 전역객체를 가리킨다.
8.5 생성자 함수
생성자 함수는 객체의 프로퍼티들을 초기화하려는 함수로 new 연산자와 함께 사용될 의도로 저장된다.
8.6 함수 프로퍼티와 메서드
함수에 대해 typeof 연산자를 사용하면 "function" 문자열을 반환한다. 그러나 실제로 함수는 특수화된 종류의 자바스크립트 객체다.
8.6.1 length 프로퍼티
함수의 몸체 안 arguments 배열의 length 프로퍼티는 함수가 건네받은 전달인자의 개수를 명시한다. Function 객체의 length 프로퍼티는 함수에 선언된 매개변수가 정확히 몇개인지 명시한다.
arguments.length 와는 달리 length 프로퍼티는 함수 몸체의 안과 밖에서 모두 사용할 수 있다.
8.6.2 prototype 프로퍼티
prototype 객체는 함수가 new 연산자를 통해 생성자로 사용될 때 새 객체를 정의하는 과정에서 중요한 역할을 수행한다.
8.6.3 나만의 함수 프로퍼티 정의하기
존재가 유지되는 변수를 사용해야 할 경우 정보를 Function 객체의 프로퍼티에 저장하는것이 더 좋다.
8.6.4 apply() 와 call() 메서드
모든 함수에 대하여 call()과 applay() 메서드를 정의할수 있는데 이 메서드를 사용하면 함수가 마치 다른 어떤 객체의 메서드인 것처럼 호출할 수 있다. call()과 apply() 메서드의 첫 번재 전달인자는 함수가 소속되어 호출될 객체를 지정하며 이 전달인자는 함수 몸체 안에서 this 키워드 값이된다.
apply() 메서드는 call() 메서드와 유사하지만 함수로 건네줄 전달인자들을 배열로 지정한다는 점이 다르다.
8.7 유용한 함수들
8.8 함수 유효 범위와 클로저
자바스크립트 함수의 몸체는 전역 유효 범위와는 다른 지역 유효 범위 상에서 실행된다.
8.8.1 어휘적 유효 범위
함수가 정의될 때는 현재의 유효 범위 체인이 저장되며 이 것은 함수의 내부 상태 중 일부가 된다. 중첩된 함수를 정의하면 유효 범위는 함수를 포함하며 이는 중첩된 함수가 그 함수를 포함하는 함수의 모든 전달인자와 지역 변수들에 접근할 수 있음을 의미한다.
8.8.2 호출 객체
자바스크립트 인터프리터가 함수를 호출할 때엔 먼저 유효 범위를 함수가 정의될 당시의 효력을 지니는 유효 범위 체인으로 설정하고 새로운 객체를 생성하여 유효 범위 체인의 맨 앞에 추가한다. 이 호출 객체는 함수의 Arguments 객체를 가리키는 arguments 프로퍼티로 초기화 된다.
8.8.3 네임스페이스로서의 호출 객체
코드의 충돌을 해결하기 위한 해답은 코드를 함수 안에 넣고 함수를 호출하는 것이다. 이 경우 변수들은 함수의 호출 객체 안에 정의된다.
function init(){
// 코드를 여기에 넣는다. } init();
이 코드는 함수를 가리키는 단 한 개의 프로퍼티 init을 전역 네임스페이스에 추가하는데 만약 단 한 개의 프로퍼티를 추가하는 것도 많다고 생각되면 익명 함수를 정의하고 호출하는 단일 표현식을 사용할 수 있다.
(function(){ // 코드를 여기에 넣는다 })(); // 함수 리터럴을 종결하고 호출한다.
8.8.4 클로저로서의 중첩된 함수
자바스크립트가 중첩된 함수를 허용한다는 사실, 함수를 데이터로 사용할 수 있다는 사실, 어휘적 유효 범위를 사용한다는 사실은 함께 상호작용하여 매우 강력한 결과를 낸다.
자바스크립트에서 함수는 다른 모든 값과 마찬가지로 데이터다. 따라서 함수는 다른 함수에 의해 반환될 수 있고 객체에 프로퍼티로 할당될 수 잇으며 또한 배열 등에 저장될 수도 있다.
자바스크립트 함수는 실행될 코드와 이 함수가 실행될 유효 범위의 조합이다. 이러한 코드와 유효 범위의 조합은 클로저로 알려져 있고 모든 자바스크립트 함수는 클로저다.
8.8.4.1 클로저 예
클로저를 사용하면 사라지지 않는 값을 저장하기 위한 용도로 사용할수 있고 private 속성을 지니는 변수를 생성할 수 있다.
가장 자연스러운 클로저 사용 예는 스티브옌의 중단점 기능구현으로 클로저를 사용하여 함수 안의 현재 유효 범위(지역 변수들과 함수의 전달인자들을 포함하는)를 포착하고 이를 전역 함수인 eval()과 함께 사용함으로써 포착한 유효 범위 안의 값을 조사할수 있게 한다. eval()은 자바스크립트 코드를 담은 문자열을 평가하고 그 값을 반환한다.
inspect()함수는 사용자에게 텍스트를 출력하고 또 사용자에게 문자열을 입력받기 위해서 .Window.prompt() 메서드를 사용한다.
8.8.4.2 클로저와 인터넷 익스플로러의 메모리 누수 현상
IE 웹 브라우저가 사용하는 가비지 컬렉션 기법은 ActiveX 객체와 클라이언트 측 DOM 엘리먼트에 대해 취약하다.
참조의 수가 0이 되는 순간 객체를 메모리상에서 제거하는 방식을 사용하는데 이 방식은 순환 형태의 참조가 존재할 경우 실패한다.
8.9 function() 생성자
함수는 일반적으로 함수 정의 문장이나 함수 리터럴 표현식의 function 키워드를 사용하여 정의된다. 또한 Function() 생성자를 사용해서도 정의될 수 있다.
var f = new Function("x", "y", "return x*y;"); function f(x,y){return x*y};
Function() 생성자는 함수 리터럴과 마찬가지로 이름이 없는 익명 함수를 생성하는데 보통 함수 리터럴을 사용하는 것보다 난해하기 때문에 널리 쓰이지는 않는다.
Function() 생성자를 사용하면 실행시점에 자바스크립트 코드를 동적으로 생성하고 컴파일할 수 있다.
Function() 생성자는 호출될때마다 함수 몸체를 파싱하고 새로운 함수 객체를 생성한다. 반면 루프와 함수안에 함수 리터럴이나 중첩된 함수는 그것이 나타날 때마다 매번 다시 컴파일되지 않는다.
Function() 생성자의 가장 중요한 점은 생성된 함수가 어휘적 유효 범위를 사용하지 않는다는 것이다.
2014. 10. 23. 09:55 나홀로스터디/JS For Web Dev
함수 표현식의 특징
함수와 재귀
클로저를 이용한 고유 변수
function functionName(arg0, arg1, arg2){
// 함수 본문
}alert(functionName.name); // "functionName"
var functionName = function(arg0. arg1. arg2){
// function body
}
function factorial(num){
if(num <= 1){
return 1;
}else{
return num * arguments.callee(num-1);
// return num * factoriial(num-1);
}
}
(function(){
// 코드블록
})();
클라이언트 감지 (0) | 2014.11.20 |
---|---|
브라우저 객체모델 (0) | 2014.11.12 |
참조타입 (0) | 2014.10.17 |
객체에 대한 이해 (0) | 2014.10.15 |
변수와 스코프, 메모리 (0) | 2014.10.07 |
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를 반환하는 원소들로 구성된 배열을 반환
2014. 10. 17. 17:29 나홀로스터디/JS For Web Dev
객체로 작업하기
배열 생성하고 조작하기
자바스크립트의 데이터 타입 이해
원시 데이터 및 원시 래퍼로 작업하기
참조 값(객체)이란 특정 '참조타입'의 인스턴스이다.
참조타입은 데이터와 기능을 묶는 구조로 객체가 가져야 할 프로퍼티와 메서드를 정의한다는 점때문에 '객체정의'라고 불리기도 한다.
생성자는 객체를 생성하는 함수로 객체를 생성할 때는 new 연산자 뒤에 '생성자'를 쓴다.
var person = new Object();
이 코드는 참조타입 Object 의 인스턴스를 생성해서 변수 person에 할당한다.
생성자는 Object()이며, 기본 프로퍼티와 메서드만 가진 단순한 객체를 생성했다.
5.1 Object 타입
참조-값 형태의 Object 타입은 Object의 인스턴스에 많은 기능이 들어있지는 않지만 애플리케이션에 사용할 데이터를 저장하고 전송하는 목적에 안성맞춤이다.
Object 의 인스턴스를 명시적으로 생성하는 방법은 두가지가 있는데 첫번째는 new 연산자와 Object 생성자를 함께 쓰는 방법이고
var person = new Object(); person.name = "Nicholas"; person.age = 38;
다른 방법은 '객체 리터럴' 표기법이다.
ver person = { name: "Nicholas", age: 28 }
객체 리터럴 표기법을 쓸때 중괄호 안쪽을 빈 공간으로 남겨두면 생정자를 썼을때와 마찬가지로 기본 프로퍼티만 가진 객체를 만들수 있다.
var person = {}; // new Object()와 동일
객체리터럴 표기법을 사용해 객체를 생성할 때는 Object 생성자를 호출하지 않는다.
Object 의 인스턴스는 둘 중 어떤 방법으로 만들어도 상관없지만 객체 리터럴 표기를 쓰면 양이 줄어들고 옵션 매개변수를 여러개 넘길때 많이 사용한다.
객체 프로퍼티는 다른 객체 지향 언어와 마찬가지로 '점 표기법'을 써서 접근하지만 '대괄호 표기법'을 쓸수도 있다.
console.log(person["name"]); console.log(person.name);
두방법의 차이는 없지만 대괄호 표기법의 장점은 변수를 써서 프로퍼티에 접근할 수 있다는 점이다.
var propertyName = "name"; console.log(person[propertyName]);
프로퍼티 이름에 공백이 있거나 알파벳이나 숫자가 아닌 문자를 써야하는 경우 점 표기법으로는 접근할수 없으므로 대괄호 표기법이 필요하다.
5.2 Array 타입
데이터의 순서 있는 목록이라는 점은 다른 언어의 배열과 마찬가지지만 ECMAScript 의 배열 슬롯에는 어떤 타입의 데이터라도 넣을수 있다.
배열은 두가지 방법으로 만드는데 첫번째는 Array 생성자를 쓰는 방법이고 배열에 데이터가 몇개 들어갈지 알고 있다면 생성자에 매개변수를 넘겨서 length 프로퍼티가 자동으로 그 값에 맞게 바뀌게 하면 된다. Array 생성자를 쓸때 new 연산자는 생략이 가능하다.
var color = new Array(); var color = new Array(20); // 데이터가 20개 있는 배열 생성 var color = new Array("red", "blue", "green"); // 문자열이 3개 있는 배열 생성
배열을 생성하는 두번째 방법은 '배열 리터럴' 표기법으로 대괄호 안에 데이터를 쉼표로 구분해 쓰는 방법이다.
var color = ["red", "blue", "green"]; // 문자열이 3개 있는 배열 생성 var name = []; // 빈배열 생성
console.log(color[0]); // 첫번째 데이터 표시 color[2] = "block" // 세번째 데이터 값 변경
배열값에 접근하려면 대괄호 안에 인덱스를 넣으면 된다.
length 프로퍼티는 배열에 저장된 데이터의 개수인데 항상 0 이상의 값을 반환하고 length 프로퍼티의 값을 바꾸면 배열 길이가 그에 맞게 바뀌면서 데이터를 제거하거나 빈 슬롯을 추가한다.
length 프로퍼티는 배열 마지막에 데이터를 추가할때도 유용하게 사용된다.
color[color.length] = "black" // 마지막 슬롯 인덱스 다음에 데이터 추가
5.2.1 배열감지
객체와 배열을 구분하기 쉽지 않은데 전역 스코프가 하나뿐인 단순한 웹 페이지에서는 instanceof 연산자를 쓴다. 하지만 instanceof 연산자는 실행 컨텍스트가 하나뿐이라고 가정하는 문제가 있다.
if(value instanceof Array){ // 배열일때 실행하는 코드 }
ECMAScript 5에서는 이 문제를 우회하기 위해 Array.isArray() 메서드를 제공하고 IE9이상, FF4이상, Safari5이상,Opera10.5 이상, Chrome 에서 지원한다.
if(Array.isArray(value)){ // 배열일때 실행하는 코드 }
5.2.2 변환 메서드
객체에는 모두 toLocaleString(), toString(), valueOf() 메서드가 있다.
배열의 각 슬롯을 쉼표로 구분한 문자열을 반환하는데 배열에서 toString()과 valueOf()는 같은 값을 반환한다.
join() 메서드를 통해 구분자가 될 문자열을 입력할수 있다.
alert(배열이름)는 매개변수로 문자열을 받으므로 먼저 배열에서 toString() 을 호출하고 따라서 toString()을 명시적으로 호출한것과 같은 결과가 나타난다.
배열에서 join(), toLocaleString(), toString(),valueOf() 메서드를 호출했을 떄 null이나 undefined 인 데이터는 빈 문자열로 표시된다.
5.2.3 스택 메서드
배열객체는 데이터 삽입과 제거에 제한이 있는 데이터 구조인 스택(LIFO last-in-first-out)처럼 동작할수 있다.
스텍에서 데이터 삽입(push)와 제거(pop)는 단 한지점에서만 발생하는데 ECMAScript 배열에는 push() 와 pop() 메서드가 있어서 마치 스택처럼 마지막에 추가된 데이터가 삭제되고 추가된다.
push() 메서드는 받은 매개변수 그대로 배열에 추가한 후 이에 맞게 늘어난 배열 길이를 반환한다.
pop() 메서드는 배열의 마지막 데이터를 제거하고 length 프로퍼티를 그에 맞게 줄여서 반환한다.
5.2.4 큐 메서드
큐는 목록 마지막에 데이터를 추가하며 목록 맨 앞에서 데이터를 꺼낸다.
push()메서드는 배열 마지막에 데이터를 추가하므로 shift()를 사용하면 큐처럼 동작할수 있게 된다.
unshift() 와 pop() 을 조합하면 큐의 반대 배열 처음에 데이터를 추가하고 앞에서 꺼내는 방식으로 쓸수 있다.
5.2.5 정렬 메서드
배열 순서를 직접 조작하는 메서드는 reverse() 와 sort() 두가지인데 이름에서 예상하듯 reverse() 메서드는 단순히 배열에 저장된 데이터 순서를 뒤집을때 사용하나 유연성은 없다.
배열의 데이터 순서를 마음대로 조작하기 위해서는 sort() 메서드가 필요한데 sort() 메서드는 가장 작은 값이 앞에오고 가장 큰 값이 뒤에 오도록 정렬한다.
이를 위해 이면에서 String() 함수를 호출해 데이터를 문자열로 변환한 후 정렬하고 비교함수를 넘겨서 순서를 조절할 수 있다.
reverse() 와 sort() 는 모두 자신을 호출한 배열에 대한 참조를 반환한다.
5.2.6 조작 메서드
concat() 메서드는 현재 배열 데이터를 기반으로 새로운 배열을 만드는 것으로 현재 배열을 복사한 다음 메서드의 매개변수를 새 배열 마지막에 추가해서 반환한다.배개변수를 넘기지 않으면 현재 배열의 복사본을 반환한다.
slice() 메서드는 배열에 포함된 데이터 일부를 가진 새 배열을 만든다.
slice() 메서드는 매개변수를 두개 받는데 각 매개변수는 원래 배열에서 가져올 데이터 범위의 시작과 끝을 나타내어 첫번째 매개변수에 해당하는 인덱스부터 두번째 매개변수에 해당하는 인덱스 바로 앞까지 가져오고, 매개변수를 하나만 넘기면 해당 인덱스에서 끝까지 모든 데이터를 가져온다.
slice() 에 배개변수로 음수를 넘기면 배열길이 해당값을 더한 숫자를 사용하고 두번째 매개변수가 첫번재 매개변수보다 작으면 빈 배열을 반환한다.
splice() 메서드는 배열 중간에 데이터를 삽입하는 것인데 세가지 방법으로 사용한다.
splice() 메서드는 항상 원래 배열에서 삭제한 데이터의 배열을 반환하는데 삭제한 것이 없다면 빈 배열을 반환한다.
5.2.7 위치 메서드
ECMAScript 5 에서는 배열에 indexOf()와 lastIndexOf() 두 위치 메서드가 추가되었다.
이들 메서드는 매개변수를 두개 받는데 첫번째는 검색할 데이터이며 두번째는 검색을 시작할 인덱스이다.
indexOf()메서드는 배열의 처음부터 마지막까지 검색하고, lastIndexOf()메서드는 배열의 마지막에서 처음까지 검색한다.
데이터 검색은 === 연산자로 비교하고 두 메서드는 찾아낸 데이터의 인덱스를 반환하는데 찾지 못한 경우 -1을 반환한다.
5.2.8 반복 메서드
이들 메서드는 모두 매개변수를 두 개 받는데 하나는 배열의 각 데이터에서 실행할 함수이며 하나는 함수를 실행할 스코프 객체이다.
every() - 배열의 모든 데이터에서 콜백 함수를 호출하고 반환값이 전부 ture면 true를 반환한다.
filter() - 배열의 모든 데이터에서 콜백함수를 호출하고 반환값이 true인 데이터를 새 배열에 저장하여 반환한다.
forEach() - 배열의 모든 데이터에서 콜백함수를 호출한다 .반환값이 없다
map() - 배열의 모든 데이터에서 콜백함수를 호출하고 그 결과를 새 배열에 저장하여 반환한다
some() - 배열의 모든 데이터에서 콜백함수를 호출하고 반환 중 하나라도 true면 true를 반환한다.
5.2.9 감소 메서드
reduce() 메서드는 배열의 첫 번재 데이터에서 시작해 마지막까지 진행하고 reduceRight()는 반대로 마지막 데이터에서 시작해 첫 번째까지 진행한다. 두 메서드 모두 두개의 매개변수를 받는데 첫번째 매개변수는 각 데이터에서 실행할 콜백 함수고 두번째 매개변수는 감소 작업을 시작할 초기 값이다.
reduce()와 reduceRight() 의 콜백 함수가 넘겨받는 매개변수는 이전 값, 현재 값, 현재 값의 인덱스, 현재 배열 네가지다.
5.3 Date 타입
Date 타입은 날짜와 시간을 저장할 때 1970년 1월 1일 자정부터 몇 밀리초가 지났는지 나타내는 숫자를 사용하고 날짜 객체를 생성할 때는 new 연산자 다음에 Date 생성자를 쓴다.
var now = new Date();
Date() 생성자에 매개변수를 넘기지 않으면 생성된 객체는 현재 날짜와 시간이 저장된다.
Date.parse() 메서드는 매개변수로 날짜를 표현하는 문자열을 받고 해당 문자열을 날짜의 밀리초 표현으로 변환을 시도한다.
Date.UTC()의 매개변수는 해당 시각의 년, 월 인덱스(0이 1월), 일(1~31), 시(0~23), 분, 초, 밀리초이다.
5.3.1 상속된 메서드
Date 타입도 toLocaleString(), toString(), valueOf() 메서드를 오버라이드 하지만 Date 타입의 toLocaleString() 메서드와 toString() 메서드는 디버그 목적으로 사용하고 valueOf() 메서드는 밀리초 단위로 비교가 가능하다.
5.3.2 날짜 표시 메서드
Date 타입에는 날짜를 특정 형식으로 표현하는 메서드가 있다.
toDateString() - 날짜를 요일, 월, 일, 년 형식으로 표현하고 정확한 형식은 브라우저를 따른다.
toTimeString() - 날짜를 시, 분, 초, 타임존 형식으로 표현하고 정확한 형식은 브라우저를 따른다.
toLocaleDateString() - 날짜를 요일, 월, 일, 년 형식으로 표현하고 정확한 형식은 브라우저를 따른다.
toLocaleTimeSting() - 날짜를 시, 분, 초 타임존 형식으로 표현하고 정확한 형식은 브라우저를 따른다.
toUTCString() - 날짜를 UTC(협정 세계시) 형식으로 표현하고 정확한 형식은 브라우저를 따른다.
5.3.3 날짜/시간 부속 메서드
날짜의 특정 부분을 가져오거나 설정하는데 쓰인다.
5.4 RegExp 타입
var expression = /pattern/flags;
패턴 부분에 정규표현식을 나타내는 식을 쓰며, 문자 클래스, 수량자, 그룹, 룩어헤드, 역참조 등이 포함된다.
플래그를 통해 어떻게 동작할지 나타내며 세가지가 있다.
g - 전역모드를 지정한다. 문자열에서 패턴을 찾는 즉시 종료하지 않고 문자열 전체에서 동작한다.
i - 대소문자 비구분 모드를 지정한다. 패턴을 찾을때 대소문자를 구분하지 않는다.
m - 여러줄 모드를 지정한다. 텍스트의 줄 끝에 도달해도 멈추지 않고 계속 패턴을 찾는다.
메타문자를 패턴에 쓸 때는 반드시 역슬래시를 써서 이스케이프 해야한다.
( [ { \ ^ $ | } ] ) ? * + .
5.4.1 정규 표현식 인스턴스 프로퍼티
RegExp 인스턴스에는 다음 프로퍼티가 있으며 각 프로퍼티는 패턴에 대한 정보를 포함한다.
global - g 플래그 설정 여부 불리언 값.
ignoreCase - i 플래그 설정 여부 불리언 값.
lastIndex - 패턴 매칭의 시작 위치를 나타내는 정수 값이며, 항상 0에서 시작한다.
multiline - m 플래그 설정 여부 불리언 값.
source - 정규 표현식을 생성한 문자열. 항상 리터럴 형식으로 반환하되 여닫는 /문자는 포함되지 않는다. 생성자를 통해 생성되었더라도 리터럴 형식으로 반환한다.
5.4.2 정규 표현식 인스턴스 메서드
가장 많이 쓰는 메서드는 그룹을 캡처할 의도로 만들어진 exec() 메서드로 패턴을 테스트할 문자열을 매개변수로 받고 패턴에 일치하는 문자열 배열을 반환하며 일치하는 부분을 찾을 수 없을 때는 null 을 반환한다.
exec() 메서드가 반환하는 배열은 Array의 인스턴스인 동시에 프로퍼티 두개 추가되는데 index 프로퍼티는 패턴이 일치한 위치를 나타내고 input 프로퍼티는 exec() 메서드에 넘긴 문자열이다.
정규 표현식의 또다른 메서드는 test() 인데, 문자열이 패턴에 일치하는 지만 확인하여 일치할 때는 true를 반환하고 그렇지 않을 때는 false를 반환한다.
객체 프로토타입에서 상속한 메서드 toLocaleString() 과 toString()은 리터럴 형식을 반환한다. valueOf() 메서드는 정규 표현식 자체를 반환한다.
5.4.3 RegExp 생성자 프로퍼티
정식이름과 짧은 이름이 있는데 오페라는 짧은 이름을 지원하지 않는다.
짧은 이름은 반드시 대괄호 표기법을 써야한다.
5.4.4 패턴의 한계
ECMAScript의 정규 표현식은 완전히 개발된 상태이지만 펄 같은 언어에서 가능한 고급 정규 표현식 기능에는 미치지 못한다.
5.5 Function 타입
모든 함수는 Function 타입의 인스턴스이며 다른 참조 타입과 마찬가지로 프로퍼티와 메서드가 있고 함수 이름은 단순히 함수 객체를 가리키는 포인터가 된다.
보통 함수선언 문법을 통해 정의된다.
function sum (num1, num2){ return num1 + num2; }
변수를 정의하면서 함수를 초기화 하는 방법은 함수 이름은 필요하지 않다.(함수 표현식)
var sum = function(num1, num2){ return num1 + num2; };
함수를 정의하는 마지막 방법은 Funtion 생성자를 이용하는 방법으로 매개변수 숫자에는 제한이 없고 마지막 매개변수는 함수 바디로 간주한다.
var sum = new Function("num1", "num2", "return num1 + num2") // 권장하지 않음.
5.5.1 오버로딩 없음
함수 이름이 단순한 포인터임을 이해하면 ECMAScript에서 함수 오버로딩이 불가능한 이유도 이해할 수 있다.
5.5.2 함수 선언 vs 함수 표현식
함수 선언은 실행전에 모든 실행 컨텍스트에서 접근하고 실행할수 있지만 함수 표현식은 코드 실행이 해당 줄까지 진행하기 전에는 사용할 수 없다.
함수 표현식을 쓰면서도 함수 선언처럼 보이게, 즉 var sum = function sum() {}처럼 쓸 수 있다.
5.5.3 값처럼 쓰는 함수
함수이름은 변수일 뿐이므로 함수를 다른 함수에 매개변수로 넘기거나 함수 실행 결과로 다른 함수를 반환하는 일이 가능하다.
5.5.4 함수의 내부구조
함수 내부에는 arguments, this라는 특별한 객체가 있다.
argument 객체는 전달된 매개변수를 모두 포함하는 배열과 비슷한 객체이며 주요 목적은 함수 매개변수를 표현하는 것이지만 arguments 객체의 소유자인 함수를 가리키는 포인터인 calee라는 프로퍼티도 있다.
this 는 함수가 실행 중인 컨텍스트 객체에 대한 참조이다. 함수를 웹페이지의 전역 스코프에서 호출했다면 this 객체는 window를 가리킨다.
caller 프로퍼티는 해당 함수를 호출한 함수에 대한 참조를 저장하며 전역 스코프에서 호출했다면 null이 저장된다.
5.5.5 함수 프로퍼티와 메서드
ECMAScript에서 함수는 객체이므로 프로퍼티와 메서드를 가지는데 모든 함수에 공통인 프로퍼티는 length와 prototype이다. length 프로퍼티는 함수가 넘겨받을 것으로 예상하는 이름 붙은 매개변수의 숫자이다.
prototype 프로퍼티는 개발자 자신만의 참조 타입과 상속을 정의할 때 매우 중요하며, 열거할수 없는 프로퍼티이므로 for-in문에 나타나지 않는다.
apply()와 call() 두 가지 메서드는 소유자인 함수를 호출하면서 this를 넘기는데 결과적으로 함수 내부에서 this 객체의 값을 바꾸는 것이나 마찬가지이다.
apply() 메서드는 매개변수로 소유자 함수에 넘길 this 와 매개변수 배열을 받는데 두 번째 매개변수는 Array의 인스턴스일 수도 있고 arguments 객체일 수도 있다.
5.6 원시 래퍼 타입
Boolean, Number, String은 원시 값을 편리하게 조작하기 위해 디자인된 참조타입이다.
원시 값을 읽을 때마다 이에 해당하는 래퍼 타입이 이면에서 생성되므로 메서드를 사용할수 있다.
new 연산자를 사용해 참조 타입의 인스턴스를 만들면 스코프를 벗어날 때까지 메모리에 존재하지만 자동으로 생성된 원시 래퍼 타입은 코드의 해당 행을 벗어나는 즉시 파괴된다. 따라서 원시 래퍼 타입에는 런타임에 프로퍼티나 메서드를 추가할 수 없다.
원시래퍼 타입에 typeof를 대입하면 "object"를 반환하며 원시 래퍼 객체는 모두 불리언 값인 true로 변환된다.
Object 생성자에 문자열을 넘기면 String 인스턴스가 생성되며 숫자를 넘기면 Number 의 인스턴스가, 불리언을 넘기면 Boolean 인스턴스가 생성되는데 new를 사용해 원시 래퍼 생성자를 호출한 것과 같은 이름의 형변환 함수를 호출한 결과는 다르다.
5.6.1 불리언 타입
Boolean 타입은 불리언 값에 대응하는 참조 타입으로 객체를 생성하기 위해서는 Boolean 생성자에 ture나 false를 넘긴다.
var booleanObject = new Boolean(ture);
Boolean 인스턴스는 원시 값 true나 false를 반환하도록 valueOf() 메서드를 오버라이드한다.
5.6.2 Number 타입
Number타입은 숫자형 값의 참조타입으로 Number 객체는 Number 생성자에 숫자를 넘겨 생성한다.
var numberObject = new Number(10);
Number 타입에는 상속받은 메서드 외에도 숫자를 다양한 형식의 문자열로 반환하는 메서드가 있다.
toFixed() 메서드는 매개변수로 지정한 만큼의 정확도로 소수점을 찍은 문자열을 반환하고 지정한 자리수보다 크다면 반올림한다.
toExponential() 메서드는 숫자를 지수 표기법 문자열로 반환한다.
toPrecision() 메서드는 자신을 호출한 객체의 숫자형 값에 따라 toFixed()나 toExponentiol() 중 하나를 호출하여 지수 표기법이나 소수점 표기법을 선택하여 반환한다.
5.6.3 String 타입
var stringObject = new String("Hello world");
String 객체의 메서드는 모두 원시 문자열에서 사용할수 있다.
String 인스턴스는 모두 length 프로퍼티가 있는데 이 프로퍼티에는 문자열 길이를 나타내는 숫자가 저장된다.
글자 메서드
문자열의 특정 문자에 접근하는 메서드는 charAt() 과 charCodeAt() 두 가지이고 각 메서드는 매개변수 하나를 받는데 이는 원하는 문장의 인덱스이다.
특정 문자를 호출할때는 charAt() 메서드를 사용하고 문자 자체가 아니라 문자 코드가 필요할 때는 charCodeAt()을 사용한다.
문자열 조작 메서드
concat() 메서드는 문자열을 병합하여 그 결과를 반환하며 매개변수 숫자에 제한이 없다.
하지만 문자열을 합칠때는 + 연산자가 더 많이 쓰이며 더 빨리 동작한다.
ECMAScript 에는 문자열 일부로 새 문자열을 만드는 메서드가 slice(), substr(), substring() 세가지가 있다.
slice()와 substring() 에서는 두번째 매개변수 직전까지의 문자를 가져오고, substr()에서는 두번째 매개변수가 문자를 몇개 가져올지 나타낸다. 두번째 매개변수를 생략하면 열 전체 길이가 기본 값으로 사용된다.
문자열 위치 메서드
문자열의 위치를 찾는 메서드는 indexOf()와 lastIndexOf() 두가지가 있는데 문자열을 검색해 그 위치를 반환하며 찾지 못핬을때는 -1을 반환한다. 두 메서드의 차이는 indexOf()가 문자열 처음에서 검색을 시작하는 반면 lastIndexOf()는 문자열 마지막막에서 검색을 시작한다.
trim() 메서드
trim() 메서드는 문자열을 복사한 후 앞뒤 공백을 모두 제거한 결과를 반환한다.
대소문자 메서드
toLowerCase(), toLocaleLowerCase(), roUpperCase(), toLocaleUpperCase() 네가지 메서드가 있는데 일부 언어에서는 대소문자 변환에 따른 특별한 규칙이 필요하며 이 때문에 지역 메서드가 필요하다. 일반적으로 작성한 코드가 어느 지역에서 실행될지 모른다면 지역 메서드를 쓰는 편이 안전한다.
문자열 패턴 매칭 메서드
String 타입에는 문자열 내에서 패턴 매칭을 하도록 만들어진 메서드가 몇가지 있는데 가장 많이 쓰이는 메서드는 match()로 RegExp 객체의 exec() 메서드와 같은 결과를 반환한다.
match() 메서드는 매개변수로 정규 표현식 리터럴이나 RegExp 객체를 하나 받는다.
serch() 메서드는 패턴에 일치하는 첫번째 문자열 인덱스를 반환하며 일치하는 것을 찾지 못했을 때는 -1을 반환한다. 항상 문자열 처음에서 검색을 시작한다.
replace() 는 문자열 일부를 바꾼다.
매개변수를 두개 받는데 첫번째 매개변수는 RegExp 객체 또는 문자열이고 두번째 매개변수는 문자열 또는 문자열을 반환하는 함수이다.
htmlEscape() 함수는 HTML에서 사용할 수 있도록 특수문자를 이스케이프하게 만들었다.
HTML에서 <, >, &, " 문자를 그대로 쓸수 없으므로 반드시 이스케이프해야 한다.
split() 메서드는 텍스트를 구분자를 기준으로 분리해서 배열에 담아 변환한다.
localeCompare() 메서드
문자열 두 개를 비교한 후 세가지 값 -1. 0. 양수(대부분1) 중 하나를 반환한다. 메서드를 호출하는 텍스트가
매개변수로 넘긴 문자열보다 알파벳 순서상 뒤에있다면 -1
매개변수 문자열이 일치하면 0
매개변수로 넘긴 문자열보다 알파벳 순서상 앞에 있다면 1
fromCharCode() 메서드
문자 코드를 받아 문자열로 변환하는것으로 charCodeAt() 메서드가 하는 일을 거꾸로 한다고 생각하면 된다.
HTML() 메서드
자바스크립트에서 동적으로 HTML 형식을 생성할 필요가 있지만 이 메서드를 쓰면 시멘틱 마크업을 해치므로 거의 사용하지 않는다.
5.7 내장된 싱글톤 객체
5.7.1 Global 객체
Global 객체는 명시적으로 접근할수 없다는 점에서 가장 독특한 객체이다.
ECMA-262는 Global 객체를 소유자가 없는 모든 프로퍼티와 메서드를 담는 객체로 정의한다. 사실 전역 변수나 전역 함수라는 것은 존재하지 않는다. 전역에서 정의한 변수와 함수는 모두 Global 객체의 프로퍼티가 된다.
URI 인코딩 메서드
encodeURI() 와 encodeURIComponent() 메서드는 브라우저에 전달할 URI를 인코드하는 메서드이다.
URI 인코딩 메서드는 특별한 UTF-8 인코딩을 써서 URI에 사용할 수 없는 문자를 브라우저가 인식하고 이해할수 있는 문자로 바꿔준다.
encodeURI() 메서드는 전체 URI에 대해 작업하도록 만들어졌고 : 이나 /, ?, #처럼 URI의 일부분으로 쓰이는 특수 문자는 인코드 하지 않지만 encodeURIComponent() 메서드는 비표준 문자를 모두 인코드 한다.
decodeURI()와 decodeURIComponent()는 반대의 역할을 한다.
eval() 메서드
eval() 메서드는 ECMAScript 인터프리터 자체인 듯 동작하며 매개변수로 문자열을 하나 받는데 이 문자열은 실행할 수 있는 ECMAScript 코드여야 한다.
eval("alert('hi"); alert("hi");
인터프리터가 eval()을 만나면 매개변수를 실제 ECMAScript 문장으로 해석해서 eval() 이 있던 위치에 삽입한다. eval()이 실행하는 코드는 eval()을 호출한 실행 컨텍스트의 일부분으로 간주되며 해당 컨텍스트와 같은 스코프 체인을 갖는다.
문자열을 코드로 변환하는 eval()을 쓸때는 항상 주의해야하며 사용자가 악의적으로 보안을 해치는 값을 입력할수 있기 때문에 eval()을 쓸때는 특히 더 조심해야 한다.
Global 객체의 프로퍼티
특별한 값인 undefined, NaN, Infinity외에 네이티브 참조 타입 생성자인 Object나 Function 등도 Global 프로퍼티다.
ECMAScript 5판에서는 undefined, NaN, Infinity에 값을 할당할 수 없음을 명확히 했다. 이들에 값을 할당하려 하면 스트릭트 모드가 아닐 때에도 에러가 난다.
window 객체
웹브라우저에서는 window 객체를 통해 global객체에 접근 할 수 있다.
즉 전역 스코프에서 선언한 변수와 함수는 모두 window 객체의 프로퍼티가 된다.
5.7.2 Math객체
수학 공식과 각종 상수를 Math 객체에 저장한다.
Math 객체의 프로퍼티
Math 객체의 프로퍼티는 대부분 수학에서 쓰이는 특별한 상수이다.
min() 과 max() 메서드
min(), max() 메서드는 한 그룹의 숫자중에서 가장 작은 숫자와 가장 큰 숫자를 찾는다.
배열 데이터 중에서 최대값이나 최소값을 찾을 때는 apply() 메서드를 쓸 수 있다.
var values = [1, 2, 3, 3, 4, 5, 6, 7, 8]; var max = Math.max.apply(Math, values);
이 테크닉의 요점은 apply() 의 첫 번째 매개변수로 Math 객체를 넘겨서 this가 정확히 설정되도록 하는것이다.
반올림 메서드
소수점 있는 값을 정수로 바꾸는 반올림 메서드는 Math.ceil()은 올림, Math.floor()는 내림, Math.round()는 반올림이다.
random() 메서드
Math.random() 메서드는 0과 1 사이의 난수를 반환하되 0이나 1을 반환하지는 않는다.
number = Math.floor(Math.random() * total_number_of_choices + first_possible_number)
경우의 수를 세는 것보다 범위만 제공하여 그 사이의 난수를 반환하는 함수를 만드는것이 편하다
function selecForm(lowerValue, upperValue) { var choices = upperValue - lowerValue + 1; return Math.floor(Math.random() * choices + lowerValue); } var num = selectForm(2,10); alert(num); // 2와 10사이의 난수. 2와 10을 포함
var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]; var color = colors[selectFrom(0, colors.length-1)];
브라우저 객체모델 (0) | 2014.11.12 |
---|---|
함수 표현식 (0) | 2014.10.23 |
객체에 대한 이해 (0) | 2014.10.15 |
변수와 스코프, 메모리 (0) | 2014.10.07 |
언어의 기초 (0) | 2014.10.01 |
2014. 10. 16. 13:56 나홀로스터디/JS 완벽가이드
6.1 표현문
6.2 복합문
6.3 if/else
6.4 else if
6.5 switch
6.6 while
6.7 do/while
6.8 for
6.9 for/in
6.10 레이블
6.11 break
6.12 continue
6.13 var
6.14 function
6.15 return
6.16 throw
6.17 try/catch/finally
6.18 with
6.19 빈문장
표현식이란 평가되어 어떤 값을 내줄 수 있는 자바 스크립트 구절이다.
6.1 표현문
할당문이 표현문에 속한다.
i += 3;
++ 와 -- 같은 증감 연산자들은 변수값을 바꾼다는 부수 효과가 있는데 이는 할당이 일어난 것 같은 효과를 보인다.
counter++;
delete 연산자는 객체 프로퍼티를 삭제하므로 문장으로서 쓰이는게 대부분이다.
delete o.x;
표현문의 다른 주요 부류로 함수 호출이 있다.
window.close();
6.2 복합문
하나의 표현식 안에 다수의 표현식을 합칠 때에는 쉼표 연산자를 사용하는데 자바스크립트에서는 하나의 문장에 다수의 문장을 합칠 수 있는 방법도 제공한다. (문장 블록이라고도 부른다)
{ x = Math.PI; cx = Math.cos(x); allert("cos( " + x + " ) = " + cx); }
자바스크립트 인터프리터가 복합문의 모든 문장을 실행한다.
간혹 복합문의 실행 도중 중단되는 것은 복합문 안에 break, continue, return, throw 문장이 있을때 일어난다.
6.3 if/else
조건부로 문장을 실행할 수 있는 기능을 제공하는 기본적인 제어문으로 어떤 조건의 테스트 결과에 따라 둘 중 하나의 코드를 실행하며 형태는 다음과 같다.
if(표현식){ 문장1 } else { 문장2 }
6.4 else if
여러조건의 코드를 실행하기 위한 방법으로 else if문이 있다.
6.5 switch
switch문이 실행되면 '표현식'의 값을 계산하고 이 값에 대응하는 case레이블을 찾는다. 올바른 레이블을 찾으면 case 레이블 직후에 나오는 문장을 실행하고 찾지 못하면 특수 레이블인 default: 레이블 직후의 첫번째 문장을 실행한다. 하나의 case 문에는 하나의 break문을 삽입하는 것을 잊지 말아야 한다.
switch(표현식){ case 1: 코드 블록 #1 실행 break; case 2: 코드 블록 #2 실행 break; defailt: 코드 블록 #3 실행 break; }
대응하는 case를 판별하는 데에는 동등 연산자(==)가 아닌 일치 연산자(===)가 사용된다.
6.6 while
while문은 기본적인 반복문으로서 자바스크립트로 하여금 반복적인 행동을 수행할 수 있게 한다.
while(표현식){ 문장 }
먼저 표현식을 평가한후 그 값이 true이면 while루프의 몸체를 형성하는 문장이 실행되고 표현식이 다시 평가되는데 이것은 표현식이 'false'로 평가됟때까지 반복된다.
6.7 do/while
do/while 루프는 while루프와 비슷하지만 루프 표현식이 테스트되는 곳이 처음이 아니라 마지막이므로 최소 한번은 루프 몸체가 실행된다.
do{ 문장 }while(표현식);
루프 조건을 명시하며 끝나기 때문에 while문과 다르게 세미콜론을 붙인다.
6.8 for
이 변수는 시작하기전 초기화되고 표현식을 평가하고 루프 몸체의 끝에서 표현식이 다시 평가되기 직전에 카운터 변수가 증가되거나 갱신된다.
for(초기화; 테스트; 증가){ 문장 }
자바스크립트는 '초기화' 자리에 var에 의한 변수 선언문도 허용하고 있기 대문에 루프 카운터를 선언하는 동시에 초기화할 수도 있다.
'테스트' 표현식은 매회 반복이 일어나기 직전에 평가되며 루프의 몸체를 실행할지 여부를 제어하는데 표현식이 true이면 루프 몸체의 '문장'이 실행된다.
'증가' 표현식은 할당 표현식이거나 ++나 -- 연산자를 사용하는 표현식이다.
6.9 for/in
배열의 모든 원소에 대하여 루프를 돌리려면 간단히 인덱스 변수를 증가시키면서 while 이나 for 루프를 돌리면 된다.
for/in 문은 객체의 모든 프로퍼티에 대해 루프를 돌리는 방법을 제공한다.
for (변수 in 객체){ 문장 }
'변수'는 변수이름 또는 변수/배열 객체/객체 프로퍼티를 선언하는 var문이어야 한다.
'객체'는 객체이름 또는 객체로 평가될수 있는 표현식이어야 한다.
'문장'은 루프의 몸체를 구성하는 문장 또는 문장 블록이어야 한다.
for/in 루프에서 객체 프로퍼티들이 변수에 할당되는 순서는 정해져있지 않고 사용자 정의 프로퍼티들과 상속된 사용자 정의 프로퍼티는 모두 열거되지만 많은 수의 내장 프로퍼티는 열거되지 않는다.
6.10 레이블
어떤 문장에라도 그 앞에 식별자 이름과 콜론을 삽입함으로써 레이블을 붙일 수 있다.
식별자: 문장
예약어를 제외한 모든 적법한 자바스크립트 식별자는 '식별자'가 될 수 있고 레이블 이름은 변수나 함수 이름과는 전혀 별개로 취급되므로 충돌을 걱정할 필요는 없다.
어떤 문장에 레이블을 붙이면 프로그램의 다른 곳에서 그문장을 참조할 수 있는 이름이 생기는 것이다.
레이블을 붙이는 문장은 while, do/while, for, for/in과 같은 루프뿐이다.
6.11 break
break의 역할은 루프나 switch에서 빠져나오게 하는것이므로 break문을 사용하는 것은 오직 루프나 switch문에서만 적법하다.
자바스크립트에서는 break 키워드 뒤에 레이블 이름이 따라올 수 있는데 break와 레이블 사이에서 줄을 나누면 세미콜론을 자동 삽입하는 특징때문에 줄바꿈이 허용되지 않는다.
6.12 continue
continue문 역시 레이블과 함께 쓰일수 있는데 단독형식과 레이블에 상관없이 항상 while, do/while, for, for/in 루프의 몸체 내부에서 사용되어야만 한다.
이 구문이 실행되면 이를 감싸고 있던 루프의 현재 반복을 종료하고 다음 반복을 시작하는데 이때 루프의 종류에 따라 다른일이 일어난다.
- while : 시작부분에 지정된 '표현식'을 다시 테스트하고 결과가 true이면 루프 몸체부터 다시 실행한다.
- do/while : 일단 루프의 끝부분까지 건너뛰고 다시 테스트하여 결과가 true이면 루프 몸체부터 다시 실행한다.
- for : '증가'표현식을 평가한 후 '테스트' 표현식을 테스트하여 다음 반복 수행을 결정한다.
- for/in : 다음 차례의 프로퍼티 이름을 루프 시작에서 지장된 변수에 할당한 후 다시 시작한다.
while 루프는 루프 조건으로 곧장 귀환하는 반면 for 루프는 일단 '증가' 표현식을 평가한 후에 루프 조건으로 귀환한다.
6.13 var
var문은 명시적으로 하나 또는 그 이상의 변수를 선언하는데 쓰인다.
var 이름_1[ = 값_1] [ , .... , 이름_n[ = 값_n]]
함수 내부에서 사용되는 var 문은 해당 함수의 호출 객체에 주어진 변수 이름의 프로퍼티를 생성함으로써 변수를 정의하고 함수 외부에서 나타난것이라면 전역 객체에 마찬가지로 프로퍼티를 생성함으로써 변수를 정의한다.
var 문에 의해 생성되는 프로퍼티는 delete 연산자로 삭제될 수 없고 변수에 초기값을 지정하지 않으면 변수 정의는 되지만 초기값은 undefined가 된다.
6.14 function
fonction문은 자바스크립트 함수를 정의하는데 쓰인다.
function 함수 이름([전달인자1[전달인자2[..., 전달인자n]]]){ 문장 }
함수 몸체는 임의 개수의 자바스크립트 문장으로 구성되고 중괄호를 사용하여 문장들을 묶는다.
이 문장들은 함수가 정의 될때 실행되는것이 아니고 실행 연산자()에 의한 함수 호출로 이 함수가 컴파일되고 실행될 수 있는 형태의 새로운 함수 객체와 연결되었을때 실행된다.
함수를 정의할 때 다른 함수 정의 속에 중첩시킬수 있는데 if문, while문, 기타 문장 속에는 함수 정의가 위치할수 없다.
자바스크립트 프로그램에서 문장은 동적인 행위를 일으켜야 하는데 함수 정의의 function 문은 정적인 구조를 나타내므로 원칙적으로는 문장이 아니다.
함수는 자바스크립트 코드가 실제로 실행되기 이전의 파싱 또는 컴파일 단계에서 정의된다.
자바스크립트 파서가 함수 정의를 만나면 함수 몸체를 이루는 문장들을 파싱하고 저장한다.(실행하지 않는다)
그리고나서 이 함수를 유지할 프로퍼티를 이 함수와 동일한 이름으로 정의한다.
6.15 return
return문은 함수 호출 표현식의 값, 즉 함수에서 반환되는 값을 지정하는데 쓰이므로 함수 몸체 내부에서만 나타날 수 있다.
return 표현식;
함수에서 '표현식'이 없는 return문을 실행하거나 함수 몸체 끝에서 함수가 반환된다면 해당 함수의 표현식의 값은 undefined가 된다.
6.16 throw
'예외'란 무언가 예외적인 상황이나 에러가 발생했음을 가리키는 신호로 예외를 '발생시키다(throw)'라는 것은 그런 에러나 예외 상황을 알린다는 뜻이고 예외를 '잡아내다(catch)'라는 것은 그것을 처리한다는 뜻이다.
자바스크립트에서는 런타임 에러가 일어날 때마다 예외를 발생시키고 프로그램에서 throw문을 사용하여 명시적으로 예외를 발생시킬수도 있다.
throw 표현식;
'표현식'의 결과값 타입은 무엇이든 될수 있지만 대부분 타입은 Error 객체 또는 Error 하위 클래스 중 하나의 인스턴스가 되곤한다.
6.17 try/catch/finally
try/catch/finally 문은 자바스크립트 예외 처리 기법이다.
try 절은 처리할 예외가 발생할지도 모를 코드 블록을 정의하는 역할을 하고 catch 절은 try 블록 내부에서 예외가 발생하는 경우 호출되는 문장 블록이다. finally 블록은 try 블록에서 일어난 일에 관계없이 항상 실행이 보장되어야할 뒷정리용 코드가 포함된다.
catch나 finally 블록은 생략할 수 있지만 try 블록은 catch나 finally 중 적어도 하나 이상의 블록과 함께 사용되어야만 한다.
6.18 with
with 문은 유효 범위 체인(변수 이름 판별을 위해 순서대로 검색되는 객체 리스트)을 임시로 변경할때 쓰인다.
with(객체)
문장
with에 의해 추가된 객체는 일시적으로 유효 범위 체인의 일부가 되기때문에 실제 코딩에서 with문을 사용하면 많은 양의 타이핑을 절약할 수 있다
폼접근법
frames[1].document.forms[0].address.valuewith(frames[1].document.forn[0]){ name.value =""; adress.value=""; email.value=""; }
with를 사용하는 자바스크립트 코드는 최적화가 어렵기 때문에 코드가 느리게 실행될 수 있으므로 아래와 같은 방법을 추천한다.
var form = frame[1].document.forms[0]; form.name.value = ""; form.address.value = ""; form.email.value = "";
6.19 빈문장
빈문장은 몸체가 없는 루프를 생성할때 유용하게 쓰인다.
6.20 자바스크립트 문장 요약