2. DB 연결 웹 앱 - 1. JavaScript - FE

2. DB 연결 웹 앱

1. JavaScript - FE

1) 자바스크립트 변수 - 연산자, 타입

• 변수: var, let, const로 선언 가능, 어떤 것을 사용하는 가에 의해 scope(변수의 유효범위) 달라짐
  • https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90
  • var 변수 선언은 호이스팅이 일어나고, const, let 변수 선언은 호이스팅이 발생하지 않음
• 연산자: +, -, *, /, % 등..

const name = "jiyong";
const result = name || "default"; //name이 없으면 default가 쓰임

const data = 11;
const result = (data>10) ? "ok":"fail";
console.log(result); //조건식 안이 true면 ok, false면 fail

 

• 비교 연산자

===  -> 정확한 타입까지 비교 VS == -> 임의로 타입을 바꿔서 비교하는 성질

• 자바스크립 Type
  undefined, null, boolean, number, string, object, function, array, Date, RegExp
  • 타입은 선언할 때가 아니라 실행할 때 결정됨.
  • 타입을 체크하는 방법: toString.call, typeof(가장 일반적인 방법, 어떤 객체의 인스턴스인지 정확히 알려주지 않음), isArray(배열타입체크)
    

    typeof null === 'object'; // true
    typeof [] === 'object'; //true
    //toString.call() 사용하면 객체 타입까지 구체적으로 알 수 있음
    Object.prototype.toString.call(new Date) === "[object Date]"; //true
    Object.prototype.toString.call(/s/) === "[object RegExp]"; //true
    Object.prototype.toString.call(/null/) === "[object Null]"; //true
    Object.prototype.toString.call(1) === "[object Number]"; //true​

2)자바스크립트 비교, 반복, 문자열

• if, switch, for, while.. -> 다른 언어들과 거의 유사
  

  var arr = [1,2,3];
  for (var i=0; i<arr.length; i++){
  	continue;
  } //매번 length를 계산하기 때문에 비효율적
  for (var i=0, len = arr.length; i<len; i++){
  
  }​

• 문자열 처리: 자바스크립트의 문자와 문자열은 모두 같은 타임 문자열
  

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

3) 자바스크립트 함수 ⭐

• 선언되어 있고 할당되어 있지 않은 변수는 undefined라고 나온다.
• 함수의 매개변수와 인자 값의 개수가 일치하지 않거나 인자를 전달하지 않아도 오류는 발생하지 않는다.
  

  //함수 선언식 Function Declarations
  function printName(firstname){
      return "name is "+firstname;
  }
  console.log(printName()); //name is undefined
  console.log(printName('suji','jiyong')); // name is suji​

• 함수 표현식 = 변수 값에 함수

• //함수 표현식 Function Expressions
  var funcName = function(){
      console.log('A function expression');
  }
  funcName(); //A function expression

• 호이스팅 : 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것
  https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
• 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
• https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () { //함수 표현식
  return 10 + 20;
};

function logMessage() { //함수 선언식
  return 'worked';
}

• 자바스크립트 함수는 반드시 return값이 존재, 선언하지 않았을 때는 undefined가 기본 반환됨. void 타입 없음.
• arguments 객체: like array이기 때문에 배열의 메소드는 사용 못함. 하지만 배열의 형태로 하나씩 접근 가능. 가변 인자를 받아서 처리하는 함수를 만들 때 유용

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

-> 남용하면 안된다. 함수의 인자 값이 바뀔 경우 변경에 약함. 함부로 수정하는 것도 좋지 않음

 

• arrow function: 간단하게 함수를 선언할 수 있는 문법

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

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

• 호출 스택 (콜 스택)

//함수 호출, 콜 스택
//13, 7, 8, 9, {1, 2, 3, 4}, 9(result), 10, 11번 line 순서로 실행
function printName(firstname) {
    var myname = "jisu";
    return myname + " ," +  firstname;
}

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