웹 프로그래머(웹 개발자)가 되어보자 - 8

4-3. 데이터(자료)

이전시간에는 문자에 대해서 살펴 보았습니다.
자바스크립트에서 문자는 순수한 문자로서의 기능이 존재하는 것이 아니라, 속성과 함수가 있는 것을 보았습니다.
문자의 길이를 알고 싶을때는 length라는 속성을, 문자의 내용을 교체하려면 replace 함수를 사용 하였습니다.

var text = 'abcd';
console.log(text.length);
text = text.replace('ab','cd');
console.log(text);

여기서 length는 문자의 길이를 알려주고, replace는 교체하는 방법이라고 이해하는 것이 좋겠습니다.
속성과 함수는 나중에 다시 살펴볼 예정 입니다. ^^
일단은 자바스크립트의 문법, 공식이라고 생각하시면 됩니다.

그러면 숫자는 어떨까요?
숫자도 사실 단순히 숫자로써만 사용되지 않습니다. 
문자처럼 속성과 함수가 존재합니다. 
간단한 예를 살펴보겠습니다.

var number = 1234;
console.log(typeof number.toString());

문자타입으로 결과가 출력 됩니다.

예전에 배웠던 typeof 라는 해당 데이터(자료)의 형태를 알려주는 명령어입니다.
해당 명령어를 통해서 숫자인 number에 toString 이라는 함수를 실행하여주니 결과가 문자(String)형태로 나왔습니다.
숫자마저도 속성과 함수를 쓸 수 있다는점이 매우 놀랍습니다.
자바스크립트에서의 변수로 선언한 데이터는 이와같이 모두 속성과 함수를 가질수 있습니다.

이제 전반적인 흐름과 개념에 대해서 살펴보았습니다.
문자를 활용한 다양한 함수와 속성을 알아보겠습니다.

1. 문자를 포함하고 있는지 알려주는 include

var text = "abcd";
console.log(text.includes('a'));

함수는 소괄호 안에 원하는 데이터를 넣을수도 있다고 하였습니다.
include라는 함수는 소괄호에 원하는 데이터를 넣으면 해당 데이터가 존재하는 지 확인해 주는 함수 입니다.
사진처럼 true값이 보이는데, 해당 값은 우리가 처음 만났던 데이터의 종류인 논리값 입니다.
논리값은 treu와 false로 존재하며, 참 거짓을 의미합니다.
논리값은 다음번에 좀 더 살펴볼 예정입니다.
만약 해당하는 값이 없다면 false라는 거짓값을 반환합니다.

2. 문자의 시작, 선택 갯수를 넣어서 해당 구간만큼의 문자를 만들어주는 substr

var text = "abcd";
var text2 = text.substr(0,2);
console.log(text2);

함수에 2개의 값이 들어갔습니다.
substr이라는 함수는 text의 문자의 시작과 멈추어야할 갯수 값을 받습니다.
여기서 신기하게도 0번부터 2번까지의 개념이 들어가 있습니다.
대부분의 컴퓨터에서 사용하는 프로그램은 시작번호를 1이 아니라 0을 사용합니다.
그래서 위 내용은,
"0번시작점부터 2개만 선택해 주세요" 라는 내용입니다.

이해를위해 다른 예제를 살펴보겠습니다.

var text3 = "naver".substr(1,3);
console.log(text3);

위 내용은 "1번부터 3개만 선택해 주세요" 라는 내용입니다.
1번부터는 우리가 알기로는 첫번째 이지만 컴퓨터에게는 0번 다음을 의미하는 두번째 입니다.
그래서 ave 라는 값이 나오게 되는 것 입니다.

 

3. 문자에서 다른문자를 찾아 몇번째 위치에 존재하는지 알려주는 indexof

var text = "abcd";
var number = text.indexOf('a');
console.log(number);  //0 값이 출력됩니다.
console.log(text.indexOf('c'));  //2 값이 출력 됩니다.

역시나 0부터 출력이 됩니다.

특정 문자에 내가 찾고자하는 문자가 어디있는지 알려주는 함수 입니다.
앞서 설명한바와 같이 시작번호는 0부터 입니다.
그래서 첫번째 number라는 변수에는 a 라는 문자가 0번째 있다고 숫자 0을 출력하였으며,
두번째 함수에서는 c라는 문자가 2번째 있다고 출력 하였습니다.
자바스크립트에서 순서는 0부터임을 꼭 숙지하여야 합니다.

 

자바스크립트에서 문자는 위 내용처럼 다양한 함수와 속성을 통해서 사용됩니다.

여태껏 살펴본 문자의 속성과 함수에 대해서 정리하여 보겠습니다.

순서	내용	설명	종류
1	.length	문자의 길이를 반환 합니다.	속성
2	.replace(교체대상, 교체내용)	문자내용을 교체 합니다.	함수
3	.include(찾는대상)	해당 문자의 찾는 값이 있는지 확인 합니다.	함수
4	.substr(시작번호, 찾는길이)	문자의 시작번호부터 길이값 만큼 내용을 선택 합니다.	함수
5	.indexOf(찾는문자)	찾는 문자값이 몇번째 있는지를 반환 합니다.	함수

 

문자와 관련된 속성과 함수는 대표적으로 많이 쓰이는 내용입니다.

위 내용을 토대로 꼭 여러번 연습을 하여야 합니다!

1번부터 5번까지 서로 연관지어 연습하는 것도 좋은 방법입니다.

물론, 위에 설명한 5개 이외의 속성과 함수도 존재합니다. ^^*

 

다음 시간에는 논리값인 true와 false에 대해서 살펴 보겠습니다.

해당 논리값을 알아보는 시간에는 조건문에 대해서도 살짝 알아보겠습니다.