✅1. JS(JavaScript)란?

객체(Object) 기반의 스크립트 프로그래밍 언어이다.

인터프리터 언어이다.
ECMAScript 사양을 준수하는 범용 스크립팅 언어이다.
자바와 직접적인 연관은 없으며, 웹의 동적 동작을 구형한기 위해 제작하였다.

JS의 역사

Mocha → LiveScript → JavaScript로 명칭이 변경되었다.

ECMAScript란?

Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어이다.
자바스크립트를 표준화하기 위해 만들어졌으며, 액션스크립트와 J스크립트 등 다른 구현체도 포함한다.

Ecma International : 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구

✅2. 기본 입출력

입출력

• 사용자가 프로그램과 상호작용하기 위한 방법으로, 입력과 출력을 아우르는 개념이다.
• Input / Output의 머리 글자를 따서 I/O로 줄여서도 표기한다.
• 운영체제에서의 대표적인 입출력은 표준 입력 / 표준 출력 / 표준 오류 출력

1) 표준입력(stdin) stardart in

• 일반적으로 컴퓨터의 키보드의 응답을 받아 입력한다.
• 프로그램의 데이터를 추가하기 위한 입력 장치이다.
• 알고리즘에서는 문제의 정답 확인, 디버깅 용으로 사용한다.

2) 표준출력(stdout) standart out

• 일반적으로 컴퓨터의 모니터에 문자열로 출력한다.
• 프로그램의 실행 상태 혹은 실행 결과를 보고 판단한다.
• 알고리즘에서는 문제의 정답 확인, 디버깅 용으로 사용한다.

✅3. 기본 용어

• JavaScript는 문법의 대부분을 C, C++, Java로부터 차용하여 제작된 스크립트 언어이다.
• 다수의 표현식(expression)으로 하나의 명령문(statement)이 만들어지며, 명령문으로 프로그램이 수행한다.
• 하나의 명령문 끝은 개행 문자(Enter) 혹은 세미콜론(;)으로 표시한다.

표현식이 모여 명령문이 되고 명령문들이 모여 응용 프로그램이 된다.

키워드

• 자바스크립트에서 문법을 만들 때 미리 정해진 용도로 동작하기 위해 정의해 놓은 단어이다.
• 자바스크립트에 예약된 키워드(예약어) 목록
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar

예약어는 정말 많아서 하나하나 다 외울수는 없고 사용을 하면서 자연스럽게 외울 수 있게 된다.
예약어는 식별자로 사용할 수 가 없다.
대표적인 예약어 : ex) const, if, for 등등

식별자

• 스크립트에서 변수가 함수에 이름을 붙일 때 사용하는 단어이다.
• 대소문자를 구별하며 유니코드 문자셋을 이용한다.
• 자바스크립트 내 식별자 규칙
  • 키워드 사용 불가
  • 숫자로 시작 불가
  • 특수문자는 _와 $만 가능
  • 공백 문자 포함 불가

주석

• 프로그램 구현 시 개발자의 설명 및 이해를 쉽게 도와주는 문장으로 실제 실행 코드에는 포함되지 않는다.
• 주석의 종류는 단일 행 주석 // 과 다중 행 주석 /* */이 존재한다.

✅4. 변수와 상수

이 목차에서 변수, 상수에 대해 알면서 const와 let, var에 차이를 알 수 있을 것이다. 막연하게 항상 var만 사용하던 나는 const와 let에 대한 개념이 1도 없었는데 이번 기회에 알 수 있게 되었다.

변수란?

• 변경 가능한 값을 저장하기 위한 기억 공간(memory)
• 사용하기 전 반드시 선언이 필요하다.
• 중복 선언이 불가능하다.
• 키워드는 let을 사용한다.

let value = 0;
let str = "문자열";
let obj = {
	name : "cho",
    age : 100
};
let arr = ["a", "b", "c"];

상수란?

• 변경 불가능한 값을 저장하기 위한 기억 공간이다.
• 사용하기 전 반드시 선언 필요하다.
• 중복 선언이 불가능하다.
• 키워드는 const를 사용한다.
• 상수는 보통 대문자로 표기한다.

const MAX_VALUE_ONE = 300;
const DEFAULT_MSG = "안녕하세요";

// ****** const로 선언한 상수들은 절대로 변경이 불가능하다. ********

호이스팅(Hosting)

• 코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어 올리는 작업이다.
• var의 변수/함수의 선언만 위로 올려지고, 할당은 올려지지 않는다.
• let/const 변수 선언과 함수 표현식에서는 호이스팅이 발생하지 않는다.

위에 설명이 무슨 얘기인지는 코드를 통해 알아보자.

test;
console.log(test);

이렇게 코드를 작성을 하고 console.log로 찍어보면

ReferenceError: test is not defined

위와 같이 test라는 변수가 선언되지 않았다는 오류가 발생한다. 하지만 var로 변수를 선언하고 console.log로 찍어보면

test;
console.log(test);
var test = 0;

결과 : undefined

결과가 undefined로 출력이 된다. 이렇게 변수를 var test가 마치 test;보다 위에 작성된 것처럼 결과가 출력이 된다. 유호한 범위의 코드 상단으로 끌어 올린다는 내용이 바로 이 내용이다. 이렇게 끌어 올리는 작업을 호이스팅 이라고 한다.
실제로 어떻게 적용하는 것이냐면

test;
console.log(test);
var test = 0;   

위에서 작성한 코드는 아래의 코드를 작성한 것처럼 작동이 된다.

var test;
console.log(test)
test = 0

const와 let을 사용했을 때는 호이스팅이 일어나지 않은 것을 확인할 수 있다.

test;
console.log(test);
let test = 0;

결과 : ReferenceError: Cannot access 'test' before initialization

test;
console.log(test);
const test = 0;

결과 : ReferenceError: Cannot access 'test' before initialization

✅5. 자료형

• 목적에 따라 특별한 성질이나 정해진 범주를 갖고 있는 데이터의 종류이다.
• 자바스크립트에서는 6가지의 원시 타입 자료형과 1가지의 객체 타입 자료형으로 구성되어있다.

원시타입(primitive type)

1) Boolean :

• 논리적으로 true, false
• 논리적인 값을 표현하는 자료형이다.
• 참인 true와 거짓인 false, 두 가지 값만 존재한다.
• 주로 조건문 등에서 동작 판단의 기준으로 사용한다.

2) null :

• 존재하지 않거나 유효하지 않은 주소 표시
• null은 값이 비어 있다는 의미로 표현되는 자료형이다.
• 존재하지 않는(nothing), 비어 있는(empty), 알 수 없는(unknown)값을 나타내는데 사용한다.
• 하위 버전 호환성으로 object 표기

3) undefined :

• 선언 후 값을 할당하지 않은 변수
• undefined는 값이 할당되어 있지 않은 상태를 나타낼 때 사용되는 자료형이다.
• 변수 선언 후 초기화 하지 않는다면, undefined가 자동으로 할당된다.

4) number :

• 정수, 실수 등의 숫자, 정수의 한계는 -2^53 ~ +2^53
• number(숫자형)은 정수, 부동소수점(floatin point) 숫자를 표현하는 자료형이다.
• number와 관련된 연산은 사칙연산이 대표적이다.
• number에는 일반적인 숫자 외에 Infinity, -Infinity, NaN(Not a Number) 같은 특수 숫자 값이 포함된다.
• number에서는 2^53 - 1보다 큰 값을 사용할 수 없으며, 더 큰 정수를 다루고 싶다면 bigint 자료형 사용이 필요한다.

5) string :

• 빈 문자열이나 글자들을 표현하는 문자열
• string은 문자, 문자열을 표현하는 자료형이다.
• 큰 따옴표 : "" , 작은 따옴표 : '', 백틱 : ``

6) symbol : 문자열과 함께 객체 property로 사용, ES6에 추가됨

객체타입

1) Object :

• Object는 다수의 원시 자료형을 포함하거나 복잡한 개체(entity)를 표현하늘 수 있는 자료형이다.
• Object는 Object() 혹은 중괄호 ({})를 통해 생성한다.
• Object의 개체는 key:value 형태로 표현하며, 접근은 object.key 또는 object[key] 형태로 접근할 수 있더.
• 변수내에 메모리가 저장되어있고 reference하여 데이터 접근을 한다.