jQuery 쉽게하기 - 기본부터 시작하자, string 편

기본은 언제나 중요합니다. 스포츠에서도 기본 폼이 좋은 사람은 발전 속도와 더불어 최고의 자리까지 올라가는 시간이 빠릅니다. 제가 좋아하는 농구도 폼이 좋은 사람이 골도 많이 넣더군요. ^^

난데 없이 폼 얘기는 뭐냐? 라고 하시네요. 지금까지 jQuery에 대한 글을 쓰면서 정작 한것은 별로 없어 보입니다. 그냥 바로 멋진 예제들을 보여드리면서 흥미유발성 포스트가 어쩌면 더 맞는 내용일지도 모르겠습니다.

특히나 이런 류의 포스트는 일정 수준 이상의 개발을 해보신 분들이 접하실 경우가 많기 때문에 따분한 개론 따위는 신경조차 쓰지 않으시죠. 뭐~ 저도 그런 편이니 딱히 뭐라고 할순 없네요. ^^;; 필요한 소스만 딱 떼어다가 쓰기에도 바쁜 세상이기는 합니다만 그래도 필요하신 분들은 있으실 겁니다. 그쵸? ^^

이번 챕터는 Variables Types 즉, 변수 타입에 대한 글입니다. 그런데 마땅한 제목이 없더군요. 변수 타입들 이라고 하기에는 jQuery.com 의 내용이 변수에 대한 내용만이 아닌 자바스크립트의 기본 문법에 대한 내용으로 보이기 때문입니다.

그래서 제목을 기본부터 시작하자로 정했습니다. 내용이 좀 긴 관계로 3~4편 정도로 나누어 글을 올리겠습니다. 좀 길어지겠네요 ㅎㅎ;; 기본으로 너무 울궈 먹는거 아닌가 모르겠습니다.

들어가기에 앞서 문서하나를 만들겠습니다. 저는 types.html 이라고 만들었습니다. 이 문서에 코드를 적고 파이어폭스의 파이어버그로 확인하면서 진행하도록 하겠습니다. 잘 이해가 안되시는 분들은 제가 쓴 이전 포스팅을 참고하시기 바랍니다.
jQuery 쉽게하기 - 파이어폭스의 파어어버그 사용하여 디버깅하기

그럼 시작합니다.

STRING : 문자열

"I'm a String in JavaScript!"
'So am I!'

빈 문자열, 한개 또는 많은 문자들로 이루어진 생성 후 변경이 불가능한 객체(immutable object)를 string 이라고 합니다. immutable object 란 어려운 개념이 나왔네요. 흠. 어떻게 설명을 드리면 될까요? 그림을 하나 그려보겠습니다.

그림에서 보시면 str 이란 변수에 문자열을 할당하고 있습니다. 그러면 메모리 영역(heap)에 "Hi" 란 문자열이 생기게 되죠. 그 다음에 다시 str 에 "Hello" 란 문자열을 할당하면 "Hi" 영역을 바꾸는게 아니고 "Hello" 를 메모리에 새로 잡게 됩니다. 그렇다고 하네요. ^^;; 물론 메모리 관리나 아주 특수한 경우에는 조심스럽게 문자열을 사용해야 합니다. Loop 문 안에서 문자열을 묶거나 생성하면 낭비가 되겠죠. 더 자세한 정보를 원하시면 Google 에서 String is immutable object 로 검색을 해보시면 됩니다. 영어에 자신 있으시면 영문 포함하셔도 되고요. ^^

 

console.log(typeof "some string"); // "string"

위 구문을 파이어폭스에서 찍어 보시면 string 이라고 나옵니다. 이런 형식이 자바스크립트의 STRING 이라고 하네요. 즉, 따옴표 또는 작은 따옴표로 묶인 문자이네요. 참 쉽죠~.

 

Quoting : 인용부호, 따옴표 쓰기

 "You make 'me' sad."
 'Holy "cranking" moses!'
 "<a href=\"home\">Home</a>"

위에서도 설명 드린 것처럼 string 은 따옴표로 묶어서 표현합니다. 그런데 큰따옴표(")와 작은따옴표(')를 혼합해서 사용할 일이 생깁니다. 그럴 경우 위의 형식대로 사용하시면 됩니다.

 

Built-in Methods : 내장 함수

JavaScript 는 string 을 조작하기 위한 내장 함수(Built-in Methods)들이 존재합니다. 이 메소드들을 사용하면 항상 새로운 string 이 생성됩니다. string 이 immutable object 이기 때문입니다. 하지만 split 함수 같은 경우는 배열(array)를 반환해 주기도 합니다. 아래 내용을 types.html 에 추가하시고 파이어폭스에서 확인해 보시기 바랍니다.

console.log("hello".charAt(0)); // "h" : 문자열에서 0번째 문자를 반환합니다.
console.log("hello".toUpperCase()); // "HELLO" : 문자열을 대문자로 바꿉니다.
console.log("Hello".toLowerCase()); // "hello" : 문자열을 소문자로 바꿉니다.
console.log("hello".replace(/e|o/g, "x")); // "hxllx" : 문자열에서 e, o 문자를 x 로 바꿉니다.
console.log("1,2,3".split(",")); // ["1", "2", "3"] : 문자열을 , 로 쪼개서 배열에 담습니다.

 

Length Property : 문자열 길이 속성

문자열의 길이 속성입니다. 속성이기 때문에 뒤에 () 를 붙이지 않습니다. 아래 내용을 확인해 보세요.

console.log("Hello".length); // 5
console.log("".length); // 0

 

Boolean Default : 기본적인 참/거짓(논리 자료형)

빈 문자열은 기본이 false 입니다. 내용을 보세요.

console.log(!""); // true
console.log(!"hello"); // false
console.log(!"true"); // false
console.log(!new Boolean(false)); // false

자바스크립트 문자열에 대해서 정리된 내용을 좀 봤습니다. 그리 어려운 내용이 아니여서 술술 읽히시죠? ㅎㅎ;; 이번 포스트는 여기까지입니다.

그럼 즐프 하세요.