Core Javascript

Javscript …

  • 컴파일 없이 브라우저뿐만 아니라 서버에서도 실행 할 수 있으며, 자바스크립트엔진이라 불리는 특별한 프로그램이 있는 모든 디바이스에서 동작한다.
  • ECMAScript라는 고유한 명세를 가진 독립적인 언어이며 자바와 아무런 연관이 없다.
  • 브라우저엔 자바스크립트 가상머신 엔진이 내장되어있다.
    • V8: 크롬과 오페라에서 쓰임
    • SpiderMonkey: 파이어폭스에서 쓰임
    • Trident, Chakra : IE 버전에 따라
    • ChakraCore: IE엣지
    • SquirrelFish: 사파리
  • 엔진은 프로세트 각 단계마다 최적화를 진행한다.
  • 모던 자바스크립트는 “안전한”프로그래밍 언어이다.(메모리나 CPU같은 저수준 영역의 조작을 허용하지 않는다.)
  • Node.js환경에서는 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.
엔진 동작 기본원리
  1. 엔진이 스크립트를 읽는다 (파싱)
  2. 읽어 들인 스크립트를 기계어로 전환(컴파일)
  3. 기계어로 전환된 코드가 실행 (기계어로 전환되었기 때문에 실행속도가 빠름)
브라우저에서 자바스크립트가 할수 있는 일
  • 페이지에 새로운 html을 추가 하거나 기존 html, 스타일 수정하기
  • 마우스 클릭이나 포인트의 움직임, 키보드 키눌림등과 같은 사용자 행동에 반응하기
  • 네트워크를 통해 원격 서버에 요청을 보내거나 파일 다운로드, 업로드하기
  • 쿠키를 가져오거나 설정하기, 사용자에게 질문을 건네거나 메시지 보여주기
  • 클라이언트 측에 데이터 저장하기(로컬 스토리지)
브라우저에서 자바스크립트가 할수 없는 일
  • 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을수 있다.
    운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문이다. 
  • 모던 자바스크립트를 사용하면 파일을 다를수 있지만 접근이 제한되어있다. <input>태그를 통해 선택할때 특정상황에서만 파일접근이 허용된다.
  • 카메라, 마이크같은 디바이스와 상호작용하려면 사용자의 명시적인 허가가 있어야 한다.
  • 브라우저 내 탭과 창은 대게 서로의 정보를 알수 없다. 자바스크립트를 사용하여 한창에서 다른창을 열때는 예외가 적용된다. 하지만 도메인, 프로토콜,포트가 다르면 접근할수 없다.
  • 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고 받을수 있으나. 타 사이트나 도메인에서 데이터를 받아오는 것은 불가능하다.
자바스크립트만의 장점
  • html/css와 완전히 통합할수 있다.
  • 모든 주요브라우저에서 지원하고 기본언어로 사용된다.
  • 서버나 모바일 앱등을 만드는 것도 가능하다.
자바스크립트로 트랜스 파일
  • coffeescript : 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할수 있다. Ruby개발자들이 좋아함. 
  • typescript : 자료형의 명시화에 집중해 만든 언어, microsoft사에서 개발
  • flow : 자료형을 강조하는데 타입스크립트와 다른 방식으로 사용. facebook이 개발
  • dart : 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어. google에서 개발

transpile 과 compile의 비교

  • transpile : 한언어로 작성된 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는것.(source to source compiler) es6 ⇒ es5 / c++ ⇒ c / coffeescript ⇒ javascript
  • compile : 한언어로 작성된 소스 코드를 다른 언어로 변환하는 것
    Java ⇒ bytecode c ⇒ assembly sass(scss) ⇒ css (node-sass를 활용)
개발자 콘솔 (Chrome)
  • 개발자 도구 : window – F12 , Mac [ Chrome – Cmd+Opt+J, Safari – Cmd+Opt+C ]
  • 커맨드 라인에 한줄짜리 명령어를 입력하고 enter치면 해당 명령어가 실행
    명령어를 여러줄 작성하고 싶을 때 shift+ enter를 누리면 명령어 실행
스크립트 태그
  • < script > < /script> type 과 language 속성은 필수가 아니므로, 모던 마크업에서는 사용할 필요가 없다.
  • HTML안에 직접 스크립트를 작성하는 방식은 대게 스크립트가 아주 간단할때만 사용한다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다.
  • 스크립트를 별도의 파일을 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상의 이점이 있다.(트레픽이 절약되고 웹페이지의 실속도가 빨라짐)
  • < script >태그는 src속성과 내부 코드를 동시에 가지지 못한다.
    <script src="file.js">console.log(1);</script> ⇒ console.log(1); 는 무시됨.
코드 구조
  • 세미콜론(;) : 생략가능하지만, 생략하지 않는 것이 더 안전하므로 지켜 사용하는 것을 권장한다.
  • 주석
    한줄 주석 – // (두 줄 슬래시, 단축키 : Ctrl+/)
    여러줄 주석 – /*….*/ (단축키 : Ctrl+Shift+/)
    /*…*/안에 또 다른 /*…*/이 있을 수 없다.
  • 엄격모드 : ‘use strict’ 
    • 항상 “use strict”를 사용권장
    • 반드시 최상단에 위치시킴.(엄격모드가 적용되면 취소할 방법은 없다.)
    • 모든 모던 브라우저는 엄격모드를 지원한다.
변수
  • 데이터를 저장할 때 쓰이는 이름이 있는 저장소
  •  let 키워드를 사용하여 변수 생성.
  • 여러변수를 한줄에 선언하는 것도 가능하나, 가독성을 위해 하나의 변수는 한줄에 선언
    변수선언방식

     

    let user = 'John';
    let age = 25;
    let message = 'Hello';
    
    let user = 'John', 
      age = 25, 
      message = 'Hello';
    
    
    let user = 'John' 
      , age = 25 
      , message = 'Hello';
    
  • var : let과 동일하지만 오랜된 방식이다.
  • 변수의 값이 변경되면 이전 값은 제거되고 변경된 값을 출력한다.
  • 변수명명규칙
    • 변수명에는 오직 문자, 숫자, 기호 $와 _만 들어갈 수 있다. (하이픈(-)은 변수명에 쓸 수 없다)
    • 첫글자가 숫자가 될수 없다.
    • 여러단어를 조합하여 변수명을 만들때는 카멜표기법으로 사용한다.
    • 대소문자를 구별한다.
    • 영어로 사용하는 것을 권장한다.
    • 예약어는 변수명으로 사용할 수 없다.
상수
  • 변화하지 않는 변수를 선언 할 땐,  let 대신 const를 사용하며 이를 상수라 한다.
  • 상수는 재할당할수 없으므로 변경하면 에러를 발생한다.
  • 대문자 상수명하드코딩한 값의 별칭을 만들때 사용한다. (ex: const COLOR_RED = “#F00”;)
  • 최대한 서술적이고 간결한 명명으로 한다.
  • 변수를 재사용하는 것보다 변수를 추가하는 것이 좋은 습관이다. 변수를 추가한다고 해서 성능 이슈가 생기지는 않는다.
자료형
  • 자바스크립트의 변수는 어떤 데이터든지 담을수 있다.
  • 변수값을 문자열에서 숫자로 바꿔어도 에러가 발생되지 않는다.
    let message = "hello";
    message = 123456;
    
숫자형
  • 정수, 부동소수점 숫자를 나타냄
  • 숫자형과 관련된 연산은 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 – 등
  • Infinity(어떤 숫자보다 큰 특수 값, 무한대∞), -Infinity, NaN같은 ‘특수 숫자 값(special numeric value)’이 포함
    alert( 1 / 0 ); // 어느 숫자든 0으로 나누면 무한대를 얻을 수 있다.
    alert( Infinity ); //Infinity를 직접 참조할 수도 있다.
    alert( "숫자가 아님" / 2 ); // NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값, 문자열을 숫자로 나누면 오류가 발생
    alert( "숫자가 아님" / 2 + 5 ); // NaN에 어떤 추가 연산을 해도 결국 NaN이 반환
    
  • Biglnt
    • 채택된지 얼마 안된 자료형
    • 길이에 상관없이 정수를 나타낼수 있다.
    • 자바스크립트에선 253 (16자리 숫자로 이루어진 정수) 큰 값 혹은 -253 보다 작은 정수는 숫자형을 사용해 나타낼 수 없으므로 아주 큰  숫자가 필요하거나 높은 정밀도로 작업을 해야 할 때는 큰 숫자가 필요할 경우 사용된다.
    • BigInt는 정수 리터럴 끝에 n을 붙이면 만들수 있다.
      const bigInt = 1234567890123456789012345678901234567890n;
      const sameBigInt = BigInt("1234567890123456789012345678901234567890");
      const bigintFromNumber = BigInt(10); // 10n과 동일
      
    • 호환성 이슈가 있다. (firefox, chrome에서만 지원가능)
    • BigInt는 일반 숫자와 큰 차이없이 사용된다.
      alert(1n + 2n); // 3
      alert(5n / 2n); // 2
      
      alert(1n + 2); // BigInt형 값과 일반숫자를 섞어서 사용할 수 없다.
      
      //일반 숫자와 섞어서 써야 하는 상황이라면 BigInt()나 Number()를 사용해 명시적으로 형 변환을 해주면 된다.
      //*bigint가 너무 커서 숫자형에서 허용하는 자릿수를 넘으면 나머지 비트는 자동으로 잘려나간다.
      
      let bigint = 1n;
      let number = 2;
      console.log(bigint + BigInt(number); //3
      console.log(Number(bigint) + number); // 3
      
      // 단항덧셈연산자는 bigint사용할수 없다.
      let bigint = 1n;
      console.log(+bigint); // error
      
      
    • 비교연산자 <, >는 bigint와 일반숫자 모두 사용할수 있다.
      console.log(2n > 1n); //true
      console.log(2n > 1); //true
      
      console.log(1 == 1n); // true
      console.log(1 === 1n); // false 논
    • 논리연산
      if안이나 다른 논리 연산자와 함께 사용할 때 일반숫자와 동일하게 행동한다.
      if안에서 0n은 falsy이고 다른값들은 truthy로 평가된다.
      ||, &&도 bigint를 적용할 때도 일반숫자와 유사하게 동작한다.

      if (0n) {
        // 절대 실행되지 않습니다.
      }
      console.log(1n || 2); 1 (1n은 truthy로 판단)
      console.log(0n || 2); 2 (0n은 falsy로 판단)
      
    • 폴리필
      아직까지 제대로 된 bigint 폴리필이 나오지 않은 상황
      JSBI를 사용하여 숫자를 만든 다음 바벨 플러그인에 있는 폴리필을 사용해JSBI 호출을 네이티브 bigint로 변환하면 원하는 브라우저에서 연산을 수행할 수 있다.
문자형
  • 문자열을 따옴표로 묶는다.
    큰따옴표(” “), 작은따옴표(‘ ‘) – 차이 없다.
    역 따옴표(` `: 백틱) : 변수나 표현식을 감싼후 ${..}안에 넣어주면, 원하는 변수나 표현식을 문자열 중간에 넣을수 있다.

    let name = "john";
    console.log(`Hello, ${name}!`); //Hello, John!
    console.log(`the result is ${1+2}`); //the result is 3 → 1+2와 같은 수학관련표현식도 넣을수 있다.
    
  • 자바스크립트에서는 문자형만 있을 뿐 글자형은 지원하지 않는다. C언어와 Java는 글자형을 따로 지원(char)한다.
불린형
  • true, false 두가지 값 밖에는 없는 자료형으로 긍정(true), 부정(false)을 나타내는 값을 저장할 때 사용한다.
null값
  • null값은 오로지 null값만 포함하는 별도의 자료형을 만든다.
  • 자바스크립트의 null은 자바스크립트이외의 언어의 null과 성격이 다르다.
    다른언어에서의 null은 존재하지 않는 객체에 대한 참조나 널포인트를 나타낼때 사용한다.
    자바스크립트에서는 null은 존재하지 않는 값(nothing), 비어있는 값(empty), 알수 없는 값(unknown)을 나타내는 데 사용

    let age = null;
undefined값
  •  undefined값도 null값처럼 자신만의 자료형을 형성한다.
  • undefined는 값이 할당되지 않는 상태를 나타낼 때 사용한다.
  • 변수는 선언했지만, 값을 할당되지 않았다면 해당변수는 undefined가 자동으로 할당된다.
    let x;
    alert(x); // "undefined"
    
    let y = 123;
    y = undefined; // 변수에 undefined를 직접 할당하는 것도 가능, 권장하지 않는다.
    alert(y); // "undefined"
    
변수가 비어있거나, 알수 없는 상태라는 것을 나타내려면 null을 사용
변수에 값이 할당되었는지 여부를 확인할 때는 undefined를 사용
객체와 심볼
  • 객체(object)는 특수한 자료형이다.
  • 심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용
typeof 연산자
  • 인수의 자료형이다.
    연산자 : typeof x
    함수: typeof(x)
    typeof undefined; //"undefined"
    typeof 0; // "number"
    typeof 10n; // "bigint"
    typeof true; // "boolean"
    typeof "foo"; // "string"
    typeof Symbol("id"); // "symbol"
    typeof Math; // "object" , 수학연산을 하는 내장객체이므로 object
    typeof null; // "object", 언어상 오류, null은 객체가 아니다.
    typeof alert; // "function", 함수는 객체형에 속함
    
함수형 언어
  • functional 프로그래밍 언어는 변수값 변경을 금지한다. 
  • 스칼라(Scala)와 얼랭(Erlang)이 대표적인 함수형 언어이다.
  • 함수에 저장된 값은 영원히 유지된다.
  • 다른 값을 저장할려면 새로운 함수를 만들어야(새변수를 선언)한다. 이전 변수는 재사용할수 없다.
  • 중대한 개발에 상당히 적합한 언어이다.
콜백함수(Callback 함수)

callback : 되돌아 호출해달라는 명령

어떤 함수 X를 호출하면서 특정 조건일 때 함수 Y를 실행해서 나에게 알려달라는 요청을 보내고, 이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖쳐졌는지 여부를 스스로 판단하고 Y를 직접 호출한다.

var count = 0;
var callbackFunc = function() {
 console.log(count);
 if (++count > 4) clearInterval(timer);
};
var timer = setInterval(callbackFunc, 300);
// 0 (0.3 sec)
// 1 (0.6 sec)
// 2 (0.9 sec)
// 3 (1.2 sec)
// 4 (1.5 sec)

var addCoffee = function(name) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve(name);
    }, 500);
  });
};
var coffeeMaker = async function() {
  var coffeeList = '';
  var _addCoffee = async function(name) {
    coffeeList += (coffeeList ? ',' : '') + (await addCoffee(name));
  };
  await _addCoffee('에스프레소');
  console.log(coffeeList);
  await _addCoffee('아메리카노');
  console.log(coffeeList);
  await _addCoffee('카페모카');
  console.log(coffeeList);
  await _addCoffee('카페라떼');
  console.log(coffeeList);
};
coffeeMaker();
  • 어떤 함수의 인자에 객체의 메서드를 전달 하더라도 이는 결국 메서드가 아닌 함수 일 뿐이다.
  • 객체의 메서드를 콜백함수로 전달하면 해당 객체를 this로 바라볼수 없게 된다
  • 전통적으로는 this를 다른 변수에 담아 콜백함수로 활용할 함수에서는 this대신 그 변수를 사용하게 하고, 이는 클로저를 만드는 방식이 많이 쓰였다.
  • Promise, Generator, async/await 등 콜백지옥에서 나오는 방법이 있다.
클로저(Closure)
  • 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상
  • 어떤 함수A에서 선언한 변수 a를 내부함수  B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상(여기서 외부로의 전달은 return이 아니라는 점이다.)
  • 객체지향과 함수형 모두를 아우르는 매우 중요한 개념
var outer = function() {
 var a = 1;
 var inner = function() {
   console.log(++a);
 } 
 inner();
}

outer();