03 JavaScript

1 JavaScript

• 객체 기반의 스크립트 프로그래밍 언어
• 동적, 타입을 명시할 필요 없는 인터프린터 언어
• 객체지향형 프로그래밍과 함수형 프로그래밍 모두 표현 가능
• 웹 브라우저 내에서 주로 사용하며 다른 응용프로그램의 내장 객체에도 접근할 수 있는 기능을 가짐
• Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용됨

 

 

1)  ES6

• ECMAScript: 크로스 브라우징 이슈를 해결하기 위한 javascript 표준화

/* 템플릿 리터럴 */
var name = "현진";
var age = 25;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);

/* 화살표 함수 */
var str = arg1 => console.log(arg1);

/* This */
function Obj(value) {
  this.value = value;
}
var obj = new Obj(0);
console.log(obj.value); // 0

/* let, const */
console.log(i); // 0
if (true) {
  let j = 10;
}
console.log(j); 
if (true) {
  const k = 100;
}
console.log(k);

 

2) 비동기 처리

1. 콜백 함수 사용 → 비동기 처리의 가장 기본이지만, 콜백 지옥에 빠질 수 있다는 단점이 있음

// 콜백 함수
function printString(callbackParam) {
  console.log(callbackParam);
}

// 콜백 함수 호출
function printString(callbackParam) {
  console.log(callbackParam);
}

function callPrint(callback) {
  let value;
  console.log("Wait 3 sec.");
  console.log("waiting...");
  
  setTimeout(function() {
    value = "Hello";
    callback(value);
  }, 3000);
}

// 실행
callPrint(printString);

// 결과
Wait 3 sec.
waiting...
(3초 대기)
Hello

1. Promise → 콜백 지옥을 해결할 수 있는 방식성공 시에는 resolve, then 실패 시에는 reject, catch
2. Promise를 활용한 async/await

// async 
async function hello() {
  return 'Hello';
}

function callHello() {
  const r = hello();
  console.log(r); 
}

callHello();

// 결과
Promise { 'Hello' }

//await
async function hello() {
  return 'Hello';
}

// (2) 새로 추가된 async 키워드
async function callHello() {
  // (1) 새로 추가된 await 키워드
  const r = await hello();
  console.log(r);
}

callHello();

//결과
Hello

 

2 변수/연산자/자료형

1)  변수

• var 선언은 전역 범위 또는 함수 범위이며, let 및 const는 블록 범위
• 실현가능한 특정 프로그램의 그룹으로 다른 파일의 변수, 함수를 참조
• var 변수는 범위 내에서 업데이트하고 다시 선언 할 수 있다. (재선언 O, 재할당 O)
• let 변수는 업데이트 할 수 있지만 다시 선언 할 수는 없다. (재선언 X, 재할당 O)
• null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체) _ 수동
• undifined는 자료형이 없는 상태로 선언 후에 값을 할당하지 않은 변수에 할당_ 자동

 

1)  연산자

• 증가연산자: x++ (후위) / ++x (전위) / x+=1
• 감소연산자: x-- (후위) / --x (전위) / x-=1
• 문자열 연결(+) 연산자는 두 문자열의 값을 서로 연결한 새로운 문자열을 반환
• 단축 할당 연산자인 += 또한 문자열을 연결결할 때 사용할 수 있음
• == → 경우 임의적으로 Type을 바꿔서 비교하기 때문에 원하는 결과와 다른 값이 나올 수 있음
• === → type까지 확인하는 연산자 _ null과 undefine은 같지 않음
• && → 조건 중 하나라도 false 이면 false
• !! → 두개의 조건이 모두 false여야 false
• 삼항연산자 : condition이 참이라면 val1 거짓이라면 val2를 반환

condition ? val1 : val2