Javascript 문법 (230720)

주석

• 한 줄: //
• 여러 줄: /* */

 

---

equal operator(==) vs strict equal operator(===)

• ==는 의미만 같으면 됨

1 == "1" //True

• ===는 의미와 데이터 type까지 같아야 됨

1 === 1 //True
1 === "1" //False

 

---

boolean의 대체재

• False: 0, '', undefined, null, NaN
• True: 1, 문자열(ex. 'abcd')

 

---

function의 다양한 정의 방법

1. function name() {}
2. name = function () {}
3. 익명 함수 실행: function () {}()

 

---

length vs length()

• length: Array의 원소 개수
• length(): String의 길이

 

---

Array method

• push(): Array 마지막 원소로 추가
• concat(): Array 뒤에 이어붙이기
• unshift: Array 첫번째 원소로 추가
• splice(index, howmany, elements): Array 중간에 원소 삽입
• shift(): Array에서 첫번째 원소 제거
• pop(): Array에서 마지막 원소 제거
• sort(): Array 오름차순으로 정렬
• reverse(): Array 내림차순으로 정렬

 

---

객체(Dict) 생성 방법

• var name = {}
• var name = new Object()

 

---

정규표현식 용도

• 정보 추출: exec()
• 정보 탐색(boolean): test()
• 정보 치환

// $1: 첫번째 (\w+), $2: 두번째 (\w+)
var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);

// url: content 중 urlPattern에 맞는 문자열이 인수로 대입
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

 

---

유효범위의 대상

• Javascript의 지역변수는 함수에서만 유효하다. 아래 예제의 결과는 coding everybody이다.

for(var i = 0; i < 1; i++){
    var name = 'coding everybody';
}
alert(name);

• Java에서 아래의 코드는 허용되지 않는다. name은 지역변수로 for 문 안에서 선언 되었는데 이를 for문 밖에서 호출하고 있기 때문이다.

for(int i = 0; i < 10; i++){
    String name = "egoing";
}
System.out.println(name);

 

---

정적 유효범위

• Javascript는 함수가 사용된 시점이 아니라 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고 한다.

var i = 5;
 
function a(){
    var i = 10;
    b();
}
 
function b(){
    document.write(i);
}
 
a(); //실행결과: 5

 

---

arguments

• arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다.
  (사실 배열은 아니다. 실제로는 arguments 객체의 인스턴스다)

function sum(){
    var i, _sum = 0;
  	// arguments: 1,2,3,4
    for(i = 0; i < arguments.length; i++){
        document.write(i+' : '+arguments[i]+'<br />');
        _sum += arguments[i];
    }   
    return _sum;
}
document.write('result : ' + sum(1,2,3,4))

 

---

객체지향프로그래밍

• 객체 내 변수: property(속성)
• 객체 내 함수: method

// 1. 함수 리터럴
function sum(x, y) {return x+y;}

// 2. 객체 리터럴
var o = {}

// 3. 배열 리터럴
var a = [1,2,3]

 

---

this

함수의 메소드인 apply를 이용하면 this의 값을 제어할 수 있다.

var o = {}
var p = {}
function func(){
    switch(this){
        case o:
            document.write('o<br />');
            break;
        case p:
            document.write('p<br />');
            break;
        case window:
            document.write('window<br />');
            break;          
    }
}
func(); // window
func.apply(o); // o
func.apply(p); // p

 

---

prototype

• 상속에 사용

function Ultra(){}
Ultra.prototype.ultraProp = true;
 
function Super(){}
Super.prototype = new Ultra();
 
function Sub(){}
Sub.prototype = new Super();
 
var o = new Sub();
console.log(o.ultraProp); // true

• 표준내장객체의 확장

Array.prototype.rand = function(){
    var index = Math.floor(this.length*Math.random());
    return this[index];
}
var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');
console.log(arr.rand()); // seoul ~ Tsukuba 중 하나

 

---

• var / let / const

1. var : 중복 선언 가능
2. let : 중복 선언 불가능, 재할당 가능
3. const: 중복 선언 불가능, 재할당 불가능