2장 데이터 형과 연산자
2.2 데이터 형
자바 스크립트에 사용되는 데이터에 대해 다음의 여덟 가지 기본 데이터 형을 제공한다.
1. 숫자(number)
2. 문자열(string)
3. 불(boolean)
4. Null
5. Undefined
6. Bigint
7. 객체(object)
8. 심볼(symbol)
2.2.1 숫자
자바 스크립에서 숫자(number) 데이터에는 정수(integer)와 소수점이 있는 부동소수점 숫자(floating point number)가 사용된다. 다음에는 숫자 데이터가 사용된 예이다.
| 예제 2-4. 숫자 데이터 사용 예 | number.html | 코드 원문 |
<script>
let a = 3; // 정수
let b = 5.7; // 부동 소수점 숫자(floating point number)
let c = 123e3; // 123000
let d = 123e-3; // 0.123
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
document.write(d);
</script>| 예제 2-4. 숫자 데이터 사용 예 | number.html | 코드 분석 |
<script>
let a = 3; // 정수
let b = 5.7; // 부동 소수점 숫자(floating point number)
let c = 123e3; // 123000
let d = 123e-3; // 0.123
document.write(a + "<br>");
// 메서드 document.write()로 변수 a에 저장된 값 출력하고 개행
document.write(b + "<br>");
// 메서드 document.write()로 변수 b에 저장된 값 출력하고 개행
document.write(c + "<br>");
document.write(d);
</script>
2.2.2 Bigint
자바스크립트에서 정수는 15개의 숫자를 표현하며 15자리 정수까지 나타낼 수 있다. 이 이상의 범위를 가지는 정수를 사용하려면 Bigint 형을 사용해야 한다.
다음은 일반적인 정수 표현과 Bigint 데이터 형을 비교하기 위한 예제이다.
| 예제 2-5. 일반적인 정수와 bigint 데이터 형 사용 예 | bigint.html | 코드 원문 |
<script>
let a = 999999999999999; // 15개의 정수
let b = 9999999999999999; // 16개의 정수
let c = 9999999999999999n; // Bigint에저는 정수 끝에 n을 붙임
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c);
</script>| 예제 2-5. 일반적인 정수와 bigint 데이터 형 사용 예 | bigint.html | 코드 분석 |
<script>
let a = 999999999999999; // 15개의 정수
// 변수 a를 선언하고 값 999999999999999를 저장
let b = 9999999999999999; // 16개의 정수
// 변수 b를 선언하고 값 9999999999999999를 저장 15자리를 초과해서 제대로 저장되지않는다.
let c = 9999999999999999n; // Bigint에저는 정수 끝에 n을 붙임
// 변수 c를 bigint 형으로 선언하고 값 9999999999999999를 저장
document.write(a + "<br>");
// 변수 a에 저장된 값을 출력하고 개행
document.write(b + "<br>");
// 변수 b에 저장된 값을 출력하고 개행 개발자가 입력한 값이 아닌 엉뚱한 값이 나온다.
document.write(c);
// 변수 c에 저장된 값을 출력 bigint형으로 선언해서 제대로 된 값이 나온다.
</script>
2.2.3 문자열
문자열(string)은 하나 이상의 문자를 표현하는데 사용된다. 'a', "a", 'hello', "hello", '안녕하세요', '010-1234-5678'에서와 같이 문자열에서는 문자들을 큰 따옴표나 작은 따옴표로 감싸야 한다.
| 예제 2-6. 문자열에 따옴표 사용 예 | string.html | 코드 원문 |
<script>
let text1 = "사과" // 큰 따옴표 사용
let text2 = '오렌지' // 작은 따옴표 사용
document.write(text1 + "<br>");
document.write(text2);
</script>| 예제 2-6. 문자열에 따옴표 사용 예 | string.html | 코드 분석 |
<script>
let text1 = "사과" // 큰 따옴표 사용
// 변수 text1를 선언하고 문자열 "사과" 값 저장
let text2 = '오렌지' // 작은 따옴표 사용
// 변수 text2를 선언하고 문자열 '오렌지' 값 저장
document.write(text1 + "<br>");
// 메서드 document.write()를 사용 변수 text1에 저장된 값 출력하고 개행
document.write(text2);
// 메서드 document.write()를 사용 변수 text2에 저장된 값 출력
</script>위의 예제에서도 알 수 있듯 자바스크립트에서는 문자열을 사용할 때 큰 따옴표나 작은 따옴표 어느 것을 사용해도 된다.
다음 예제와 같이 문자열의 length 프로퍼티를 사용하면 문자열의 길이, 즉 문자열에 포함된 문자의 개수를 구할 수 있다.
| 예제 2-7. 문자열의 length 프로퍼티 사용 예 | length.html | 코드 원문 |
<script>
let text1 = "apple";
let text2 = "사과";
let text3 = "We are the world.";
document.write(text1.length + "<br>");
document.write(text2.length + "<br>");
document.write(text3.length);
</script>| 예제 2-7. 문자열의 length 프로퍼티 사용 예 | length.html | 코드 분석 |
<script>
let text1 = "apple";
// 함수 text1를 선언하고 문자열 apple 저장
let text2 = "사과";
let text3 = "We are the world.";
// 함수 text3를 선언하고 문자열 We are the world 저장
document.write(text1.length + "<br>");
// 함수 text1의 프로퍼티 length를 사용해서 문자의 개수 구하고 출력 후 개행
document.write(text2.length + "<br>");
// 함수 text2의 프로퍼티 length를 사용해서 문자의 개수 구하고 출력 후 개행
document.write(text3.length);
// 함수 text3의 프로퍼티 length를 사용해서 문자의 개수 구하고 출력 후 개행
</script>문자열 "We are the world."에 포함된 공백도 하나의 문자이다.
다음과 같이 문자열에서 큰 따옴표 안에 큰 따옴표를 사용하면 오류가 발생한다.
| 예제 2-8. 큰 따옴표(") 안에 큰 따옴표가 사용된 경우 | quote_error.html | 코드 원문 |
<script>
let text = "내 이름은 "홍길동"입니다.";
document.write(text);
</script>| 예제 2-8. 큰 따옴표(") 안에 큰 따옴표가 사용된 경우 | quote_error.html | 코드 분석 |
<script>
let text = "내 이름은 "홍길동"입니다.";
// 변수 text를 선언하고 문자열을 저장하려 했으나 따옴표 안에
// 따옴표가 있어서 작업이 이루어지지 못하고 에러가 난다.
document.write(text);
// document.write() 메서드를 이용한 출력도 제대로 이루어 지지 않는다.
</script>이 코드는 오류가 나서 제대로 실행되지 않았다. 이유는 큰따옴표 안에 큰 따옴표를 사용했기 때문이다. 이러한 문제를 해결한 코드는 다음과 같다.
| 예제 2-9. 예제 2-8의 오류 해결 | quote_answer.html | 코드 원문 |
<script>
let text = "내 이름은 \"홍길동\"입니다.";
document.write(text);
</script>| 예제 2-9. 예제 2-8의 오류 해결 | quote_answer.html | 코드 분석 |
<script>
let text = "내 이름은 \"홍길동\"입니다.";
/* 따옴표는 문자열을 구분해주기 위해서 사용하기 때문에
문자열 안에 따옴표가 포함될 경우 프로그램이 문자열안에 포함된 따옴표인지
아니면 문자열을 구분해 주기 위한 따옴표인지 구분을 못한다.
그래서 문자열 안에 따옴표를 포함 시킬때는 역슬래쉬를 따옴표 앞에 붙인다.
이러한 문자들을 이스케이프 문자라고 칭한다. */
document.write(text);
</script>
역슬래시를 사용해야지 문자열에 포함할 수 있는 문자를 이스케이프 문자라고 한다. 자바스크립트에서 특별한 용도로 사용되기 때문에 문자열에 저장하려면 구분을 위해서 역슬래시를 앞에 붙여야한다.
이스케이프 문자
| 코드 | 결과 | 설명 |
| \' | ' | 작은 따옴표 |
| \" | " | 큰 따옴표 |
| \\ | \ | 역슬래쉬 |
| \n | 줄바꿈 | 새로운 줄에서 시작 |
| \t | 탭 | 탭 키를 누른 효과 |
이 표에서 '\n'은 줄바꿈을 나타내는데 이것이 사용된 예를 살펴보자.
| 예제 2-10. 줄바꿈 "\n" 사용 예 | new_line.html | 코드 원문 |
<script>
let text = "안녕하세요.\n반갑습니다.";
alert(text);
</script>| 예제 2-10. 줄바꿈 "\n" 사용 예 | new_line.html | 코드 분석 |
<script>
let text = "안녕하세요.\n반갑습니다.";
// 변수 text 선언하고 문자열 저장 중간에 개행이 있으므로 개행을 포함한 채로 저장한다.
alert(text);
// 메서드 alert()로 알림창에 출력
</script>innerHTML이나 document.write()로 브라우저 화면에서 줄바꿈을 할 때는 HTML 줄바꿈 태그인 <br>를 사용해야 한다.
자바스크립트 문자열에서 유니코드 특수문자를 사용하려면 복사/붙여넣기 또는 해당 코드를 타이핑하면 된다. 다음은 유니코드 특수 문자가 사용된 예이다.
| 예제 2-11. 유니코드 특수문자 사용 예 | unicode.html | 코드 원문 |
<script>
let text1 = "Hello 🌐";
let text2 = "Hello \u{1F310}";
document.write(text1 + "<br>");
document.write(text2);
</script>| 예제 2-11. 유니코드 특수문자 사용 예 | unicode.html | 코드 분석 |
<script>
let text1 = "Hello 🌐";
let text2 = "Hello \u{1F310}";
document.write(text1 + "<br>");
document.write(text2);
</script>
네이버나 구글에서 '유니코드 특수문자'로 검색하면 자바스크립트에서 사용 가능한 이모티콘이나 특수문자 목록을 볼 수 있다. 다음 예제 코드는 다양한 유니코드 특수문자가 사용된 예이다.
| 예제 2-12. 유니코드 특수문자 사용 예 2 | unicode2.html | 코드 원문 |
<script>
let text1 = "⌛ ⌚ ⇨";
let text2 = "\u{231B} \u{231A} \u{21E8}"
document.write(text1 + "<br>");
document.write(text2);
</script>| 예제 2-12. 유니코드 특수문자 사용 예 2 | unicode2.html | 코드 분석 |
<script>
let text1 = "⌛ ⌚ ⇨";
// 변수 text1를 선언하고 문자열인 유니코드 ⌛ ⌚ ⇨ 저장
let text2 = "\u{231B} \u{231A} \u{21E8}"
// 변수 text2를 선언하고 문자열인 유니코드 \u{231B} \u{231A} \u{21E8} 저장
document.write(text1 + "<br>");
// 메서드 document.write 사용해서 변수 text1에 저장된 값 출력하고 개행
document.write(text2);
// 메서드 document.write 사용해서 변수 text2에 저장된 값 출력
</script>
2.2.4 템플릿 문자열
템플릿 문자열에서는 문자열 안에 직접 변수 값을 넣을 수 있다. 다음은 문자열 연결 연산자(+)와 템플릿 문자열이 사용된 예이다.
| 예제 2-13. 템플릿 문자열 사용 예 | template.html | 코드 원문 |
<script>
let name = "홍길동";
let age = 30;
let text1 = "이름 : " + name + ", 나이 : " + age;
let text2 = `이름 : ${name}, 나이 : ${age}`;
document.write(text1 + "<br>");
document.write(text2);
</script>| 예제 2-13. 템플릿 문자열 사용 예 | template.html | 코드 분석 |
<script>
let name = "홍길동";
// 변수 name을 선언하고 "홍길동"값 저장
let age = 30;
let text1 = "이름 : " + name + ", 나이 : " + age;
/* 변수 text1를 선언하고 문자열을 저장한다. 문자열 연결 연산자가 사용 되었다.
중간에 name, age 변수에 저장된 값을 포함해서 문자열이 저장된다.
let text2 = `이름 : ${name}, 나이 : ${age}`;
/* 변수 text2를 선언하고 문자열을 저장한다. 템블릿 문자열이고 백틱(`)이 사용되었다.
템플릿 문자열이므로 중간에 name, age 변수에 저장된 값을 포함해서 문자열이 저장된다. */
document.write(text1 + "<br>");
// 메서드 document.write를 사용해서 변수 text1에 저장된 값 출력 후 개행
document.write(text2);
// 메서드 document.write를 사용해서 변수 text2에 저장된 값 출력
</script>
템플릿 문자열은 HTML 태그 내에 변수 값을 채워 넣는데도 사용된다. 아래 예제코드를 보자.
| 예제 2-14. 템플릿 문자열 사용 예2 | template2.html | 원문 코드 |
<body>
<div id="show"></div>
<script>
let name = "홍길동";
let age = 30;
let text = "<table border='1'>" +
"<tr><th>이름</th><th>이름</th></tr>" +
`<tr><td>${name}</td><td>${age}</td></tr>` +
"</table>";
document.getElementById("show").innerHTML = text;
</script>
</body>| 예제 2-14. 템플릿 문자열 사용 예2 | template2.html | 코드 분석 |
<body>
<div id="show"></div>
<script>
let name = "홍길동";
let age = 30;
let text = "<table border='1'>" +
"<tr><th>이름</th><th>이름</th></tr>" +
`<tr><td>${name}</td><td>${age}</td></tr>` +
"</table>";
/* 테이블을 변수 text에 저장
문자열 text안에 있는 ${name}과 ${age}는 각각 '홍길동'과 '30'으로 변환된다. */
document.getElementById("show").innerHTML = text;
/* document.getElementById 메서드 사용해서 변수 text에 저장된 값을
html 문서에서 id값이 show인 곳에 출력 */
</script>
</body>
2.2.5 불
불(boolean) 데이터 형에는 true와 false 값만이 존재한다. 예제를 통해서 불데이터 형에 대해 알아보자
| 예제 2-15. 불 데이터 형 사용 예 | boolean.html | 코드 원문 |
<script>
let x = 5 > 3;
let y = 5 < 3;
document.write(x+ "<br>");
document.write(y);
</script>| 예제 2-15. 불 데이터 형 사용 예 | boolean.html | 코드 해석 |
<script>
let x = 5 > 3;
// 변수 x를 선언하고 5>3의 결과값을 저장, true가 저장되게 된다.
let y = 5 < 3;
// 변수 y를 선언하고 5<3의 결과값을 저장, false가 저장되게 된다.
document.write(x+ "<br>");
// document.write() 함수로 변수 x에 저장된 값을 출력하고 개행
document.write(y);
// document.write() 함수로 변수 y에 저장된 값을 출력
</script>
2.2.6 Undefined와 Null
변수가 값을 가지고 있지 않으면 그 값은 undefined가 된다. 다음 예제를 통해서 undefined에 대해 알아보자.
| 예제 2-16. Undefined 데이터 형 사용 예 | undefined.html | 코드 원문 |
<script>
let x;
document.write(x + "<br>");
document.write(typeof x);
</script>| 예제 2-16. Undefined 데이터 형 사용 예 | undefined.html | 코드 분석 |
<script>
let x;
// 변수 x를 선언하고 초기화해주지 않는다.
document.write(x + "<br>");
// 변수 x에 저장된 값을 출력하고 개행한다.
document.write(typeof x);
// 변수 x에 저장된 값의 타입을 출력한다.
</script>초기값을 가지지 않기 때문에 x는 undefined 값을 가진다. 그리고 데이터 형을 확인하는 typeof 연산자로 x의 데이터 형을 확인해도 undefined이 출력된다.
Undefined와는 달리 Null 데이터 형은 빈 문자열을 의미한다. 다음 예제를 통해서 Null에 대해 알아보자.
| 예제 2-17. Null 데이터 형 사용 예 | null.html | 코드 원문 |
<script>
let x = "";
document.write("값:" + x + "<br>");
document.write("데이터 형:" + typeof x);
</script>| 예제 2-17. Null 데이터 형 사용 예 | null.html | 코드 분석 |
<script>
let x = "";
// 변수 x를 선언하고 빈 문자열 "" 저장, Null 값을 가지게된다.
document.write("값:" + x + "<br>");
// document.write 함수를 사용해서 x에 저장된 값을 출력한다.
document.write("데이터 형:" + typeof x);
// document.write 함수를 사용해서 변수 x의 데이터 형을 출력한다.
</script>변수에 빈 문자열인 ""를 저장했다. 변수는 지정해줬는데 안에 값이 없는 상태를 Null값을 가진다고 한다. 변수가 상자고 값이 내용물이라면 상자는 있는데 내용물은 없는 상태인 것이다. Null은 빈 문자열을 의미하기 때문에 변수 x의 데이터 형은 문자열(string)이다.
2.2.7 객체
자바스크립트에서 객체(object)는 클래스(class)를 기반으로 하는 자바와 C++과는 다른 구조와 형태를 가진다. 자바스크립트에서 객체는 {키:값, 키:값, 키:값, ....}의 형태로 사용된다.
다음 예제를 통해서 자바스크립트 객체의 간단한 구성에 대해서 알아보자.
| 예제 2-18. 객체(object) 사용 예 | object.html | 코드 원문 |
<script>
const member = {id:"kdhong", name:"홍길동", age:20}
document.write(member.id + "<br>");
document.write(member.name + "<br>");
document.write(member.age);
</script>| 예제 2-18. 객체(object) 사용 예 | object.html | 코드 분석 |
<script>
const member = {id:"kdhong", name:"홍길동", age:20}
// 객체 member 선언하고 키 id, 값 "kdhong", 키 name, 값 "홍길동", 키 age, 값 20 저장
document.write(member.id + "<br>");
// 메서드 document.write를 사용해서 객체 member의 키 id의 값 출력하고 개행
document.write(member.name + "<br>");
// 메서드 document.write를 사용해서 객체 member의 키 name의 값 출력하고 개행
document.write(member.age);
// 메서드 document.write를 사용해서 객체 memeber의 키 age의 값 출력
</script>위 예제에서 객체 member는 세 쌍의 '키:값"의 요소로 구성된다. member.id, member.name, member.age는 각각 객체 member의 id의 값, name 키의 값, age 키의 값을 의미한다. 그러므로 document.write 메서드를 통해서 출력하면 각각의 키의 값인 kdhong, 홍길동, 20이 출력되게 된다.
객체 member의 요소들을 member["id"], member["name"], member["age"]와 같은 방법으로도 접근할 수 있다.
2.2.8 배열
배열은 다수의 값을 저장할 수 있는 특별한 변수이다. 자바스크립트에서는 특별한 형태를 가진 객체로 볼 수 있다. 배열은 객체와 밀접한 관계를 가지고 있다.
다음 예제를 통해서 자바스크립트 배열의 기본 구조에 대해 알아보자.
| 예제 2-19. 배열(array) 사용 예 | array.html | 코드 원문 |
<script>
const car = ["현대", "기아", "벤츠", "BMW"];
document.write(car[0] + "<br>");
document.write(car[1] + "<br>");
document.write(car[2] + "<br>");
document.write(car[3]);
</script>| 예제 2-19. 배열(array) 사용 예 | array.html | 코드 원문 |
<script>
const car = ["현대", "기아", "벤츠", "BMW"];
// 배열 car 선언 길이는 4이고 값으로는 "현대", "기아", "벤츠", "BMW"를 가진다.
document.write(car[0] + "<br>");
// 배열 car[0]에 저장된 값을 출력하고 개행
document.write(car[1] + "<br>");
document.write(car[2] + "<br>");
document.write(car[3]);
</script>배열 car는 '현대', '기아', '벤츠', 'BMW" 네 개의 요소로 구성된다. car[0]은 배열의 첫번째 요소를 의미하고, car[1]은 배열의 두번째 요소를 의미하고, car[2]는 배열의 세번째 요소를 의미한다. 즉 배열의 n번째 요소는 car[n-1]이다. 대 괄호 안의 숫자를 배열에서는 인덱스라고 부른다. 인덱스는 0부터 시작한다. 배열의 첫번째 가 0부터 시작되는 점을 주의하자.
2.2.9 심볼
자스크립트 버전은 매년 새로운 기능이 추가되면서 발전되고 있다. 자바스크립트는 ES6 버전부터 심볼 데이터 형을 지원한다. 심볼은 원시 데이터 형이다. 또한 심볼은 유일한 식별자로서 객체의 속성을 추가하는데 사용된다. 심볼은 객체의 속성을 정의하는 또 다른 방법을 제공하는 고급 기능이다.
| 예제 2-20. 심볼(symbol) 사용 예 | symbol.html | 코드 원문 |
<script>
const member = {name:"홍길동", age:20}
let id = Symbol('id');
member[id] = 'kdhong';
document.write(member[id] + "<br>");
document.write(typeof id + "<br>");
document.write(id === Symbol('id'));
</script>| 예제 2-20. 심볼(symbol) 사용 예 | symbol.html | 코드 분석 |
<script>
const member = {name:"홍길동", age:20}
// 객체 member 선언
let id = Symbol('id');
// Symbol() 메서드를 사용해서 심볼 id 생성
member[id] = 'kdhong';
// 객체 member의 키 id에 문자열 'kdhong'을 저장
document.write(member[id] + "<br>");
// 객체 member의 키 id의 값 출력하고 개행
document.write(typeof id + "<br>");
// 키 id의 데이터형 출력
document.write(id === Symbol('id'));
// 심볼 id와 Symbol('id')의 값을 서로 비교, false가 출력된다.
</script>
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 3장-3.3.2~3.5 (0) | 2023.10.08 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 3장-3.1 ~ 3.3.1 (0) | 2023.10.07 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 2장 - 3,4 (0) | 2023.10.07 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 2장-1 (0) | 2023.10.06 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 1장 (2) | 2023.10.06 |