[자바스크립트 완벽가이드] 3장. 데이터 타입과 값
프로그램 언어로 표현할 수 있고 조작할 수 있는 값의 종류.
즉, 기본 데이터 타입인 숫자, 텍스트의 나열(문자열(string)) 불리언 값(Boolean), Null값, Undefined값을 정한다.
그외 객체(object), 배열(array), 함수(function)이 있다.
1. 숫자
자바스크립트는 모든 숫자는 실수로 표현된다.
IEEE754표준에 의해 정의 되는 64비트 실수 형식을 사용한다.
범위 : ±1.7976931348623157 X 10^308 ~ ±5 X 10^-324
자바스크립트 프로그램 내에 바로 나타날 때 이를 숫자 리터럴 이라고 한다.
자바스크립트는 표현 가능한 유한 수보다 더 큰 값의 무한대를 나타내는 특수한 값 infinity로 표현하며 비슷하게 음수 값의 경우는 -infinity라고 표현한다….
또한 수리연산(0/0과 같은 경루) 정의되지 않은 결과를 산출 하거나 에러를 발생시킬 경우는 NaN 이라고 출력 (이부분은 이해를 몬하겠다…..진심…)
<script type="text/javascript">
//isNaN()테스트
alert(0/0); // NaN 노출
alert(10/0); // infinity 노출
</script>
1-1. 정수 리터럴
Pass 하겠다…;;;; 10진수 16진수 8진수를 알아야 하므로 넘겨버리겠다. 아니 숫자를 패스 하겠다. 시간 나면 하겠다.
1-2. 16진수와 8진수
1-3. 부동소수점 리터럴
1-4. 숫자 조작
1-5. 숫자 변환
1-6. 특수한 숫자 값
2. 문자열(string)
텍스트를 표현하는 자바스크립트 데이터 타입
단일 문자를 표현하려면 간단히 길이가 1인 문자열을 사용하면 된다.
2-1. 문자열 리터럴
작은 따옴표 또는 큰따옴표로 둘러 싸인 문자다. 문자열 리터럴은 한줄을 넘지 말아야 한다.
줄바꿈문자를 포함 시키도 싶다면 \n을 사용하라.
<script type="text/javascript">
//문자열 리스트
"" : 빈 문자열: 문자가 없다.
'testing'
"3.14"
'name="myform"'
"Wouldn't you prefer O'Reilly's books?"
"This string\nhas two lines" : 두줄짜리 문자열
//예제
<a href="#" onclick"alert('hellow');">Click Me</a>
</script>
2-2. 문자열 리터럴 내 이스케이프 시퀀스
역슬래시 문자(\)에 대해 표현한다.
| 시퀀스 | 표현하는 문자 |
|---|---|
| \0 | 널 문자(\u0000). |
| \b | 백스페이스(\u0008). |
| \t | 수평 탭(\u0009). |
| \n | 줄바꿈문자(\u000A). |
| \v | 수직탭(\u000B). |
| \f | 폼리드(\000C). |
| \r | 캐리지리턴(\000D). |
| \” | 큰따옴표(\u0022). |
| \’ | 작은따옴표(\u0027). |
| \\ | 역슬래시(\u005C). |
| \xXX | 개의 16진수 숫자 XX에 의해 지정되는 Latin-1문자. |
| \uXXXX | 네개의 16진수 숫자 XXXX에 의해 지정되는 Unicode문자. |
| \XXX | 1과 377 사이의 8진수 숫자 XXX의해 지정되는 Latin-1문자. ECMAScript v3에서 지원하지 않는다. 이 이스케이프 시퀀스 비추 |
2-3. 문자열 조작
여러 문자열을 이어 붙이는 것.
숫자에 + 문자열을 넣으면 더하기가 되지만, 문자에 +를 넣으면 글자가 합쳐진다.
<script type="text/javascript">
//문자열 조작
alert ('Hellow,' + 'world'); // 문자가 합쳐서 나온다.
var name = 1;
alert('Welcome' + '' + name); // 문자와 숫자사 합쳐서 나온다.
</script>
문자열 길이를 알고 싶으면 length를 쓰면 알수 있다.
<script type="text/javascript">
//문자열 길이
var name = 'Come Back Home';
alert(name.length); // name의 문자열 길이 표출
</script>
그리고 마지막 문자를 가지고 올려면
<script type="text/javascript">
// 마지막 문자 가지고 오기
var name = 'Come Back Home';
last_char = name.charAt(name.length - 1);
alert(last_char);
</script>
문자열에서 두 번째, 세 번째, 네 번째, 다선번째, 여섯번째 문자를 추출할려면
<script type="text/javascript">
// 문자 추출
var name = 'Come Back Home';
alert(name.substring(1,6));
</script>
문자열에서 ‘C’ 문자의 위치를 찾아낼려면
<script type="text/javascript">
// 문자 위치 찾기
var name = 'Come Back Home';
alert(name.indexOf('C'));
</script>
이외에도 문자열 조작에 사용할 수 있는 여러가지 메서드들이 있지만 자세한 설명은 3부에 한다고 하여 Pass 하기로 했다.(이거 말고도 아직 할께 무진장 많음…ㅜㅜ)
그리고 쓰지 말아야 하는 방법도 있는데….이것도 패스 하겠다…굳이 쓰지 말라는데 필요가 없는거 같다.
2-4. 숫자를 문자열로 변환하기
숫자는 필요할때 문자열로 자동으로 변환이 가능하다.
<script type="text/javascript">
// 숫자를 문자로 변환
var n = 100;
var s = n + ' bottles fo bear on the wall';
</script>
이런식의 내용이다.
이부분에서 많은 내용이 들어가 있긴한데 뭔내용인지 몰라서 일단 적어놓고 물어볼란다…;;; 역시 개발책이다 보니 모르는거 투성…;;;-_-;;;
<script type="text/javascript">
// 질문
var n = 17;
alert(n.toString(2)); // 2진법 계산???
alert(n.toString(8)); // 8진법 계산???
alert(n.toString(16)); // 16진법 계산???
</script>
여기서 모르므로 패스
2-5. 문자열을 숫자로 변환하기
말그대로 문자가 숫자로 인식이 되는 부분을 말하는 거다
alert(’22′*’2′);
원래라면 22*2 이런식으로 나오는데 이걸 숫자로 인식하여
곱셈이 완료 된다.
<script type="text/javascript">
// 질문
alert('22'*'2'); //44가 나옴
</script>
글이 어려워서 쉽게 만들어 보았다….이게 정확한 내용은 아니지만 아무래도 이거랑 비슷할꺼 같다. 아까전꺼 length를 이용해 보겠다.
<script type="text/javascript">
var i = "hellow how are you";
var iN = i.length;
alert('50'*iN);
</script>
맞겠지 뭐…;;
그외 여러가지 코드가 있는데 생략을 하겠다…;;;(어려움)
<script type="text/javascript">
var nm = parseInt('10.14 meters'); // 10호출
var nm1 = parseFloat('10.14 meters'); // 10.14 호출
var nm2 = parseInt('0xFF'); // 255호출
alert(nm);
alert(nm1);
alert(nm2);
</script>
3. 불리언 값
숫자나 문자열 데이터 타입은 유한개의 많은 값을 표현할 수 있거나(숫자의 경우)
무한개의 값을 표현할 수 있다.(문자의 경우)
하지만 불리언 같은 경우는 True(진실), False(거짓)이냐의 타입 으로만 표현한다.
<script type="text/javascript">
var i = 5
if (i == 0){
alert('oh~~!!');
} else {
alert('yes~~!!');
}
</script>
3-1. 불리언 타입 변환
문자열이 숫자 문맥에 사용되면 자동으로 숫자로 변환된다.
만약 불리언 값이 숫자 문맥에서 사용 한다면 숫자1은 True 숫자0은 False로 변환 된다.
만약 불리언 값이 문자 문맥에서 사용 한다면 “True”는 True “False”는 False로 변환 된다.
숫자가 불리언 값을 기대하는 곳에서 사용 되면 0이나 NaN이면 False로 나머지는 True로 변환 된다.
문자가 불리언 값을 기대하는 곳에서 사용 되면 null과 undifined는 False로 기타 null이 아닌 객체나 배열, 함수는 True로 변환 된다.
4. 함수(Function)
책에 나온 내용은 너무 머리아프고 복잡하여… 여러개의 사이트를 돌아보면서 작성했다.
함수란, 프로그램을 구성하는 기본적인 벽돌글과도 같아서, 코드의 목적을 좀 더 알기쉽게 하고 필요할때마다 재사용할 수 있게 해준다.
프로그램의 동작을 작은 조각들로 분리하고 그 조각들이 명료하게 한가지 일만 하게끔 한다면 프로그램을 작성하는 것은 좀 더 쉬워질 것이다.
또한, 코드를 유지 관리하는 것 역시 쉬워진다. 하나의 수정으로 전체가 수정할수 있는… 즉, css가 페이지 전체에 걸쳐 스타일을 적용하는 것 과 흡사하다.
그러므로 유지보수가 쉬워진다.
자바스크립트 프로그램에서는 다음과 같은 형태로 자신만의 함수를 정의 할 수 있다.
<script type="text/javascript">
// 함수
function square(x) { // function 함수명(인자명)
return x*x; // return 반환값 (인자명의 제곱한 값을 반환 한다.
} // 여기서 끝
</script>
4-1. 함수 리터럴
함수 리터럴은 function 키워드, 함수 이름(생략할수도 있다), 괄호로 둘러싸인 함수 전달인자 목록, 마지막으로 중괄호로 구성된다.
<script type="text/javascript">
// 함수
function square(x) { // function 함수명(인자명)
return x*x; // return 반환값 (인자명의 제곱한 값을 반환 한다.
} // 여기서 끝
</script>
이걸 함수 리터럴을 사용하면
<script type="text/javascript">
// 함수
var square = function(x) {
return x*x;
}
</script>
이런 함수 리터럴을 람다 함수 (Lambda Function)이라고 하는데 고급 스크립트를 작성할 때 함수 리터럴이 꽤나 편리하고 유용하게 사용될 수 있다는것을 나중에 보여 준단다…;;;
다른방법으로는 Function() 괄호 안에 전달하는 것인데…
<script type="text/javascript">
// 함수
var square = new function('x', 'return x*x;');
</script>
이런 방법이 있지만 함수 몸체를 문자열로 표현하는 것이 불편하기도 하고 많은 수의 자바스크립트 구현에서 이러한 식으로 전의된 함수는 다른 두 방법으로 정의된 함수보다 많은 비효율적으로 작동한다.
5. 객체(Object)
객체는 이름 붙은 값들의 모음이다. 이 이름 붙은 값들은 객체의 프로퍼티(property)라고 부른다.
예를 들어 image라는 이름의 객체에 width와 height라는 프로퍼티 두 개아 있다면 다음과 같은 방식으로 참조 하면 된다.
<script type="text/javascript">
// 프로퍼티 생성
image.width
image.height
// 또는 대괄호로 표시 하여도 된다
image['width']
image['height']
</script>
아래 스크립트 코드가 연관 배열 코드 이다…(7장에 소개…ㅜㅜ)
5-1. 객체 생성
말그대로 객체를 생성하는 거다.
<script type="text/javascript">
// 객체 생성
var o = new Object();
var date = new Date();
var pattern = new RegExp('\\sjava\\s', 'i');
</script>
이렇게 정하면 마음대로 속성을 넣을수 있다.
5-2. 객체 리터럴
객체를 생성하고 프로퍼티를 지정하는 객체 리터럴 문법을 제공한다.
콜론으로 구별되는 속성 이름/값 들이 쉼표로 분리된 목록이다.
<script type="text/javascript">
// 객체 리터럴
var point = { x:2.3, y:-1.2}
</script>
5-3. 객체 변환
null이 아닌 객체가 불리언 문맥에서 사용되면 true로 변환된다.
객체가 문자열 문백에서 사용되면 객체의 toString() 메서드가 호출이 된다.
객체가 숫자 문맥에서 사용되면 자바스크립트는 먼저 객체의 valueOf() 메서드를 호출한다.
??????????????????????????????????????????????
6. 배열(Array)
객체처럼 데이터 값들의 모음이다.
각 데이터 값에는 번호, 즉 인덱스(index)가 있다. 배열 인덱스는 0부터 시작한다. 그러므로 a[2]는 배열 ‘a’의 세번째 원소를 가르치는 것이다.
<script type="text/javascript">
// 배열 예제
document.array[1].width;
</script>
이렇게 하면 image 배열의 두번째 원소의 width속성을 찾는 것이다.
배열에 관해서는 7장에서 더 논의 한단다??????????????????????????????
6-1. 배열 생성
배열은 Array() 생성자 함수로 생성이 가능하다.
<script type="text/javascript">
// 배열 생성
var a = new Array();
a[0] = 1.2;
a[1] = 'javascript'
a[2] = true;
a[3] = { x:1, y:2 };
document.write(a); // 1.2,javascript,true,[object Object]
</script>
6-2. 배열 리터럴
자바스크립트는 배열을 생성하고 초기화 하는 리터럴 문법을 제공한다.
7. null
null은 아무런 값도 나타내지 않는 특수한 값이다. null은 보통 객체 타입의 특수한 값, 즉 어떠한 객체도 나타내지 않는 값으로 취급된다.
null은 불리언 문맥에서 사용되면 false로 변환된다. 숫자 문맥은 0으로 변환이되고 문자열 문맥에선 null로 사용 된다.
<script type="text/javascript">
//숫자 문맥에서 사용하는 경우
document.write(3 + null); // 3 + 0이므로 결과 : 3
document.write(3 - null); // 3 - 0이므로 결과 : 3
document.write(3 * null); // 3 * 0이므로 결과 : 0
document.write(3 / null); // 3 / 0이므로 결과 : Infinity(무한대)
document.write(3 % null); // 3 % 0이므로 결과 : NaN(Not a Number. 숫자가 아님)
//문자 문맥에서 사용하는 경우
document.write("이것은 " + null + "입니다.") //결과 : 이것은 null 입니다.
//boolean 문맥에서 사용하는 경우.
var a=null;
if(!a) document.write("null 입니다.");
</script>
8. undefined
undefined값은 선언은 되었지만 값이 할당된 적이 없는 변수에 접근하거나, 존재지 않는 객체 프로퍼티에 접근할 경우 반환되는 값이다.
쉽게 생각하면 null은 사용자가 고의로 값을 할당하여 값이 없다는 것을 명시한 것이고,
undefined는 사용자가 아닌 프로그램이 실행을 하면서 존재하지 않는 값의 변수를 호출하도록(주로 오타나 누락된 변수) 한 경우와 같이 호출상 오류를 나타내는 특정형식이라고 생각하면 쉽다.
<script type="text/javascript">
var a;
document.write(a); //undefined a가 선언은 되었으나 값이 할당된 적이 없음.
//document.write(b); //없는 값의 호출로 인해 이후 JavaScript구간 호출 중지
document.write(typeof b); //undefined
document.write("글쓰기") //위에 주석처리된 b호출 구문이 실행되는 경우(b가 없는데도 호출되는 경우) 이후 스크립트는 실행되지 않음.
</script>
9. Date 객체
자바스크립트에서는 날짜와 시간을 표현하고 그 값을 조작하는 데 사용할 수 있는 객체 집합을 제공한다.
<script type="text/javascript">
// date 객체
var now = new Date();
document.write(now); // 현재 시간 설정
</script>
Date 객체는 new 연산자와 Date() 생성자로 생성할 수 있다.
10. 정규 표현식(Regular Expression)
자바스크립트에서 정규표현식은 RegExp 라고 표현되며 RegExp() 생성자로 생성할 수 있다.
Date 객체처럼 RepExp 객체도 기본 타입이 아니다. 다만 표준을 준수하는 자바스크립트 구형에서 제공되는 객체다.
그러나 Date 객체와 다른 이유는 리터럴 문법을 제공하며 자바스크립트 프로그램 내에 바로 나타날 수 있다.
리터럴을 제공하며, ‘/^[0-9]{5}$/’의 형태를 가진다.
11. Error 객체
런타임 에러 발생시 에러 내용을 담고 있는 객체이다.
에러 메시지를 담고 있는 message 프로퍼티가 있다.
여러 에러객체의 종류에는 Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError이 있다.
12. 타입 변환 요약
| 값 | 문자열 문맥 | 숫자 문맥 | 불리언 문맥 | 객체 |
|---|---|---|---|---|
| undifined | “undifined” | NaN | False | Error |
| null | “null” | 0 | False | Error |
| 빈 문자열이 아닌 문자열 | 그 자체 | 문자열이 나타내는 숫자 값 혹은 NaN | True | String 객체 |
| 빈 문자열 | 그 자체 | 0 | True | String 객체 |
| 0 | “0″ | 그 자체 | False | Number 객체 |
| NaN | “NaN” | 그 자체 | False | Number 객체 |
| 무한대 | “infinity” | 그 자체 | True | Number 객체 |
| 음의 무한대 | “-infinity” | 그 자체 | True | Number 객체 |
| 기타 숫자 | 숫자를 그대로 문자열로 표현 | 그 자체 | True | Number 객체 |
| True | “True” | 1 | 그 자체 | Boolean 객체 |
| False | “False” | 0 | 그 자체 | Boolean 객체 |
| Object | toString() | value(), toString(), NaN | True | 그 자체 |
13. 기본 데이터 타입 래퍼 객체
기본 데이터 타입
숫자, 문자열, 불리언
각 기본타입에 Number, String, Boolean 클래스가 대응된다.
Object 객체는 모든 타입에 대응된다.
래퍼 객체
기본 데이터 타입과 동일한 값을 가지고 있다.
데이터 조작을 위한 프로퍼티와 메서드를 가지고 있다.
기본타입에서 래퍼객체로 변환될 경우 래퍼객체는 자동 생성후 자동으로 소멸된다.
모든 숫자, 문자열, 불리언 값은 Object() 함수를 통해 대응되는 래퍼 객체로 변환된다.
ex) var num_obj = Object(3); // Number 래퍼로 대응된다.
14. 객체에서 기본 타입으로 변환
null이 아닌 객체가 불리언 문맥에서 사용시 true를 반환하며, 객체가 가지고 있는 고유값과는 상관이 없다.
ex) Boolean(false); //값은 거짓이더라도 Boolean 객체자체의 여부를 판단하기 때문에 true로 변환된다.
Object는 기본 valueOf() 메서드를 상속받고, 기본 데이터 타입 값을 반환하지 않는다.
Object 객체에서 숫자로 변환될 경우에는, valueOf() 메서드로 객체 자체가 반환되고, toString() 메서드가 호출된다.
배열에서 toString()로 변환시에는 원소와 원소사이 쉼표로 이어진 문자열이 반환되고, 빈 배열은 빈 문자열로 반환되어 숫자0으로 변환된다. 배열의 원소가 둘 이상이거나, 숫자가 아닌 원소가 있으면 ‘NaN’으로 변환된다.
대부분의 객체는 valueOf(), toString() 메서드를 가지고 있지 않다.
valueOf() 메서드 역활은 객체를 적절한 기본 타입 값으로 변환하는것이다.
15. 값에 의한 Vs. 참조에 의한
데이터 값 조작 방식은 두 가지 이다 이둘은 ‘값에 의한(by value)’ 조작과 ‘참조에 의한(by Reference)’ 조작이라도 불린다.
기본타입 : 정해진 개수의 작은 바이드로 구성되어 있는 숫자나 문자열, 불리언 타입(문자열의 길이는 임의적이므로 참조타입 일수도 있지만 객체가 아니라는 이유로 기본타입으로 취급됨).
참조타입 : 임의 개수의 스포퍼티나 원소를 포함하는 객체 타입(크기가 정해져 있지 않아서 조작하면 복사나 비교작업애ㅔ 메모리를 비효율적으로 많이 사용할 수 있어서 참조에서 사용).
참조 타입 ex) Date();
값에 의한
- 복사: 실제로 값이 복사된다. 두 개의 개별적이고 족립적인 복사본이 존재한다.
- 전달: 별개의 값 복사본이 함수에 전달된다. 복사본을 변경해도 함수 외부에 아무런 영향을 주지 않는다.
- 비교: 동일한 값인지를 알아보기 위해 별개의 두 값이 비교된다(종종 바이트별로).
변수에 대입할 경우 실제의 값이 대입되고, 복사본이 존재한다.
함수에 매개변수로 전달할 경우 그 값만이 전달이 되며, 전달되는 원본 값은 변하지 않는다.
참조에의한
- 복사: 값에 대한 참조만 복사된다. 새로운 참조에 의해 값이 변경되면 원본 참조에도 그 변경이 나타난다.
- 전달: 값에대한 참조가 함수에 전달된다. 함수 내에서 전달받은 참조를 통해 값을 변경하면 그 변결은 함수 외부에서도 나타난다.
- 비교: 서로 동일한 값을 가리키는지 알아보기 위해 두참조가 비교된다. 참조가 가리키는 값들이 비록 동일한 바이트들로 구성되었다 할지라도, 서로 다른 값을 다리키는 두 참조는 같지 않다.
변수에 대입할 경우 실제의 값이 아닌, 원본값의 참조값이 넘어가며, 변수값이 변경되면 원본 값도 변경된다.
함수에 매겨변수로 전달될 경우 원본의 참조값이 넘어가며, 함수내에서 변경시 함수 밖 원본값도 변경된다.
15-1. 기본 타입과 참조 타입
기본타입은 값에 의해 조작이 되며, 숫자와 불리언 값, null, undefined 타입이다.
참조타입은 참조에 의해 조작이 되며, 객체(Object), 배열, 함수등이다.
객체나 배열등은 그 크기가 엄청나게 커질수 있으므로 이들의 대한 값에 의한 조작은 할 수 없다.
문자열은 기본인지 참조인지 명확치가 않지만 값에 의한 조작으로 보아도 무방하다.
15-2. 문자열 복사와 전달
문자열의 내용을 변경할 수 있는 방법이 없다.
자바스크립트에서 문자열은 의도적으로 변경하지 못하게 만들어져 있다. 그래서 내부의 문자들을 변경하는 문법이나 메서드 혹은 프로퍼티는 존재 하지 않는다.
그래서 답이 없단다….-_-;;;
15-3. 문자열 비교
<script type="text/javascript">
// 문자열 비교
var s1 = "hellow"
var s2 = "hell" + "ow"
if (s1 == s2) alert("current"); // 두개 일치한다.
</script>
문자열이(아마도);;; 참조에 의해 복사되거나 전달되기는 하더라도, 문자열 비교는 값에 의해 이루어진다.
15-4. 값에 의한 vs. 참조에 의한: 요약
| 타입 | 복사 | 전달 | 비교 |
|---|---|---|---|
| 숫자 | 값 | 값 | 값 |
| 불리언 | 값 | 값 | 값 |
| 문자열 | 불변 | 불변 | 값 |
| 객체 | 참조 | 참조 | 참조 |
