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

4-2. 데이터(자료)

이전시간에는 숫자로 이루어진 데이터를 살펴 보았습니다.
숫자는 다양한 연산이 가능하며, 변수뒤에 대입 연산자를 통해서 사용할 수 있었습니다.

var number = 1234;
var number2 = number * 10;

이번에 알아볼 내용은 문자 입니다.
문자는 쌍따옴표 또는 홑따옴표를 문자 내용에 앞 뒤로 붙여서 사용 할 수 있습니다.

문자 형태의 자료는 다양하게 사용됩니다.
예를들어 우리가 네이버나 다음, 구글등에 로그인 하는 아이디와 비밀번호는 문자 입니다.
또한 카카오톡에서 서로 채팅으로 주고받는 글의 내용도 문자입니다.

여기서 햇갈리면 안되는 것은 아래의 예제들도 전부 문자입니다.

var number = '1234';
var number2 = "1234";

위 number라는 변수와 number2라는 변수는 숫자의 형태를 지닌 문자입니다.
쌍따옴표와 홑따옴표가 사용되는 것은 반드시 문자임을 알아야 합니다.

문자는 서로 결합하여 사용 할 수 있습니다.
아래내용을 파이어폭스 콘솔에서 실행하여봅니다.  * 이제 파이어 폭스에서 콘솔을 실행하는 방법은 생략하겠습니다.

var text = 'Hello';
var text2 = 'world';
var text3 = text + ' ~ ' + text2;
console.log(text3);

출력이 됩니다.

 

결합된 문자가 출력되는 것을 볼 수 있습니다.

또한 문자의 길이를 측정 해 볼 수 있습니다.
우리가 어떠한 홈페이지를 가입하는경우를 가정하여 봅니다.
회원가입을 하는 동안 새로 등록하는 비밀번호의 길이가 최소 "몇자리 이상" 이라는 문구를 만나게 되었다고 해 봅니다.
이럴 때 문자의 길이가 몇자리인지 자바스크립트에서는 손 쉽게 확인 할 수 있습니다.
아래 내용을 실행하여 봅니다.

var password = "p23gsegh!";
console.log('비밀번호 ' + password + '의 길이는? ',password.length);

 

해당 문자의 길이가 보입니다.

처음보는 기호가 나타났습니다.
.length 라는 기호는 데이터 문자(String)를 이루는 속성 중 문자의 길이를 알려주는 속성 입니다.
자바스크립트에서 속성(attribute)이라 하는 것은 데이터(자료)를 만들 때 이루어지는 구성요소 입니다.
우리는 변수와 데이터를 간단하게 사용합니다. 

var text = "abcd";

하지만 자바스크립트는 우리가 text의 값을 abcd라고 입력하는 순간 단순한 문자로서의 내용을 가지는 것이 아니라, 다양한 속성을 부여합니다.
겉으로 보기에는 text는 abcd만 가지고 있지만 사실 저 안에는 많은 속성값들이 존재 합니다.

내용이 조금 어려우므로 여기서는 .length라는 표현을 통해서 문자의 길이를 가져올 수 있다라고만 이해하면 될 것 같습니다.
이러한 속성(attribute)과 관련된 내용은 자바스크립트를 알아가면서 자연스레 이해가 될 것 입니다.

문자의 길이의 데이터 형식은 당연히 숫자입니다.
그러면 아래처럼 계산도 할 수 있습니다.

var password = "p23gsegh!";
var min = 3;
console.log(password.length - min);

 

문자의 길이는 숫자입니다. 그러므로 빼기 연산이 가능합니다.

숫자의 길이값을 측정한 다음에 min으로 선언한 숫자형태의 변수와 값을 빼 주었습니다.
이렇게 측정한 값의 길이를 통해서 소위 "최소 비밀번호 길이" 값을 구할 수 있는 것 입니다.
여기서의 핵심은 문자에서의 길이는 .length 를 사용하면 알 수 있다는 점 입니다.

조금만 더 어려운 내용을 다루어보겠습니다.
아래 예문을 실행하여봅니다.

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

 

문자에서 ab가 cd로 교체되었습니다.

.replace라는 기호를 보았습니다. 
replace는 문자(String)가 제공하는 함수(메소드)입니다. 
앞서 이야기한 바와 같이 자바스크립트로 문자(String)를 만들게 되면, 다양한 속성과 함수가 추가가 됩니다.
우리는 먼저 length라는 속성을 통해 문자의 길이를 만들 수 있었고, 지금은 replace라는 함수를 만나 ab의 값을 cd로 바꾸어주었습니다.

위 함수(메소드)라고 하는 replace는 abcd로 입력된 값을 바꿀 수 있게 이미 만들어진 자바스크립트가 제공하는 일종의 기능입니다.
계속해서 사용해온 console.log 라는 명령어와 같은 개념 입니다.
그렇다면 우리는 이렇게 생각 해 볼 수 있습니다.

자바스크립트는 프로그래머(개발자)가 데이터를 다루기 쉽게 다양한 속성과 함수를 제공한다.
그러므로 프로그래머(개발자)는 그러한 자바스크립트의 규칙을 이해하여 프로그램을 개발하면 된다.

위 내용이 이번장의 핵심 입니다.
아직은 낯설지만 .length라는 문자의 길이값을 알려주는 속성과,
replace(교체할 대상,교체할 내용) 라는 함수는 이미 자바스크립트가 만들어 놓은 일종의 규칙 입니다.
그러한 규칙을 익히고 사용하는 것이 사실 프로그래머의 주된 목적입니다.

정리를 한번 해 보겠습니다.
1. 자바스크립트에는 속성과 함수가 존재 합니다.
2. 속성은 ".내용" 형식으로 사용하며, 대표적으로 문자(String)에 대해서 길이를 알려주는 .length 속성이 있습니다.
 - var text = "abcd";
 - var number = text.length;
3. 함수는 소괄호로 이루어져 있으며 대표적으로 문자(String)에서 내용을 교체할 때 사용하는 replace가 있습니다.
 - var text = "abcd";
 - var text2 = text.replace('ab','cd');  //ab를 cd로 바꿉니다.
4. 함수의 또 다른 예제로는 여태 껏 사용해온 console.log도 존재 합니다.
5. 함수와 속성의 차이는 함수는 원하는 내용을 소괄호안에 추가 할 수도 있지만, 속성은 소괄호 없이 사용만 가능 합니다.

여기까지 문자에 대한 속성과 함수에 대해서 기본적인 내용을 살펴보았습니다.
함수와 속성에 대한 개념을 꼭 이해 하여야 합니다.
속성은 소괄호 없이 사용하는 것이며, 함수(메소드)는 소괄호가 사용되며 소괄호안에 값을 추가 할 수도 있습니다.
다음시간에는 문자에 대해서 사용하는 여러 함수와 속성에 대해서 살펴 보겠습니다.