'나홀로스터디/JS 완벽가이드'에 해당되는 글 13건

함수

2014. 10. 27. 11:42 나홀로스터디/JS 완벽가이드


8장 함수

이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
 
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() 생성자의 가장 중요한 점은 생성된 함수가 어휘적 유효 범위를 사용하지 않는다는 것이다.


 

'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글

문서 스크립팅  (0) 2014.11.26
웹 브라우저와 자바스크립트  (0) 2014.11.18
객체와 배열  (0) 2014.10.20
문장  (0) 2014.10.16
표현식과 연산자  (0) 2014.10.13

객체와 배열

2014. 10. 20. 17:37 나홀로스터디/JS 완벽가이드


7장 객체와 배열

이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
 
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를 반환하는 원소들로 구성된 배열을 반환

 

 

 


 

'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글

웹 브라우저와 자바스크립트  (0) 2014.11.18
함수  (0) 2014.10.27
문장  (0) 2014.10.16
표현식과 연산자  (0) 2014.10.13
변수  (0) 2014.10.07

문장

2014. 10. 16. 13:56 나홀로스터디/JS 완벽가이드


6장 문장

이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
 
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.value

 with(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 자바스크립트 문장 요약


 

'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글

함수  (0) 2014.10.27
객체와 배열  (0) 2014.10.20
표현식과 연산자  (0) 2014.10.13
변수  (0) 2014.10.07
데이터 타입과 값  (0) 2014.10.01

표현식과 연산자

2014. 10. 13. 13:12 나홀로스터디/JS 완벽가이드


5장 표현식과 연산자

이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
 
5.1 표현식
5.2 연산자 개요
5.3 산술 연산자
5.4 동등 연산자
5.5 관계연산자
5.6 문자열 연산자
5.7 논리 연산자
5.8 비트 단위 연산자
5.9 할당 연산자
5.10 기타 연산자들


5.1 표현식
표현식이란 자바스크립트 인터프리터가 계산하여 값을 구할 수 있는 자바스크립트 구절로 가장 간단한 표현식은 리터럴 또는 변수의 이름이다.  리터럴 표현식의 값은 그 리터럴 값 자신이고 변수 표현식의 값은 해당 변수가 저장하거나 참조하는 값이다.



5.2 연산자 개요
대부분의 연산자는 + 나 - 와 같은 문장부호로 표현되지만 일부는 delete나 instanceof와 같이 키워드로 표현된다.


5.2.1 피연산자 개수

2항 연산자는 두 개의 표현식을 조합하여 하나의 더 복잡한 표현식으로 만들어 내기도 하고 단항 연산자를 지원하기도 한다.

5.2.2 피연산자 타입

피연산자 표현식을 작성할 때는 연산자에 전달되는 데이터 타입과 반환되는 데이터 타입을 주의해야 한다.
'a', 'b' 와 같은 문자열은 곱할수 없지만 자바스크립트에서는 가능한 적절한 타입으로 표현식을 반환하려고 시도한다.
+ 연산자는 숫자 타입 피연산자들에 대해 덧셈을 하지만 문자열타입 피연산자들끼리는 이어 붙이기를 한다.
비교 표현식을 평가하면 언제가 그 비교가 참인지 거짓인지 가리키는 기본 불리언 타입 값을 얻는다.

5.2.3 연산자 우선순위
연산자 우선순위란 연산이 수행되는 순서를 말한다. 원래 정해진 연산자 우선순위를 바꾸려면 확실하게 괄호를 쓰면된다.

5.2.4 연산자 결합 방향

단항, 할당, 3항 비교 연산자들의 결합 방향은 오른쪽에서 왼쪽으로 이루어진다.



5.3 산술 연산자

덧셈( + )
+ 연산자는 숫자 타입 피연산자의 덧셈이나 문자열 타입 피연산자의 이어 붙이기에 쓰이는데 만일 하나의 피연산자가 문자열이라면 나머지 하나의 피연산자를 문자열로 변환한후 이어붙인다.  객체 피연산자는 더하거나 이어 붙일수 있게 숫자나 문자열로 변환하는데 이 변환은 객체의 valueOf() 메서드나 toString() 메서드에 의해 수행된다.

뺄셈( - )
- 연산자가 2항 연산자로 쓰일 경우 첫 번째 피연산자에서 두번째 피연산자를 뺀다. 피연산자가 숫자타입이 아닐경우 먼저 숫자타입으로 변환을 시도한다.

곱셉( * )
* 연산자는 두 연산자를 곱하는데 피연산자가 숫자타입이 아니라면 먼저 숫자타입으로 변환을 시도한다.

나눗셈( / )
/ 연산자는 첫번째 연산자를 두번째 연산자로 나누는데 피연산자가 숫자타입이 아니라면 먼저 숫자타입으로 변환을 시도한다.
자바스크립트에서는 모든 숫자가 부동소수점으로 취급된다.
0으로 나누는 연산결과는 양의 무한대, 또는 음의 무한대가 되며 0/0의 결과는 NaN이 된다.

나머지( % )
% 연산자는 첫번째 피연산자를 두번재 피연산자로 나누고 남은 나머지를 반환한다. 피연산자가 숫자타입이 아닌경우 먼저 숫자타입으로 변환을 시도한다.

단항 마이너스( - )
- 가 하나의 피연산자 앞에서 단항 연산자로 쓰이면 단항 부정을 수행한다.
양수값을 같은 크기의 음수값으로, 음수값은 같은 크기의 양수 값으로 바꾼다.

단항플러스( + )
숫자 리터럴 부호를 명시적으로 지정할수 있게 해준다.
+ 연산자는 전달인자를 숫자 타입으로 변환하는 효과가 있고 전달인자가 변환될수 없는 경우 NaN을 반환한다.

증가( ++ )
++ 연산자는 단항 피연산자에 대해 증가 연산을 수행하는데 피연산자는 변수, 배열, 원소 또는 객체 프로퍼티 중 하나여야한다. 이것이 아닐경우 ++ 연산자는 일단 숫자타입으로 변환을 시도한다.
이 연산자의 정확한 작동은 피연산자의 어느쪽에 연산자가 놓여 있는가에 따라 앞에서 사용될 경우 전치증가 연산자라 부르며 피연산자의 뒤에서 사요오딜 경우 후치증가 연산자라고 부른다.

감소( -- )
-- 연산자는 단항 피연산자에 대해 감소 연산을 수행한다.



5.4 동등 연산자
== 연산자와 === 연산자 모두 두 값이 같은지 확인하는데 쓰이지만 '같다' 는 것을 정의하는 기준이 서로 다르다.
두 연산자 모두 피연산자의 타입을 가리지 않으며 주어진 피연산자가 같으면 true 를, 다르면 false 를 반환한다는 점에서 공통적이다. = 는 '취하다' 또는 '할당하다',  == 는 '~와 동등하다', === 는 '~와 일치한다'라고 읽는다.

반면 객체, 배열, 함수는 '참조에 의해' 비교된다. 두 변수가 같은 객체를 참조할 때에만 이 두 변수는 동등하다고 말하는 것이다.

5.4.2 부등(!=)과 불일치(!==)

부등 연산자 != 는 두 값이 서로 동등할 경우 false를 반환하며 그렇지 않을 경우 true를 반환한다.
불일치 연산자 !== 는 두 값이 서로 일치할 경우 false를 반환하며 그렇지 않을경우 true를 반환한다.




5.5 관계연산자
이 연산자들은 두 값의 관계를 테스트하고 해당 관계가 존재하는지 여부에 따라 true 또는 false를 반환한다.

5.5.1 비교 연산자
비교연산자는 두 값의 상대적인 순서를 판단하는데 쓰인다.

더 작다(<)
더 크다 (>)
더 작거나 같다(=<)
더 크거나 같다(<=)

문자열이 비교될 때에는 Unicode로 인코딩 된 각 문자에 해당하는 숫자값 기준으로 엄격히 문자대 문자로 비교된다.
인코딩 차이와 같은 다양성을 고려하는 문자열 비교 알조리즘으로 String.localeCompare() 메서드가 있다.


5.5.2 in 연산자
in연산자는 좌변의 피연산자로 문자열을 받는다. 우편의 피연산자로는 객체나 배열을 받는다.

5.5.3 instanceof 연산자
instanceof 연산자는 좌변의 피연산자로 객체를, 우변의 피연산자로 객체 클래스의 이름을 받는데 좌변 객체가 우변 클래스의 인스턴스일 경우 연산 결과는 true 이고 그렇지 않을 경우 false이다.




5.6 문자열 연산자
+ 연산자는 두 문자열 피연산자를 이어 붙인다.
<, <=, >, >= 연산자들은 두 문자열을 비교하여 그 순서를 판단하는데 비교의 기준은 알파벳 순서다.
+ 연산자는 숫자 피연산자보다 문자열 피연산자에 우선권을 부여한다.




5.7 논리 연산자

5.7.1 논리 AND(&&)
&& 연산자가 불리언 피연산자에 대해 쓰일 경우 이 연산자는 두 값에 대한 불리언 AND를 수행하고 첫번째 피연산자와 두번째 피연산자가 모두 'true' 일 경우에만 연산결과로 true를 반환하므로 좌변 표현식의 값에 따라 우변 표현식을 평가할 수도 있고 평가하지 않을수도 있다.

5.7.2 논리 OR(||)
|| 연산자가 불리언 피연산자에 대해 쓰일 경우 이 연산자는 두 값에 대한 불리언 OR을 수행하고 두 피연산자중 하나가 true 이거나 둘 다 true 일 경우 연산결과로 true를 반환한다.

5.7.3 논리 NOT(!)
! 연산자는 단항 연산자로 이 연산자는 단일 피연산자 앞에 놓인다.  이 연산자의 목적은 피연산자의 불리언 값을 반전, 즉 반대로 바꾸는 것이다.




5.8 비트 단위 연산자
비트 단위 연산자가 작용하는 것은 32비트 정수 표현법이다.




5.9 할당 연산자
= 연산자는 오른쪽 값을 왼쪽의 변수, 배열 원소, 객체 프로퍼티 등에 할당하므로 앞으로 이 변수, 원소, 프로퍼티 등을 사용하면 그 할당된 값을 참조하는 것이 된다.

할당 연산자의 연산자 결합 방향은 오른쪽에서 왼쪽이고 각 할당 표현식의 값은 우변의 값과 같다. 
  

i = j = k = 0;  





5.10 기타 연산자들

5.10.1 조건부 연산자(?:)
자바스크립트의 유일한 3항 연산자이다.
첫번째 연산자는 ? 앞에 위치하고 두번째는 ? 와 : 사이에 위치하며 세번재는 : 뒤에 위치한다.

x > 0 ? x * y : -x *  y; 

조건부 연산자의 첫번째 피연산자는 불리언 값이어야 하고 조건부 연산자가 반환하는 값은 첫 번째 피연산자의 불리언 값에 의해 결정되는데 그값이 true이면 조건부 표현식의 값은 두 번째 피연산자의 값이 되고 첫번재 피연산자의 값이 false이면 조건부 표현식의 값은 세 번재 피연산자의 값이 된다.

5.10.2 typeof 연산자
typeof 연산자는 단일 피연산자 앞에 위치하는 단항 연산자로 피연산자는 아무 타입이라도 무방하다.
이 연산자의 값은 피 연산자의 데이터 타입을 가리는 문자열로 피연산자가 숫자, 문자열, 불리언 값일 경우 typeof 연산자의 결과도 그에따라 "number", "string", "boolean" 이 된다. 객체, 배열, null에 대해서는 "object" 를 반환한다. 함수 타입의 피연산자에 대해서는 "function" 을, 정의되지 않은 피연산자는 "undefined"를 반환한다.

5.10.3 객체 생성 연산자(new)
new 연산자는 새로운 객체를 생성하고 이를 초기화하기 위한 생성자 함수를 호출한다.

new constructor(arguments); 

constructor는 반드시 생성자 함수로 평가되는 표현식이어야 하고 이에 따르는 전달인자는 괄호로 감싸야 하며 전달인자가 두개 이상일때는 쉽표로 구분한다. new 연산자에만 해당하는 특수한 경우로 자바스크립트에서는 함수 호출에 전달인자가 없을 경우 괄호를 생략할수 있는 간단한 문법을 지원한다.

o = new Object;  // 선택적으로  쓸수 있는 괄호가 생략됨
d = new Date();   //  현재 시간을 나타내는 Date 객체 반환
c = new Rectangle(3.0, 4.0, 1.5, 2.75)   // Rectangle 클래스의 객체 생성
obj = new constructor[i](); 

 
5.10.4 delete 연산자

delete 는 단항 연산자이며 피연산자로 지정된 객체 프로퍼티, 배열 원소 또는 변수의 삭제를 시도하는데 피연산자가 성공적으로 삭제되었을 경우 true를 반환하고 삭제될수 없는 경우 false를 반환한다.
한가지 중요한 점은, delete가 영향을 미치는 것은 오직 프로퍼티 뿐이며 해당 프로퍼티가 참조하고 있떤 객체는 무관하다는 것이다.

5.10.5 void 연산자
void는 단일 피연산자 앞에 쓰이는 단항 연산자로 피연산자의 타입은 아무 타입이라도 관계없다.
이 연산자는 피연산자의 값을 무시하고 undefined를 반환한다. 가장 일반적인 사용처는 클라이언트 측의 javascript: URL 사용으로 브라우저에 평가된 값을 표시하지 않으면서 표현식을 평가할 수 있게 해준다.

5.10.6 쉼표 연산자(,)
쉼표연산자는 왼쪽의 전달인자를 평가하고 오른쪽의 전달인자를 평가한 후 오른쪽 전달인자 값을 반환한다.

i = 0, j = 1, k = 2;

i = 0; j = 1; k = 2;

하나의 표현식만 허락되는 상황에서 부수 효과가 일어나는 다수의 개별 표현식들을 평가해야 할 경우에 사용한다.

5.10.7 배열과 객체 접근 연산자
배열 원소에 접근하는데에는 대괄호 [] 를 사용하고 객체의 원소에 접근하는 데에는 마침표(.)를 사용하면 된다.
[] 와 마침표(.) 모두 자바스크립트 연산자로 취급된다.
연산자는 좌변 피연산자로 객체를 받으며, 우변 피연산자로는 식별자(프로퍼티 이름)를 받는다. 우변 피연산자는 프로퍼티나 메서드의 이름에 해당하는 리터럴이어야 한다.

document["lastMdfified"]
frame[0]['length']
data["val" + i ] 

[]는 보통 배열의 원소에 접근하는데 사용된다. 프로퍼티 이름을 따옴표로 인용해야 하므로 객체 프로퍼티에 접근하는 용도로는 마침표(.) 연산자보다 불편한데 객체가 연관배열로 사용될경우 프로퍼티 이름이 동적으로 생성되며 이 경우에는 오직 [] 연산자만 사용할 수 있다.

5.10.8 함수 호출 연산자
() 연산자는 자바스크립트에서 함수 호출에 사용되고 피연산자의 개수가 정해져 있지 않다.

'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글

객체와 배열  (0) 2014.10.20
문장  (0) 2014.10.16
변수  (0) 2014.10.07
데이터 타입과 값  (0) 2014.10.01
어휘구조  (0) 2014.09.24

변수

2014. 10. 7. 18:02 나홀로스터디/JS 완벽가이드


4. 변수

이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
 
4.1 변수타입
4.2 변수선언
4.3 변수의 유효범위
4.4 기본타입과 참조타입
4.5 가비지 컬렉션
4.6 변수와 프로퍼티
4.7 변수의 유효 범위(재해석)

변수는 프로그램에서 쓰이는 데이터 값을 저장하고 다루는데 사용된다.


4.1 변수타입
자바스크립트 변수는 타입이 고정되어 있지 않아 어떠한 데이터 타입의 값이라도 담을수 있다.


4.2 변수선언
자바스크립트에서 어떤 변수를 사용하려면 일단 그 변수를 선언해야만 하는데 만일 변수의 초기값을 지정하지 않을 경우 선언은 되지만 값이 저장되기 전까지 값은 undefined이다.

4.2.1 변수 선언의 반복과 생략
var 구문으로 같은 이름의 변수를 여러번 선언해도 무방하다.
var 구문으로 선언되지 않은 변수에 값을 할당하려 하면 자바스크립트가 암묵적으로 그 변수를 선언하게 되며 그 변수는 항상 전역 변수로 선언된다.

4.3 변수의 유효 범위
프로그램에서 그 변수가 정의되어 있는 영역을 맒한다. 전역변수의 유효 범위는 전역적이고 반면 어떤 함수안에서 선언된 변수는 오직 그 함수 안에서만 정의된다. 이런 변수를 지역변수라고 부르며 유효 범위도 지역적이다.
함수 내부에서는 지역 변수가 같은 이름의 전역 변수보다 우선적으로 사용된다.

4.3.1 블록 단위의 유효 범위는 없다.
함수 안에서 정의된 변수는 그것이 정의된 위치에 관계없이 항상 함수 전체에 걸쳐 유효하다.
지역변수는 함수 전체에 걸쳐서 정의되어 있지만 var 문이 실행되고 나서야 실체로 초기화 된다.

4.3.2 정의되지 않은 변수 vs 할당되지 않은 변수
선언되지 않은 변수를 읽으려고 하면 런타임 오류가 발생한다. 그러나 정의되지 않은 변수에 값을 할당할 때는 에러가 발생하지 않는다. 이경우에는 암묵적으로 해당 변수가 전역의 유효범위로 선언된다.

선언은 되었으나 아직 값이 할당되지 않은 변수를 읽으려고 하면 그 변수의 초기값 'undefined' 를 얻게 된다.


4.4 기본 타입과 참조 타입
고정된 메모리를 차지하는 기본 타입은 숫자, 불리언 값, null, undefined 이  있고, 참조타입은 객체(object), 배열, 함수가 있다.
기본 타입의 경우 변수에 실제 값이 저장되지만 참조 타입은 단지 참조만이 저장된다.


4.5 가비지 컬렉션
참조 타입은 크기가 고정되어 있지 않으므로 동적으로 할당되어야 하는데 자바스크립트에서는 프로그래머가 수동으로 메모리를 해제하도록 강제하지 않는 대신 가비지 컬렉션이라 불리는 기술에 의존한다.


4.6 변수와 프로퍼티
변수와 객체 프로퍼티는 같은 방법으로 할당되고 자바스크립트 표현식에서 동일한 방법으로 사용딘다.

4.6.1 전역 객체
자바스크립트 인터프리터가 구동되면 자바스크립트 코드를 실행하기 전에 전역객체를 생성하면서 미리 정의된 값들과 함수들을 참조하는 다수의 프로퍼티들을 초기화한다.
최상위코드, 즉 어떤 함수에도 속하지 않은 코드에서는 자바스크립트의  this 키워드를 사용해서 전역객체를 참조할수 있다.

4.6.2 지역변수 : 호출객체
지역변수는 어떤 객체의 프로퍼티에 해당하고 이 객체를 일컬어 호출 객체(call object)라고 부른다.
호출객체는 전역 객체에 비해 수명이 짧지만 쓰이는 목적은 동일하며 함수를 실행하는 동안 그 함수의 전달인자와 지역변수는 이 호출 객체의 속성으로 저장된다.

4.6.3 자바스크립트 실행 컨텍스트
실행 컨텍스트는 자바스크립트 코드가 실행되고 있는 컨텍스트를 말한다.




4.7 변수의 유효 범위(재해석)
모든 자바스크립트 실행 컨텍스트에는 유효 범위 체인(scope chain) 이라는 것이 있다.



 

'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글

문장  (0) 2014.10.16
표현식과 연산자  (0) 2014.10.13
데이터 타입과 값  (0) 2014.10.01
어휘구조  (0) 2014.09.24
자바스크립트 소개  (0) 2014.09.23
Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET