var, 변수
js에서 변수 선언은 var로 시작한다. var을 생략할 수도 있지만 이것은 유효범위라는 것에 영향을 미친다. 변수의 이름은 $,_,특수문자를 제외한 모든 문자로 시작가능하다.
var a = 'coding', b = 'good';이런식으로 한줄에 선언 가능 . (python과 순서다름)
유효범위란? -----------
;
JavaScript에서는 세미콜론을 생략할 수 있는데, 이 경우 줄바꿈을 명령의 끝으로 간주하게 된다.
true, false
boolean 타입.
true는 숫자 1 , false 는 숫자 0 으로도 표현함.
true == 1 //true
true == 2 //false
false == 0 //true
typeof true === "boolean" //typeof
typeof 1 === "number"
typeof "hi" === "string"true == 2 는 false지만, 0과 false가 아닌 모든 값은 true로 간주된다. -> if(2) {alert('true')} 이런식으로 사용가능!
기타 false로 간주되는 데이터 형
if(!'') { alert('빈 문자열') }
if(!undefined) { alert('undefined') }
var a;
if(!a) { alert('값이 할당되지 않은 변수') }
if(!null) { alert('null') }
if(!NaN) { alert('NaN') }=, ==, ===, !=, !==
'='은 알고 있듯이 대입 연산자고, 비교할 것은 == 와 ===다.
'=='은 동등 연산자로 좌항,우항을 비교해서 true/false를 출력한다.
'==='은 일치 연산자로, 좌항과 우항이 정확하게 같을 때 true, 다르면 false가 된다.
1 == 1 //true
1 == '1' //true
1 === '1' //false
1 === true //false
0 === -0 //true
NaN === NaN //false
// NaN : 0/0과같은 연산 결과로 만들어지는 특수data형(숫자가아니다 라는 뜻)
'===' 는 서로 같은 수를 표현하고 있더라도 데이터 형이 같은 경우에만 같다고 판단한다.
'!=' 은 '=='의 부정 연산자이고, '!==' 은 '==='의 부정연산자이다.
특수한 경우 제외하면 '==' 대신 '==='을 사용하는 것을 권한다!
논리 연산자
'&&' : 좌항, 우항이 모두 true 일때 참이된다.
'||' : 좌우항 중 하나라도 true면 참이된다.
(Python : '&&'대신 'and', '||'대신 'or' 사용)
배열
push
배열의 끝에 원소를 추가하는 방법이다. push는 인자로 전달된 값을 배열(li)에 추가하는 명령
concat
복수의 원소를 배열에 추가하는 방법이다. concat은 인자로 전달된 값을 추가하는 명령
unshif
unshift는 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킨다.
splice
splice는 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다. 그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가한다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B');
alert(li);
['a', 'b', 'B', 'c', 'd', 'e']제거
shift
열의 첫번째 원소를 제거하는 방법이다.
pop
배열 끝점의 원소를 배열 li에서 제거한다.
정렬
sort (오름차순)
reverse (역순 정렬)
정규 표현식 (regular expression)
정규표현식은 문자열에서 특정한 문자를 찾아내는 도구다.
정규표현식 객체를 만드는 방법
1. 정규표현식 리터럴
var pattern = /a/
2. 정규표현식 객체 생성자
var pattern = new RegExp('a');
두 가지 모두 같은 결과를 만들지만 각자 장단점이 존재한다.
1) 정규표현식 객체로 추출
RegExp.exec()
문자열 (a) 를 값으로 하는 배열을 리턴한다. 찾지 못하면 null을 리턴한다.
pattern.exec('abcdef'); // ["a"]
pattern.exec('bcdefg'); // nullRegExp.test()
인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.
pattern.exec('abcdef'); // true
pattern.exec('bcdefg'); // false2) 문자열 객체로 추출
String.match()
RegExp.exec()와 비슷하다.
console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // nullString.replace()
문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 값을 리턴
console.log('abcdef'.replace(pattern, 'A')); // Abcdef옵션
i
i를 붙이면 대소문자를 구분하지 않음.
var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];g
g를 붙이면 검색된 모든 결과를 리턴한다. (원래는 처음 하나찾으면 끝)
var xg = /a/;
console.log("abcdea".match(xg));
var og = /a/g;
console.log("abcdea".match(og));실제 예시
1) 캡처
var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2 and~ $1");
console.log(result); // everybody and~ coding() : 일종의 그룹핑이라고 생각하면 좋다.
\w+ : \w는 A-Z , a-z, 0-9 의 문자이고, +는 1개 이상을 의미한다.
\s : 띄어쓰기 한칸을 의미.
str.replace(pattern, "$2 and~ $1");
$1 : 첫번째 패턴 그룹 (앞의 (\w+)을 의미.
$2 : 두번째 패턴 그룹 (뒤의 (\w+)을 의미.
' and~ ' 는 패턴의 \s 대신 들어갈 문자열을 사용자가 정해준 것.
이렇게 그룹을 가져와서 사용하는 기능을 캡처라고함.
2) 치환
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다.
네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);
//결과 생활코딩 : <a href="http://opentutorials.org/course/1">http://opentutorials.org/course/1</a> 입니다.
네이버 : <a href="http://naver.com">http://naver.com</a> 입니다.replace의 두 번째 인자로 함수를 호출하였는데, 이것은 urlPattern로 찾아서 처음 나온 결과를 함수 인자로 전달한다고 이해하면 된다. 이 함수는 인자를 전달받아 가공하여 결과를 result에 저장하게 된다.
