자바스크립트 1

1. 자바스크립트 버전

자바스크립트 버전은 ECMAScript(줄여서 ES) 버전에 따라 결정된다.

2018년 중심으로 ES6를 지원하는 브라우저가 많아서 몇 년간 ES6문법이 표준으로 쓰이는 중이다.

물론 하위호환성 문제는 없어서, ES6로 ES5, 4, 3등을 사용할 수 있다.

 

2. 변수 : var, let, const

 

3. 연산자

 1) 사칙연산자

      + - * / %

      연산자의 우선순위는 ()로 나타낸다. 

  2) A || B

      A가 있으면 A로 해주고, 없으면 B로 해줘.

  3) 삼항연산자

const data = 11;
const result = (data > 11) ? "ok" : "fail";
console.log(result);

  4) 비교연산자

      === : 타입까지 비교 // 권장됨.

      == : 다양한 오류상황 존재 // 권장되지 않음.

 

4. 자바스크립트의 타입

   1) 타입: undefined, null, boolean, number, string, object, function

   2) 자바스크립트의 타입은 선언 시가 아니라, 실행타임에 결정된다. 함수 안 파라미터나 변수도 실행될 때 그 타입이 결정된다. 타입을 체크하는 뚜렷한 방법은 없다.

   3) toString.call: 정확하게는 toString.call 을 이용해서 그 결과를 매칭하곤 하는데, 혹은

       - 문자, 숫자와 같은 기본타입 : typeOf 키워드 사용해서 체크.

       - 배열 : isArray 함수 사용해서 체크.

 

5. 비교문

    1) 삼항연산자문

    2) if 문

    3) switch 문

       - 로직을 분기하기 위해 사용하는 구문

       - 케이스가 명확히 있을 때, 대등한 케이스들이 나열됨.

       - break 문을 만나면 종료됨.

       - 모든 케이스가 해당하지 않을 때를 위해  default 문 추가.

   

 

6. 반복문

    1) for문

       배열의 길이 계산 중복하여 처리하지 않도록 아래처럼 코드 효율화할 수 있음.

var a = ["a", "b", "c"];
var len = a.length;

for(var i=0; i < len; i++{

}

    2) while 문

 

7. 문자열 처리

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

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

문자열에 다양한 메서드가 있음

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

8. 자바스크립트 함수 

    1) 함수 선언문

         - 함수는 여러 개의 인자를 받아서 그 결과를 출력한다.

         - 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다.

         - 파라미터가 1개일 때, 인자의 개수가 0개라면, 파라미터는 undefined라는 값을 갖게 된다. 값이 할당되지 않았기 때문이다.

function printName(familyName){
	var firstName = "Gildong";
    return firstName + " " + familyName;
}

console.log(printName()); // Gildong undefined
console.log(printName(Hong)); // Gildong Hong
console.log(printName(Hong, Kim)); // Gildong Hong

 

    2) 함수 표현식

function printName(familyName){
	var inner = function(){
    	return "inner value";		// 함수 표현식
    }
    
    var result = inner();
    console.log("name is" = result);
}

printName(Hong);

      => 그러나 var inner가 var result 밑으로 가면 에러가 발생한다.(inner is not a function)

      - 함수표현식이 함수로 인식되기 위해서는 함수표현식을 사용하는 구문보다 먼저 정의되어야 한다.

      ★ 호이스팅

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

        - 함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 하여 Hoisting이라고 한다.

        - 따라서 아래 코드 역시 함수를 값으로 가지지만, 값이 할당되기 전에 실행되었으므로 undefined가 할당된 상태다.

 

printName();
var printName = function(){}

        - printName이라는 변수가 존재하고 아직 값이 할당되기 전이므로, printName에는 'undefined'라는 기본값이 할당된 셈이다.

 

9. 자바스크립트 함수의 인자

   1) 인자 Arguments : 함수가 실행되면 그 안에서 인자arguments라는 특별한 지역변수가 존재한다.

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

   3) 이때 넘어온 인자가 arguments로, 배열의 형태로(array-like) 하나씩 접근할 수 있다. ( [i] )

   4) 그러나 인자는 배열타입은 아니다. 따라서 배열의 메서드를 사용할 수는 없다.

      (다시 말해 push() 등은 되지 않음)

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

 

 

10. 자바스크립트 함수 호출 스택(Call Stack)

   1) 함수를 연속적으로 계속 호출하면 Call Stack이 꽉 차버리면서 더 이상 실행되지 못하고 오류가 발생한다.

   2) 브라우저에서는 대부분 지정된 횟수만큼만 Call Stack을 쌓게 미리 설정해둔 경우가 많다.

   

   아래의 함수를 실행할 때 run 이 먼저 호출되고 그 다음 printName이 호출된다.

 

function printName(familyName){
	var firstName = "Gildong";
    return firstName + "," + familyName;
}

function run(familyName){
	var familyName = familyName || "Kim";
    var result = printName(familyName);
    console.log(result);
}

run("Hong");