[부스트코스] 2. DB 연결 웹앱 : JavaScript

웹 프로그래밍 기초를 끝내고 자바스크립트 강의에 들어왔다.

https://www.edwith.org/boostcourse-web/lecture/16693/

[LECTURE] 1) 자바스크립트 변수-연산자-타입 : edwith

 

---

 

* 자바스크립트

• 동적인 웹을 생성하고 제어하기 위해 주료 사용되는 객체 기반의 스크립트 프로그래밍 언어
• html을 이용해서 정적인 웹 페이지를 구성했다면 자바스크립트를 이용해서 다이내믹한 기능을 구현할 수 있음
• 코드작성을 효율적으로 하도록 도와주는 툴을 사용하지 않고 순수하게 자바스크립트만 이용하는 것을 vanilla js라고 함
• 이전에는 제이쿼리라는 자바스크립트 라이브러리를 많이 사용했지만 최근 리액트나 뷰 사용이 증가하고 있음

 

 

* 자바스크립트 버전

• 자바스크립트 버전은 ECMAScripts (ES)의 버전에 따라서 결정되고 이를 자바스크립트 실행 엔진이 반영
• 2018년 기준 ES6을 지원하는 브라우저가 많아서 ES6 문법이 표준으로 쓰이고 있음
• ES6은 ES5 문법을 포함하므로 하위호환성 문제는 없음
• 지원하지 않는 브라우저도 존재할 수 있음

 

* 변수

• var, let, const로 선언할 수 있음 -> scope의 차이가 있음
• let은 값을 재할당하는 경우에 사용
• const는 값을 재할당하지 않는 경우에 사용함
• 연산자를 이용해서 할당할 수 있음
  • A || B -> A가 거짓이면 B로 실행
  • A && B -> A가 참이면 B 실행
• 삼항 연산자 => 조건문 ? 참일 때 실행 : 거짓일 때 실행
• 비교 연산자는 ==보다는 ===로 쓰기 (타입까지 비교하므로!)

 

* 자바스크립트의 타입

• 다양한 타입이 존재하며 타입은 실행될 때 결정됨
• 타입을 체크하는 또렷한 방법은 없고 toString.call, typeof, isArraty 이용

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

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

 

* 자바스크립트 함수

• 함수는 여러 개의 인자를 받아서 그 결과를 출력함
• 파라미터 갯수와 인자의 갯수가 일치하지 않아도 오류가 나지 않음 (그 경우 undefined 값을 갖게 됨)
• 자바스크립트 파서는 한 줄씩 코드를 읽기 전에 한번 훑어서 정보를 확인함 (함수로 선언되었는지)
• 리턴 값이 반드시 존재하며 없을 때는 undefined return
• void 타입이 존재하지 않음

 

*  자바스크립트 함수 - arguments

• 함수가 실행되면 그 안에 특별한 지역변수 존재 = arguments
• 배열타입이 아니므로 배열 메소드를 사용할 수는 없음 - 객체에 가까움

 

* Arrow Function 

• 함수 표현식의 하나로 익명함수를 선언하는 것
• 표시하지 않으면 리턴됨

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

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

 

 

* 자바스크립트 함수 호출 스택

 

 

• call stack이 가득 차게 되면 더 이상 실행되지 못하고 오류가 발생함 -> maximum call stack size exceeded
• 브라우저는 대부분 지정된 횟수만큼만 쌓게 설정해둔 경우가 많음

 

---