* 이전과 중복되는 내용들은 제외
자바스크립트란
- 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있음
* 컴파일 : 자연어 → 기계어로 번역
- 스크립트 : 동시통역, 번역본을 만든 후 반복 사용 할 수 없어 메모리 사용 높음, 즉각 실행에 최적화되어 실시간에 유리
웹 브라우저 + 서버사이드 실행
- 자바스크립트는 브라우저뿐만 아니라 서버에서도 실행 가능
- node.js 는 서버에서 실행되는 자바스크립트 환경
- 이 외에도 자바스크립트 엔진(JavaScript engine)이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작
- 브라우저엔 '자바스크립트 가상 머신’이라 불리는 엔진을 내장
- V8 – Chrome과 Opera
- SpiderMonkey – Firefox
- IE는 버전에 따라 'Trident’나 'Chakra’라 불리는 엔진을 사용. 'ChakraCore’는 Microsoft Edge에 사용되며, 'SquirrelFish’는 Safari에 사용.
브라우저에서 할 수 있는 일
- 모던 자바스크립트는 ‘안전한’ 프로그래밍 언어. 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않음 (하드웨어 조작 X)
- 브라우저 환경에선 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있음
브라우저에서 할 수 없는 일
- 브라우저는 보안을 위해 자바스크립트의 기능을 제약해
악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 방지 - 몇가지 제약사항들
- 파일 입출력
- 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약 O
- 사용자가 브라우저 창에 파일을 ‘끌어다 두거나’ <input> 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용 (다이렉트 X)
2. Same Origin Policy
-
- 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없음 (탭끼리 모름)
- 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외 적용. 단, 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근 불가
- 이런 제약사항을 '동일 출처 정책(Same Origin Policy)'이라 부릅니다. 이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야 하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 함
자바스크립트 관련 언어들
- 브라우저에서 실행 되기 전에 자바스크립트로 트랜스파일(transpile, 변환) 할 수 있는 새로운 언어들이 많이 등장
- 자바스크립트로 트랜스파일이 가능한 언어 몇 가지
- CoffeeScript는 자바스크립트를 위한 'syntactic sugar’, 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성 가능
- TypeScript는 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 '자료형의 명시화(strict data typing)'에 집중해 만든 언어. Microsoft가 개발
- Flow 역시 자료형을 강제하는데, TypeScript와는 다른 방식을 사용. Facebook이 개발.
- Dart는 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어. Google이 개발.
nodejs 설치 (LTS 버전)
** LTS long term supportred
** npm node package manager
VS code 플러그인 - Code Runner 설치
- code runner는 vscode에서 node.js를 실행시켜주는 플러그인
- vscode에서 js파일을 하나 만들고 코드를 입력한 후 우측 상단의 재생버튼(단축키 Ctrl + Alt + N) 을 누르면 node.js환경에서 자바스크립트가 실행
코드 구조
문 statement
- 문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미
- 코드엔 원하는 만큼 문을 작성. 이때, 서로 다른 문은 세미콜론으로 구분
- 문의 집합으로 이뤄진 것을 프로그램이라고 하며, 문을 작성하고 순서에 맞게 나열하는 것 = 프로그래밍
* 변수 선언문, 할당문, 함수 선언문, 조건문, 반복문 등 …
표현식 (expression)
- 표현식은 값으로 평가될 수 있는 문(statement)
- 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조
- 리터럴은 값으로 평가됩니다. 따라서 리터럴도 표현식
ex ) 1 + 2; 1>2;
리터럴
- 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용 해 값을 생성하는 표기법
ex ) True False → 논리 리터럴 아님 ’true’ → 문자열 리터럴
값 (value)
- 값(value)이란 표현식(expression)이 평가(evaluate)되어 생성된 결과
- 모든 값은 데이터 타입(data type)을 가지며 메모리에 2진수 비트의 나열로 저장
- 예를 들어, 메모리에 저장된 값 01000001을 숫자로 해석하면 10진수로 65이지만 문자로 해석하면 A
ex ) 10 + 20 (표현식) 결과값 30 (값)
세미콜론과 세미콜론 자동삽입 기능 (ASI)
- 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행
- 문들을 중괄호로 묶은 코드 블록({ … }) 뒤에는 세미콜론을 붙이지 않음
- 자바스크립트에서 세미콜론은 옵션입니다. 엔진 자체적으로 문의 끝 지점에 세미콜론을 넣어주는 **세미 콜론 자동삽입 기능(ASI: automatic semicolon insertion)**이 있기 때문
❗ 하지만 ASI기능이 잘못 삽입하는 경우도 발생하므로 항상 붙이는 것을 권장
주석 (Comment)
- 한 줄짜리 주석은 두 개의 슬래시 //로 시작
- 여러 줄의 주석은 슬래시와 별표 /*로 시작해 별표와 슬래시 */로 끝
- ❗중첩 주석은 지원하지 않음
변수와 상수
- 개발자가 메모리에 저장한 30이란 값을 사용하기 위해서는 30이 저장된 곳의 메모리 주소값을 알아야 함
- 이 때 변수라는 개념을 사용해서 30이 저장된 공간에 사람이 식별하기 쉽도록 이름을 붙임 (ex: result)
변수의 선언
- 변수를 선언한다는 것은 메모리에 데이터를 저장하는 공간을 확보하는 것을 의미
- 변수를 선언할 때는 var, let, const 키워드를 사용 (ES6)
- 선언 때만 키워드 사용 (초기화, 재할당 시 사용 X)
변수의 초기화와 할당, 재할당
- 변수를 선언만 하고 값을 저장하지 않으면 일단 정의되지 않았다는 뜻을 가진 값인 undefined가 할당됩니다.
- 특정 값을 저장하고 싶으면 할당(대입)연산자 = 을 사용하여 값을 할당해야 합니다.
- 변수의 선언과 함께 동시에 값을 할당할 수도 있습니다. ex) var age = 27;
- 언제든지 저장된 값을 변경할 수 있고 이를 변수의 재할당이라고 함
var fruit; // 변수 선언
fruit = "자몽"; // 변수 초기화
console.log(fruit); // undefined
var food = '볶음밥'; // 변수 선언 + 초기화
변수 이름 규칙
- 식별자 이름은 중복을 허용하지 않고 대/소문자를 구분
- 식별자 이름은 숫자만으로 구성하거나 숫자로 시작하면 안됨
- 식별자 이름에 공백을 포함할 수 없음
- 식별자 이름에는 특수문자를 사용하면 안됨(예외: _, $)
- 키워드(예약어)는 식별자 이름으로 사용 불가능
ex) if, for, while, var 등…
** 이름 관례 (Convention)
상수 (constant)
- const로 선언한 변수를 '상수(constant)'. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생
- 기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습
- 이런 상수는 대문자와 밑줄로 구성된 이름으로 명명 (대문자 + 스네이크 케이스)
데이터 타입
- 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어 = ‘동적 타입(dynamically typed)’ 언어
↔ 정적 타입 언어(자료형 유지, C, JAVA 등...) - 다른 언어들과 다르게 숫자형은 정수와 실수 타입을 구분하지 않음 (정수도 실수로 저장)
- 숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN 같은 '특수 숫자 값(special numeric value)'이 포함
Infinity 무한대(∞). 어느 숫자든 0으로 나누면 무한대 - NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값입니다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환됩니다.
var num = 27;
var num2 = 90.5;
console.log(typeof num); // number
console.log(typeof num2); // number
console.log(num / 5); // 5.4
// 자바라면?
27 / 5 // 5
27.0 / 5 // 5.4
* 태그 작성 시 백틱을 활용하면 좀더 가독성이 좋음
var element = '<nav><ul><li>딸기</li></ul><nav>';
console.log(element);
element = '<nav>\n\t<ul>\n\t\t<li>딸기</li>\n\t</ul>\n<nav>';
console.log(element);
// 백틱은 줄바꿈 가능
element = `
<nav>
<ul>
<li>딸기</li>
</ul>
<nav>`;
console.log(element);
// 줄바꿈 syntax error
// var element = '
// <nav>
// <ul>
// <li>딸기
// </li>
// </ul>
// <nav>';
// console.log(element);
null vs undefined
null 타입
- null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값
- null 값은 오로지 null 값만 포함하는 별도의 자료형
- 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값
- var age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음
undefined 타입
- undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용
- 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined 가 자동으로 할당
변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용 (의도O, 수동 할당)
undefined 는 값이 할당되지 않은 변수의 초기값 (의도X, 자동 할당)
** ‘’, 0 은? 빈 문자열이란 데이터가 있고, 0이란 데이터가 있음 ≠ null
xx += 1; // xx = xx + 1; // xx값 + 1 을 대입
xx -= 1; // xx = xx - 1; // xx값 - 1 을 대입
xx * 3; // 15 xx는 여전히 5 표현식일 뿐 xx에 대입하지 않았기 때문
xx *= 3; // 15
xx /= 5; // 3
xx ** 2; // 9
xx %= 4; // 1 9%4=1 을 대입
