[Web] 13. Java Script Basic

• 자바스크립트의 버전

  ECMA Script (줄여서 ES) 버전에 따라 결정되고, 이를 자바스크립트실행 엔진이 반영한다. 2018년을 중심으로 ES6를 지원하는 브라우저가 많아서 몇년간 ES6 문법이 표준으로 쓰이고 있다. 하위호환성을 지원한다.

• 변수

  변수는 var, let, const로 선언할 수 있다. 어떤 type을 사용하는 가에 따라서 변수의 유효볌위가 달라진다. let과 const는 ES6에서 지원하는 형식으로 그 이전의 버전에서는 사용할 수 없다. const는 한 번 할당한 값에 재할당 할 수 없고 var은 얼마든지 재할당이 가능하다.

1 2 3

var a var a = 1 var s = "hello"

cs

• 연산자

  다른 언어에서 사용되는 수학 연산자, 논리 연산자를 모두 사용할 수 있다. 예를 들어 논리 연산자는 다음과 같이 유용하게 사용된다,

1 2 3 4 5 6

var name = "soyoung"; var result = name || "default"; //result = "soyoung" name = ""; result = name || "default"; //result= default

cs

만약 || 연산자가 사용되지 않았다면? if, else 문으로 더 긴 코드가 되었을지 모른다. 

하나 주의해야 할 연산자는 '===' 과 '=='이다. 다른 언어에서는 '=='이 쓰여서 헷갈릴 수 있으니 꼭 알아두자. 

위에 보이듯이 '===' 연산자는 데이터의 내용 뿐 아니라 type까지 비교연산을 수행한다. 필요에 따라 잘 구분해서 써야 한다.

• Type

  자바스크립트에서 변수의 타입은 선언할 때가 아니라 runtime에 결정된다. (= dynamic type) 타입을 체크하는 또렷한 방법은 없다. 정확하게는 toString.call을 이용하여 그 결과를 매칭하곤 하는데, 문자, 숫자와 같은 기본타입은 typeof 키워드를 사용해서 체크할 수 있다. 배열의 경우에는 타입을 체크하는 isArray 함수가 표준으로 있으니 타입에 따라 메소드를 잘 찾아보고 사용하면 된다. 

• 비교문

  if, else, switch, case 문 등 다른 언어와 마찬가지로 모든 비교문이 쓰인다. 사용법도 비슷하다. 한가지 생각해 볼 점은, for문은 작성할때 코드의 효율성 부분인데, 예를 들어 배열의 length 값을 for문에 이용하고 싶다면 '배열 객체'.length 로

for (  var i=0; i < arr.length; i++) { .. }
이렇게 쓸 수 있겠지만, 이런 경우 반복문을 한 번 돌 때마다 arr.length 메서드가 실행되므로 효율성이 떨어질 수 있다. 따라서 i가 증가하는 것이 아닌 감소하는 for문을 사용하거나 배열의 길이 값을 다른 변수에 저장해서 반복문에 사용하는 방법등 코드의 효율을 높이는 방법으로 코딩을 하도록 하자. 하지만 이런 방법들은 성능차이를 그렇게 크게 이끌어내지는 않기 때문에 무엇보다 집중해야할 부분은 코드의 가독성이다.
그 외에도 forEach ,  for-of 와 같은 메서드도 존재하기 때문에 필요에 따라 찾아서 쓰면된다.

• 문자열 처리

자바스크립트에는 문자와 문자열은 같은 타입 "string"으로 다루어진다. 자바스크립트에서 문자열이나 배열을 선언하면 내부적으로 모두 객체로 받아들이기 때문에 선언한 후에는 객체처럼 '.' 을 사용해서 문자열 또는 배열 객체의 메서드들을 사용할 수 있다. 

1 2 3

"ab:cd".split(:); // ["ab","cd"] "ab:cd".replace(":","$"); // "ab$cd" "abcd  ".trim(); // "abcd"

cs

• 함수

'function' 으로 함수를 선언할 수 있다. 함수에 input 인자를 선언하고 호출 시 아무것도 넘겨주지 않으면 출력이 제대로 되지 않고 해당 변수가 undefined type로 할당된다. 하지만 선언된 인자 수 보다 더 많은 인자를 넘겨줘도 오류가 나지 않고 제일 먼저 할당된 변수가 출력된다. 

• 표현식과 호이스팅(hoisting)

1 2 3

var inner = function(){         return "inner value";     }

cs

함수를 이런식으로 표현하는 것을 함수 표현식이라고 한다. 이때 선언되고 호출되는 순서에 따라 오류가 발생할 수 있기 때문에 호이스팅이라는 개념을 이해하고 유의해야한다.
예를 들어

1 2 3 4 5 6 7 8 9

function printName(firstname){     var result = inner();     console.log("name is "+result)     var inner = function(){         return "inner value";     } } printName();

cs

  이 코드는 inner()가 Function이 아니라는 type오류가 발생한다. 그 이유는 자바 스크립트 내부에서 코드를 실행하면 실행되기 전에 필요한 변수들을 미리 다 모아서 선언하는데 var result = inner(); 이 부분에서 미리 모아지는 부분은 var result 뿐이기 때문이다. 따라서 내부에서 undefined 객체로 할당이 되고 호출시 오류가 발생하게 된다.
  따라서 만약 inner 함수가 함수 표현식이 아닌 선언식으로 만들어졌다면 함수의 선언부가 미리 모아져서 선언부보다 위에서 호출하여도 오류가 발생하지 않는다.

• 함수의 반환값

아무것도 반환하지 않으면 자바스크립트는 'undefined'를 반환하게 된다. 다른 언어에서 사용하는 void라는 개념은 없고 무조건 undefined를 사용한다.

• 함수의 arguments 속성

  함수가 실행되면서 사용되는 특별한 지역변수이다. 위에서 말했듯 자바스크립스에서 함수 호출 시 선언한 파라미터보다 더 많은 인자를 보낼 수 있고 이때 넘어온 인자들은 arguments로 배열의 형태로 하나씩 접근이 가능하다. 

1 2 3 4

function a(){    console.log(arguments); } a(1,2,3)

cs

> [Arguments] { '0': 1, '1': 2, '2': 3 }

• Arrow Function

  ES2015에서 추가된 문법이다. 간단하게 함수를 선언할 수 있지만 좀 낯설게 보인다. 

function getName(name) {

   return "Kim" +name;

}

//아래 함수가 위 함수와 같다.

var getNmae=(name) => "Kim"+name;

console.log(getNmae(" soyoung"))

점점 많이 사용되는 syntax이므로 알아두면 좋다.

• 함수의 Call Stack

  

call stack은 위와 같이 동작한다. 함수를 연속적으로 계속 호출하여 call stack이 꽉 차버리면서 더이상 실행되지 못하고 오류가 발생하게된다. (무한 루프 에러)