[FE] 02. JavaScript 기초

<2. DB 연결 웹 애플리케이션 - JavaScript>

 

 

 

* JavaScript 변수, 연산자 타입

 

 

- 자바스크립트의 버전
자바스크립트 버전은 ECMAScript(줄여서ES)의 버전에 따라서 결정된다.
이를 자바스크립트 실행 엔진이 한 라인씩 반영, ES5, ES6(ES2015) …
2018년을 중심으로 ES6를 지원하는 브라우저가 많기 떄문에 몇 년간 ES6 문법이 표준이다.
ES6는 ES5문법을 포함하고 있어 하위 호환성 문제가 없다. (but, feature별로 지원하지 않는 브라우저가 있을 수 있으므로 조심)

- 변수
변수는 var / let, const(ES6에 있는 기능)로 선언한다.
선언에 따라 scope라는 변수의 유효범위가 달라진다.
ex) var a = "boostcourse";

- 연산자
연산자 우선순위를 표현하기 위해서는 ()를 사용한다.

 

수학연산자: +,-,*,/,% 등
논리 연산자, 관계연산자, 삼항 연산자(간단한 비교와 값 할당) 
비교연산자: 비교는 == 보다는 ===를 사용한다. (===는 정확한 타입까지 비교하기 때문에)

 

//or 연산자 활용
const name = "crong";
const result = name || "codesquad";
console.log(result);
var name = "";
var result = name || "codesquad";
console.log(result);

위의 코드는, name에 값이 있으면 name이 출력되고, 없을 경우 codesquad가 출력된다.
=> if, else문을 사용하지 않아도 되므로 기본값을 할당할 때 편리하다.
const는 한번 할당한 값에 재할당이 안된다는 것에 주의!

 

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

삼항 연산자: 10보다 크면 ok(true), 그렇지 않으면 fail(false)

 

- 자바스크립트의 Type

> undefined, null, boolean, number, string, object, function, array, Date, RegExp

타입은 선언할 때가 아니고, 실행타임에 결정된다.
var a = "String" 처럼 선언할 때 타입을 구분하지 않음 따라서 타입이 나중에 결정되는 것!
함수 안에서의 파라메터나 변수는 실행될 때 그 타입이 결정된다.

toString.call(): 자바스크립트의 타입 확인
isArray(): 배열일 경우 타입 체크

 

---

 

* JavaScript 비교 - 반복, 문자열

 

- 비교문
if , else if, else, 삼항 연산자
[참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#%EC%A1%B0%EA%B1%B4%EB%AC%B8

- 분기 switch 
[참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch%EB%AC%B8

- 반복 for, while
배열은 forEach, for-of와 같은 메서드를 이용할 수 있다.
객체 탐색: for-in

function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

 

- 문자열 처리

자바스크립트의 문자와 문자열은 같은 타입이다.

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

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

"String". 으로 사용해도 문자열이 객체로 변환이 되므로, 객체 내에 있는 메소드를 사용할 수 있다.

 

• split: 문자열을 분리하고 배열로 생성

• replace: 문자 대체

• trim: 공백 제거

 

---

 

* JavaScript 함수

 

- 함수의 선언

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

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

파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면 이미 정의된 파라미터는 (매개변수 - 여기서는 firstname) undefined이라는 값을 가진다.

// 함수의 호출.
function printName(firstname) {
    var myname = "jisu";
    return myname + " " +  firstname;
}

위와 같은 표현을 함수 선언식이라고 한다.

아래는 함수 표현식(변수 값에 함수 표현식을 담아놓은 것)이다.

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

test();
//TypeError: printName is not a function

 

- 표현식과 호이스팅

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

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

 

아래 코드는 함수를 값으로 가지지만 printName(함수 표현식으로 표현된 함수)도 변수이므로 끌어올려지고, 값이 할당되기 전에 실행됐으므로 undefined가 할당된 상태이다.

printName(); //아직, printName이 undefined으로 할당된 상태다. 
var printName = function(){}

var printName;만 끌어 올려지기 때문에 값이 undifined이 되는 것!

 

- 함수 표현식과 선언식의 차이

//함수선언에서의  호이스팅
foo();
function foo() {
    console.log('hello');
};
> hello 출력

//함수표현에서의  호이스팅
foo();
var foo = function() {
    console.log('hello');
};
> Syntax Error 발생

[참고] http://insanehong.kr/post/javascript-function/

 

위 코드에서 알수 있듯이 함수선언은 foo(); 라는 실행코드를 해석하기 이전에 foo 함수에 대한 선언을 호이스팅하여 global 객체에 등록시키기 때문에 오류 없이 수행된다.

하지만 함수표현은 변수에 함수리터럴을 할당하는 구조이기 때문에 Hoisting 되지 않으며 Syntax Error 를 발생시킨다.

 

이러한 Hoisting은 자바스크립트 코드를 사람이 해석하는데 많은 혼란을 주게 되므로 자바스크립트 코드를 작성할 때 선언문은 항상 최상위에서 작성하는 것을 권고하고 있다.

 

- 반환값과 undefined

function a() {

}

consol.log(a());

값을 지정하지 않았음에도 출력 시 undefined가 반환된다.

자바스크립트 함수는 반드시 return값이 존재하며, 없을 때는 기본 반환값인 'undefined'가 반환 (자바스크립트에서는 void 타입이 없음)

 

- arguments(인자) 객체

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

=> 배열 형태로 접근할 수는 있지만 arguments의 타입은 객체이므로 배열의 메소드는 사용할 수 없다.

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

 

---

 

* JavaScript 함수 호출 스택

 

- 함수호출과 stack

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()

메모리에서는 위와 같이 Call Stack에 순서대로 쌓이게 된다.

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

foo의 경우에는 실행이 끝나고 return문이 실행되면 메모리 공간에서 사라진다. (Call Stack에서 없어지는 것)

함수를 연속적으로 계속 호출하면 call stack이 꽉 차버리면서 더 실행되지 못하고 오류가 발생하게 된다.