[Boostcourse] DB 연결 웹 - 1. JavaScript FE

1. Javascript

ECMAScript(ES) 버전에 따라 결정, 이를 자바스크립트실행 엔진이 반영한다.

ES5, ES6(ES2015) 등 버전

ES6를 지원하는 브라우저(Firefox, Chrome)가 많아서 ES6 문법이 표준

ES6를 지원하면 ES5문법도 포함, 하위호환성 문제가 없다. 다만 feature별로 지원하지 않는 브라우저가 있어 조심해야 한다.

---

변수

var, let, const

변수의 유효범위 scope

재할당

연산자

우선순위 표현 위해 ()사용

+, -, *, / , %

or연산자로 if, else 코드를 줄일 수 있다.

===은 타입까지 체크한다. 그래서 ===을 습관적으로 쓰는 것이 좋다

다음은 참(true) 결과가 나온다.

0 == false;

"" == false;

0 == "0"

0 == 0

null == undefined;

== 일 경우, 암묵적으로 타입을 바꾸어서 비교한다.

null == false; 의 결과값은 false이다.

null은 객체다. false와 같지 않다.

---

자바스크립의 Type

undefined, null, boolean, number, string, object, funtion

타입은 선언시가 아닌, 실행시간(runtime)에 결정된다.(Dynamic type)

함수 안에서의 파라미터나 변수는 실행될 때 그 타입이 결정된다.

type check할 뚜렷한 방법은 없고,

toString.call 을 이용해서 결과를 매칭하는 방법이 있다.

문자, 숫자와 같은 기본타입은 typeof 키워드를 이용한다.

배열의 경우 타입을 체크하는 isArray 함수가 표준으로 있다.(브라우저 지원범위 확인필요)

---

node에서 실행시키는 것 -> 로컬에 설치한 node.js 런타임에서 자바스크립트를 컴파일하여 실행시키는 것
크롬에서 실행시키는 것 -> 웹 브라우저 안의 자바스크립트 런타임 엔진에서 자바스크립트를 컴파일하여 실행시키는 것

nodejs package manager > node js 를 사용하는데 도움이 되는 패키지들을 import 해줌.

2. JS - 비교, 반복, 문자열

if, switch

for, while

​ 성능개선 len은 미리 계산, 역으로 for문 실행하기(reverse iteration) 하지만 이보다 가독성이 중요

​ forEach, for-of

문자열 처리

​ split() - 배열을 만들어 줌, replace(), trim()

정규표현식

MDN 사이트참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch%EB%AC%B8

typeof 또는 toString.call()

toString.call() 은 일반적으로 모든 자바스크립트의 타입을 알려줌.

3. JS function

Funtion

Hoisting

arguments

기본반환값 undefined - 선언이 되어 있지만 할당이 되어 있지 않은 변수.

함수선언

var

const

let

매개변수를 입력하지 않고 프린트하면 undefined가 출력

매개변수 수가 일치하지 않아도 함수는 오류를 발생시키지 않는다.

*함수표현식 & 함수 선언식 *

function printName(firstname){
  console.log(typeof inner);
  console.log(typeof inner2);
  console.log(inner2());

  // function expression (함수 표현식)
  var inner = function() {
    return "inner function";
  }

  // function declaration (함수 선언식)
  function inner2() {
    return "inner2 function";
  }

  var result = inner();
  console.log("name is " + result)
}

>>
undefined
function
inner2 function
name is inner function

Hoisting -

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

함수 안에 있는 변수들을 끌어올려서 선언한다고 해서, Hoisting(끌어올림)이라고 한다.

js 내부에서 parser가 이를 담당한다.

따라서 함수표현식과 함수선언식의 결과는 다르게 나타난다.

Javascript 함수의 리턴값

함수가 return이 없으면 기본적으로 undefined가 반환된다.

---

Arguments

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

>>
{ '0': 1, '1': 2, '2': 'hi' }

Arrow function - ES2015에서 추가

function getName(name) {
  return "Kim" + name;
}

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

이 둘은 같은 기능을 한다.

---

4. 함수 호출 스택 (Function Call Stack)

먼저 호출된 함수부터 스택에 쌓인다.

나중에 호출된 함수가 먼저 종료 된다.

Maximum call stack size exceeded - 브라우저에서는 지정된 횟수만큼한 call stack을 쌓게 미리 설정해둔 경우가 많다.

---

reference
[https://www.edwith.org/boostcourse-web/lecture/19878/]