JavaScript (2)

자바스크립트의 문법들은 다른 언어와 유사합니다.

if , switch 분기문이나,  for, while문은 크게 다른 부분이 없으며

문자 열처리는 정규표현식을 제공하며 또한 문자열에서 제공하는 다양한 함수들이 존재합니다.

 

if

 

보통 우리는 조건문을 사용할 때 밑의 예 저처럼 사용한다.

if(조건){
참일경우
}else{
그렇지않을경우
}

브레이스를 제외하고 한 줄 코딩을 할 수 있습니다.

if(조건)console.log(true)
else console.log(false)

분기 - switch

 

로직을 분기하기 위해서 if문 이외에도 switch문을 통해서도 해결할 수 있다.

 

switch (expresstion){
	case 1:
    case1 처리하는 구문
    break;
    case 2:
    case2 처리하는 구문
    break;
    case 3:
    case3 처리하는 구문
    break;
    default:
    기본값
}

 

반복 

for문이나 while문을 사용해서 반복문을 구현할 수 있다.

 

var arr = [1,2,3];

for(var i =0;  i <arr.length; i ++){

}

 

성능 개선해보기.

var arr = [1,2,3];

for(var i =0, len = arr.length;  i <len; i ++){

}

 

배열의 경우 forEach와 같은 메서드도 있고, for-of를 통한 탐색도 자주 사용됩니다.

for-in은 객체를 탐색할 때 사용한다. -> 브라우저 지원범위가 좀 차이가 있습니다.

 

문자열 처리

자바스크립트의 문자와 문자열은 모두 같은 타입인 문자열입니다.

 

typeof "abc";  //string
typeof "a";    //string
typeof 'a';    //string. single quote도 사용가능.

문자열에 다양한 메서드가 있습니다.

"ab:cd". split(":"); //["ab", "cd"]   : 가지고 문자열을 분리한다. 
"ab:cd". replace(":", "$"); //"ab$cd"  :을 $로 변경한다
" abcde  ". trim();  //"abcde"  공백을 삭제한다.

 

 

 

자바스크립트 함수를 잘 이해한다는 것은 자바스크립트를 잘 이해한다는 것과 같습니다.

 

함수의 선언

 

함수는 여러 개의 인자를 받아 결과를 출력합니다.

 

파라미터의 개수와 , 인자의 개수가 일치하지 않아도 오류가 발생하지 않습니다.

파라미터에 값이 들어오지 않고 실행될 경우 파라미터 값에 undefined라는 값이 내부적으로 할당이 됩니다.

undefined는 자바스크립의 중요한 타입 중 하나입니다.

 

만약 함수를 실행할 때 인자 값을 추가하거나, 더 줄인다고 해도 오류가 발생하지 않습니다.

function Name(first){
 return "name is" + first
}

console.log(Name(홍 , second)) //오류가 나지않고
name is 홍 이출력된다

 

또 다른 선언방식인 함수 표현식이 존재합니다.

function test() { 
    console.log(printName()); 
    var printName = function() {
        return 'anonymouse';
    }
}

test();

 

 

자바스크립트는 함수를 실행하기 전에 함수 안에 필요한 변수 값들을 미리 다 모아서 선언합니다.

함수 안에 있는 변수들을 모두 끌어올려 선언한다고 해서, hoisting이라고 합니다.

 

함수에서 아무것도 작성하지 않고 함수를 호출할 경우 undefined를 리턴합니다.

자바와 달리 void라는 키워드는 없고 undefined를 리턴합니다.

 

 

arguments 객체

 

함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동으로 생성됩니다.

arguments의 타입은 객체입니다.

 

자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있습니다.

이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수가 있습니다.

arguments는 배열 타입이 아니라 객체 타입입니다.

따라서 배열의 메서드를 사용할 수가 없습니다.

function a() { console.log(arguments,argument[2]); }

a(1,2,3);



3이출력

 

자바스크립트의 가변 인자를 받아서 처리하는 함수를 만들 때 등에서 arguments속성을 유용하게 사용할 수가 있습니다.

다만 arguments는 너무 사용하면 안 됩니다. 의도를 알 수 없기 때문입니다.

 

 

 arrow function

 

ES2015에는 arrow function이 추가됐다.

arrow function 참고 바로가기

간단하게 함수를 선언할 수 있는 문법으로 처음에는 꽤 낯설 수 있습니다.

하지만 점점 많이 사용되고 있는 syntax이므로 같이 알아두어도 좋을 것 같습니다.

function getName(name) { return "Kim " + name ; } //위 함수는 아래 arrow함수와 같다. 
var getName = (name) => "Kim " + name;

 

 

함수 호출

 

function foo(b){ var a = 5; return a * b + 10; } 
function bar(x){ var y = 3; return foo(x * y); } 
console.log(bar(6));

함수 호출 관계는 다음과 같습니다.

bar() → foo()

메모리에서는  순서대로 쌓이게 됩니다.

main() -> console.log() -> bar() -> foo() -> return값

bar 함수에서 foo를 호출한 후 foo 함수의 결과를 받아올 때까지 bar함수는 메모리 공간에서 사라지지 못하고 기다리고 있는 것이죠.

이를 당연히 생각할 수 있습니다.

foo의 경우에는 실행이 끝나고 return문이 실행되면 메모리 공간에서 사라집니다.

다시 말해서 Call Stack에서 없어지는 것이죠. 

call stack은 이렇게 동작하지만, 함수를 연속적으로 계속 호출하면 call stack이 꽉 차 버리면서 더 실행되지 못하고 오류가 발생할 겁니다.

브라우저에서는 대부분 지정된 횟수만큼만 call stack을 쌓게 미리 설정해둔 경우가 많다고 합니다.

따라서 혹시 개발 중에 Maximum call stack size exceeded  오류를 발견하면 call stack이 다 쌓인 것이므로 대처할 수 있어야 합니다.