[JavaScript] 자바스크립트 기초 체크

프로그래밍 언어의 구분

• 컴파일 : 소스코드를 실행하기에 앞서 기계어로 번역하는 행위
• 컴파일러 : 컴파일을 수행하는 소프트웨어
• 인터프리터 언어 : 프로그램을 한 줄 마다 기계어로 번역하는 프로그래밍 언어
• 인터프리터 : 프로그램을 번역해서 실행시키는 소프트웨어

프로그래밍 언어의 유형

• 절차식 언어 : 절차를 순서대로 작성하는 언어
• 객체지향 언어 : 처리와 관련된 데이터를 하나로 묶어 객체 단위로 관리하는 언어
• 함수형 언어 : 프로그램을 함수를 조합하여 구현하는 언어
• 논리형 언어 : 데이터 사이의 관계와 논리를 설명해나가는 언어

자바스크립트의 특징

1. 인터프리터 언어
   • 웹 브라우저에는 자바스크립트 코드를 해석하는 JIT (Just In Time)컴파일러가 내장되어있다.
2. 동적 프로토타입 기반 객체지향 언어이다. → 클래스가 아닌 프로토타입 기반이며, 객체가 생성된 후에도 프로토타입에 속성이나 메서드를 추가, 삭제할 수 있다.
3. 동적 타입 언어이다 → 타입이 이후에도 바뀔 수 있는 언어이다.
4. 함수가 일급 객체다. → 함수형 프로그래밍 가능
5. 함수가 클로저를 정의한다 → 정의한다는 말이 어려울 수 있는데, 그냥 함수가 클로저를 만들어낼 수 있다고 생각하면 된다.

자바스크립트의 기술적 요소

1. ECMAScript (코어 언어) : 자바스크립트의 코어에 해당하는 부분
2. 클라이언트 측의 고유한 기술 요소
   • Window 인터페이스 : browser 및 window를 조작하는 기능을 제공
   • DOM : HTML 문서를 제어하는 기능을 제공
   • XMLHttpRequest : 서버와 비동기로 통신하는 기능을 제공
   • HTML5에 규정된 다양한 API를 사용할 수 있다.
     • Drag and Drop
     • Blob : 이진 데이터를 다루는 기능을 제공한다.
     • File : 로컬 파일 시스템을 읽고 쓸 수 있는 기능을 제공한다.
     • Web Workers : 프로그램 여러 개를 멀티스레드로 병렬 처리하는 기능을 제공한다.
     • Web Storage : 대용량이며, 저장기간에 제한이 없는 데이터를 로컬에 저장하는 기능을 제공한다.
     • Indexed Database : 로컬에 key-value 타입의 관계형 데이터베이스 기능을 제공한다.
     • WebSockets : 서버와의 양방향 통신 기능을 제공한다.
     • Geolocation : GPS 등의 위치 정보를 다루는 기능을 제공한다.
     • Canvas : 2차원, 3차원 그래픽스 기능을 제공한다.
3. 서버 측 자바스크립트의 고유한 기술 요소
   • Node.js : 구글이 개발한 자바스크립트 실행환경 (다른 대체제도 있긴 하나, Node.js가 절대적인 위치에 있다.)

자바스크립트 프로그램 작성법

• 자바스크립트는 유니코드 문자로 작성한다. 따라서 한글이나 일본어 등 굳이 영어가 아니어도 사용할 수 있다.
• 자바스크립트는 대소문자를 구분한다.
• 자바스크립트는 구문을 모두 토큰으로 분해한 후 분석(파싱)한다. → (tokenizer → lexer → parsing)
  • 토큰과 토큰 사이는 공백으로 구분된다.
  • 구분자 ( 산술 연산자, 괄호, 쉼표와 콜론, 세미콜론, 마침표) 앞뒤의 공백문자는 생략할 수 있다.
• 빈문장 ( 세미콜론만 있는 경우 )이 필요한 경우도 있다. → 7장 참고

변수

• 변수를 초기화하지 않을 경우 변수의 값에는 undefined가 들어간다.
  • 변수의 초기화는 var a = 1, b = 2, c = 3; 처럼 한 문장으로 표현할 수도 있다.
  • 선언자를 붙이지 않고 변수에 값을 대입한 경우 자바스크립트 엔진이 그 변수를 전역 변수로 대신 선언해준다. → ECMAScript5 부터는 오류로 취급한다.
• 변수 선언의 끌어올림 (호이스팅, hoisting)이 있다 (자바스크립트만의 고유한 특징)
• await, enum, implements, package, protected, interface, private, public은 ECMAScript6 이후에 추가될 것이기에, 아직은 예약어가 아니나 사용하지 않는 것이 좋다.

데이터 타입

• 동적 타입 언어 : 실행할 때에 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있는 언어

자바스크립트의 데이터 타입

• 원시 타입 : 숫자, 문자열, 논리값, 특수한 값 (undefined, null)과 심벌
  • 숫자
  • 문자열
    • 자바스크립트를 HTML의 요소에 끼워넣을 때에는 문자열로 작성해야 한다. ( ex. onclick="alert('thanks!')" )
    • 유니코드 밖의 문자는 써로게이트 페어를 통해 표현된다.
  • 특수한 값
    • undefined : undefined는 할당하지 않은 결과로, 코드로 undefined를 대입하 ㄴ것이 아니라 자바스크립트 엔진이 undefined로 초기화한 결과이다.
      • 값이 아직 할당되지 않은 변수
      • 없는 객체의 프로퍼티를 읽을 경우의 값
      • 없는 배열의 요소를 읽으려고 시도했을 때의 값
      • 아무것도 반환하지 않는 함수가 반환하는 값
      • 함수를 호출했을 때 전달받지 못한 인수의 값
• 객체 타입 : 그 외의 타입들
  • 객체 타입은 기본적으로 참조를 통해서 이루어진다. 따라서 변수에 객체 타입을 대입하면, 그 변수는 해당 객체를 가리키는 상태가 된다.

ECMAScript6부터 추가된 데이터 타입

• 심벌 (Symbol) : 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값, 상수를 지정할 때 사용하면 좋을 것.
  • Symbol("a")를 각기 다른 변수에 대입한 후 비교 연산을 하면 false로 나온다.
  • Symbol.for("a")와 같이 for 메서드를 사용하면 각기 다른 변수들의 비교 연산이 true로 나온다 → 문자열로 연결된 심벌이 생성된다.
  • Symbol.keyFor() 메서드를 사용하여 파라미터로 심벌이 저장된 변수를 주면 그 변수의 key가 되는 문자열을 알 수 있다.
• 템플릿 리터럴
  • 이스케이프 문자가 없어도 줄바꿈을 할 수 있다.
  • String.raw를 사용하면 시퀀스 문자를 그대로 출력할 수 있다. ( ex. String.rawMan errs as long as\nhe strives.; )
  • 플레이스 홀더 (보간 표현식) 을 사용할 수 있다.

객체의 기초1 (객체 리터럴)

객체를 생성하고 나서 이후에 프로퍼티나 key 값을 줄 수도 있다. 만약 없는 프로퍼티를 참조할 경우 undefined가 나온다. 빈 객체를 생성할 수도 있다. 이 내용은 이미 다 아는 내용이므로 간단하게 정리했다.

• delete 연산자로 프로퍼티를 삭제할 수도 있다.
• in 연산자로 프로퍼티가 있는지 확인할 수 있다.
• 객체는 참조 타입이다

함수의 기초

• 함수도 호이스팅이 가능하다.
• 자바스크립트에서는 함수가 객체이기 때문에 함수를 선언하면 내부적으로는 그 함수의 이름을 변수로 한 함수 객체가 만들어지고, 함수 이름 변수에는 그 객체가 참조된다.
  • 따라서 변수에 다른 함수를 참조시키는 것도 가능하다. ( ex. const sq = square; console.log(sq(5)); )
• 앞서 말한 것처럼 객체는 참조 타입이기 때문에, 함수의 파라미터로 객체를 주게 되면 함수 안에서 객체의 값을 바꾸는 것이 가능해진다 ( C언어에서의 pointer와 동일하다. )

인수 여러 개를 우아하게 전달하는 방법

• 인수가 많아지면 착각하기 쉬워지고 프로그램을 변경 시 인수 개수가 바뀌게 되면 프로그램 전체를 바꿔야 하는 문제점이 있다.
• 이럴 경우 객체의 파라미터에 모두 담아서 객체 하남ㄴ을 전달하는 것이 좋다.
• 받을 때에는 구조분해할당으로 받으면 된다.
• 객체의 값이 바뀌는 것에 주의해야 한다.

변수의 유효 범위

• 대부분의 프로그래밍 언어는 프로그램의 구문으로 변수의 유효 범위를 결정하는 어휘적 범위를 채택한다, 자바스크립트도 마찬가지.
• 자바스크립트의 변수는 전역 변수와 지역 변수가 있다.
• 함수 안에서 선언자 없이 변수를 선언하면 전역 변수로 취급된다.
• let, const
  • const로 선언한 것이라고 해도 객체 타입이거나 배열인 경우에는 프로퍼티 또는 프로퍼티 값을 수정할 수 있다.

함수 리터럴로 함수 정의하기

• 함수 리터럴로 함수를 정의하면 호이스팅이 발생하지 않는다. 생각해보면 당연한 게 const a = function (x) { return x; }; 형태라면 a에 대입하는 것인데, 선언이 아닌 정의는 원래부터 호이스팅이 될 리 없다.
• 함수 리터럴은 기본적으로 익명함수이지만, 익명함수에도 이름을 붙일 수는 있다. 이는 바깥 스코프에서는 사용할 수 없어 선언할 때만 존재하지만, 디버거를 할 때는 확인이 가능하므로 유용하다.

객체의 메서드

객체 내에서도 함수를 만들 수 있다. 이 때 함수 리터럴을 사용한다. 객체의 메서드는 this를 통해 객체의 프로퍼티에 접근할 수 있다. 또한 프로퍼티이기 때문에 나중에 추가하거나 수정할 수도 있다.

객체의 기초2 (생성자)

생성자로 객체 생성하기

이제는 class (내부적으로는 동일하지만, 어쨌거나 새로운 예약어) 가 생겨서 클래스처럼 사용할 수 있게 되었지만, 이전에는 이런 게 없었다. 그래서 객체를 생성하기 위해 new 라는 예약어를 사용했다.

function Card (suit, rank) {
    this.suit = suit;
    this.rank = rank;
}

const card1 = new Card("하트", "A");

• 다른 언어에서는 클래스를 통해 만든 객체를 인스턴스, 즉 실체라고 부르지만, 자바스크립트에서는 생성자 함수도 엄연한 함수 객체로서 실체다. 따라서 표현 상 인스턴스라고 말은 해도 인스턴스만이 실체가 아니다.

객체의 기초3 (내장 객체)

• 자바스크립트에는 처음부터 사용할 수 있는 내장 객체 (built-in object)가 마련되어 있다.
• 내장 객체는 자바스크립트라는 프로그래밍 언어의 뼈대를 구성한다.
• 내장 객체는 Object, String, Number, Boolean, Array, Date... 등, 미리 만들어놓은 생성자들을 의미한다.
  • Date
  • Function ( function이 아니라 Function이다. )
    • 함수의 매개 변수가 될 n개의 인자와, 함수의 몸통을 인자로 받아서 생성하는 내장 객체이다.
    • 동적으로 함수를 생성하는 경우에 쓰지만, 악성 유저가 악성 코드를 전달하여 문제를 일으킬 수 있어서 잘 사용하진 않는다. 함수를 생성하는 기능보다는 래퍼 객체를 제공하는 점에서 의의를 둔다.
  • 기타 내장 객체
    • JSON
    • Math
    • Reflect : 프로그램의 흐름을 가로채는 기능을 제공
  • 전역 객체 : 전역 프로퍼티 (undefined, NaN, Infinity), 생성자 (Object(), String(), Nuber() ), 그 외 전역함수와 내장 객체 등 전역에서 사용 가능한 모든 객체를 지칭

자바스크립트 객체의 분류

• 네이티브 객체 : ECMAScript 사양에서 정의된 객체, 앞서 말한 모든 내장 생성자 및 객체들을 의미
• 호스트 객체 : ECMAScript에서 정의한 것은 아니지만, 실행 환경에 의해서 정의된 객체. 예컨대 브라우저에서만 사용가능한 객체들.
• 사용자 정의 객체 : 사용자가 정의한 객체.

배열의 기초

• const a = [2, , 4] 와 같이 값을 주지 않으면 undefined가 들어가게 된다. 좌측의 선언 및 정의는 length가 3인 배열이 되는 셈.
• 자바스크립트 배열에는 모든 타입의 값이 올 수 있다.
• 배열의 length를 더 작은 값으로 치환하면 배열의 뒤 요소들을 삭제하게 된다.
• new Array로 배열을 생성할 수 있다. 리터럴과 다른 점은, new Array에 양의 정수를 단 1개만 넣을 경우, length가 해당 값인 빈 배열을 만들라는 의미가 된다는 점.
• 배열도 사실 객체다. a[1] 대신에 a["1"]을 써도 먹힌다.
  • delete 연산자로 배열의 프로퍼티를 삭제하면 그 값이 undefined가 된다.
  • 자바스크립트는 배열도 객체기 때문에 실제 프로퍼티의 수가 length보다 작은 희소 배열이라는 개념이 있다.

연산자

• 표현식 : 결과적으로 어떤 값으로 평과되는 것
• 산술 연산자
  • 자바스크립트에서는 정수끼리 나누어도 부동소수점으로 된다.
  • 나머지연산자의 결과값도 부동소수점이다.
  • • 연산자는 피연산자 중 하나가 문자열이면 나머지 하나도 문자열로 만든다.
  • 계산할 수 없는 경우에는 NaN으로 평가된다. true면 1, false나 null이면 0으로 표현한다. undefined는 NaN으로 평가된다.
  • Math 객체의 프로퍼티에는 사술연산자와 복잡한 수학적 연산을 지원하는 다양함 메서드들이 있다
  • 부동 소수점 오차
    • 일반적으로 값이 비슷한 두 숫자의 뺄셈에서 발생하며, 10으로 딱 떨어지는 값끼리에서도 발생한다. (어차피 컴퓨터는 2진수로 계산하기에 10진수로 나뉘어 떨어지는 건 의미가 없다.)

문자열 제어하기

• • 연산자는 피연산자 중 하나가 문자열 또는 문자열로 변환될 수 있는 객체이면 다른 피연산자의 타입도 문자열로 변환하고, 문자열끼리의 + 연산 결과는 문자열 연결이다.
    • 1 + { } 의 결과는 "1[object Object]"가 된다.
• String() 생성자를 통해서 문자열을 만들 수 있다.
  • String()이 어떤 역할인지?
  • 일반적인 문자열과 new String()을 통한 객체 생성의 차이
  • 문자열 메서드
    • str.substring(a,b) : a번째 문자부터 b번째 문자 이전까지의 문자열을 가리킨다. (a,b가 모두 양수라 가정)
    • str.slice(a, b) : 위와 같다. (a,b가 모두 양수라 가정)
    • str.slice(음수값) : 마지막에서 음수값 만큼을 반환.
    • str.slice(음수값, 음수값) : 마지막 문자열부터 세서 앞 파라미터 문자부터 뒤 파라미터 문자 이전의 문자열
    • str.indexOf("t")
    • str.indexOf("i", 10)
    • str.split(" ")
    • str.replace("p", "P")
    • str.toUpperCase()
    • str.toLowerCase()
    • str.endsWith(".")
    • str.includes("thing")
    • str.charCodeAt()
    • str.codePointAt() → 써로게이트 페어를 지원한다.
  • String 생성자가 가지고 있는 프로퍼티
    • String.length
    • String.fromCharCode()
    • String.fromCharPoint()
    • String.prototype
    • String.raw
• 모든 문자열, 그리고 문자는 불변하다.

논리 연산자와 관계 연산자

• 같은 인덱스를 가지고 있는 배열이라고 해서 비교 연산 결과가 true인 것은 아니다. 서로 같은 배열을 참조하고 있는 경우에만 true를 반환한다.
• 단락평가
  • 논리곱 연산자와 논리합 연산자는 true, false 와 같은 논리 값 대신에 마지막으로 평가한 피연산자의 값을 반환한다.
  • 0을 제외한 모든 숫자는 논리연산 결과 true로 된다. ( Boolean ( -100 ) === true // true )
  • && (논리곱) 연산자는 오류를 제거하는 데에 유리하고, || (논리합) 연산자는 null, undefined 값이 아닌 값을 선택할 때 유용하다.
    • 논리합을 사용할 때 전자의 값이 0이나 "" 등처럼 false로 평가되는 값이면 사용이 불가능하다는 단점이 있다.

비트 연산

• 나중에 깊게 공부해보자 :)))

기타 연산

• typeof → number, string, boolean, undefined, object, symbol, function으로 표시된다. null 값은 object로 나온다.
• ?: (삼항연산자)
• void
• , (쉼표)
• delete
• new
• in
• instanceof
• eval() : 원래는 함수이고 연산자가 아니지만, 연산자의 역할을 담당하고 있었다. string을 받아서 JavaScript 코드로 해석하는 함수이다.

명시적 타입 변환

• Number 객체의 메서드를 사용하여 숫자에서 문자열로 바꾸기
  • toString()
  • toLocaleString()
  • toFixed()
  • toExponential()
  • toPrecision()
• String 함수를 활용 ( 객체를 생성하는 게 아니라 문자열을 반환하는 함수이다. ) 하여 문자열로 바꾸기
• 수식을 활용한 묵시적 변환 ( s - 0 또는 +s) 으로 문자열에서 숫자로 변환하기
• parseInt, parseFloat 함수
• Number 함수
• !! 연산을 통해 boolean형으로 바꾸기

웹 브라우저에서의 입출력

window 객체의 window는 생략하고 사용할 수 있다. ( ex. window.alert, window.prompt, window.confirm )

Console

• console.dir : 객체의 대화형 목록을 출력
• console.error : 오류 메시지를 출력
• console.info : 메시지 타입 로그를 출력
• console.log : 일반 로그를 출력
• console.time : 처리 시간 측정용 타이머를 시작
• console.timeEnd : 처리 시간 측정용 타이머를 정지하고 타이머 시작으로부터 걸린 시간을 밀리초로 출력
• console.trace : 스택 트레이스를 출력
• console.warn : 경고 메시지를 출력

이벤트 처리기 등록하기와 타이머 알아보기

<html>
    <head>
        <script>
            const displayTime = () => {
                const now = new Date();
                console.log("현재 시각은 " + now.toLocaleString());
            };
        </script>
    </head>
    <body>
        <button onclick="displayTime()">현재 시각 출력 버튼</button>
    </body>
</html>

이벤트의 종류

• onclick : 클릭
• ondbclick : 더블 클릭
• onmousedown : 마우스 버튼을 눌렀을 때
• onmouseup : 마우스 버튼에서 손가락을 떼었을 때
• onmousemove : 마우스 포인터가 HTML 요소 위에서 움직일 때
• onmouseout : 마우스 포인터가 HTML 요소를 벗어났을 때
• onmouseover : 마우스 포인터가 HTML 요소 위에 놓여 있을 때
• onkeydown : 키보드의 키를 눌렀을 때
• onkeyup : 키보드의 키에서 손가락을 떼었을 때
• onchange : input 요소의 값이 바뀌었을 때
• onblur : input 요소가 포커스를 잃었을 때
• onfocus : input 요소에 포커스를 맞췄을 때
• onselect : 텍스트 필드 등의 텍스트를 선택했을 때
• onsubmit : 폼 제출 버튼을 눌렀을 때
• onload : HTML을 모두 읽었을 때
• onunloadWeb : 웹 페이지가 메모리에서 내려갈 때 ( ex. 다른 페이지로 이동할 때 )
• onabort : 페이지나 이미지 읽어 들이기가 중단되었을 때
• onerror : 페이지나 이미지를 읽어 들이는 동안 오류가 발생했을 때
• onresize : HTML 요소의 크기가 바뀌었을 때

처음 보는 것들

• document.write() : HTML 태그를 String 형태로 넣어줄 수 있다. element 형태로, body에 반영된다.
• Math.sqrt() : 루트 값을 구하는 Math 함수
• dir *.js : cmd 창에서 dir 이후에 파일 명을 입력하면 그 파일만을 찾아낼 수 있다. 예제로는 와일드 카드를 사용하여 전체 탐색하였다.
• prompt() : 브라우저 상에서 alert와 같은 창을 띄워 입력을 받는다.
• 써로게이트 페어
• 심벌 (Symbol)
• String.raw
• 객체 리터럴에서 값이 저장될 위치를 확보하는 것을 플레이스 홀더라고 한다.
• delete 연산자로 객체의 프로퍼티 쌍을 삭제해버릴 수 있다.
• 객체는 참조타입이라서 함수의 파라미터로 전달하여 값을 변경한 경우 함수의 바깥의 객체도 함께 변경된다.
• 함수 리터럴로 정의된 함수는 호이스팅이 발생하지 않는다.
• Reflect : 프로그램의 흐름을 가로채는 기능을 제공하는 내장 객체
• 자바스크립트 객체의 분류
• 배열의 length를 조절해서 다른 요소들을 삭제할 수 있다.
• 희소 배열
• 래퍼 객체 (142p)

나중에 깊게 공부해볼 것

• 기본적으로 위에 있는 것들은 다시 보도록 한다.
• Date 객체
• Math의 프로퍼티, 메서드들
• 부동소수점 오차 문제
• 문자열의 함수들
• 비트연산
• Console 객체

해결 못한 의문

• window.String.length는 왜 항상 1이 나오는가? 그리고 이것의 의미는 무엇인가?
• console.tme과 console.timeEnd 메서드를 통한 시간은 왜 항상 다르게 나오는가?