JavaScript란?
정의
자바스크립트는 가벼운 인터프리터 언어 또는 jsut in time 컴파일 (동적 번역이라고도 하며, 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법)언어 이다. 웹 페이지를 위한 스크립트 언어로 등장했으나 많은 개발자들의 노력으로 현재는 node.js같이 비 브라우저 환경에서도 돌아간다.
JavaScript의 표준은 ECMAScript 언어 사양을 따른다. ECMA1(1997)을 시작으로 현재 우리가 쓰고 있는 틀에 가까운 ECMA5가 나왔고, 그 뒤로는 엄청난 변화없이 매년 업그레이드 되는 방식이다. 현재 ECMAScript 2021 (ES2021)까지 나왔다. ECMA6(ES2015)를 가르쳐준다고 하면 현재의 JS를 가르쳐준다고 하는 거랑 거의 같은 의미이다.
(https://grapgrap.tistory.com/39 에서 그림 발췌)
문법
값식문
값은 그냥 하나의 값을 뜻한다. (string, number ...)
식은 표현식(expression)이라고도 하며, 값을 생성하기도 하고 값으로 귀결되는 것을 만들기도한다.(연산자로 값을 만드는 식..)
문(statement)은 직접적으로 행동을 하고, 흐름을 제어하고(괄호들을 이용하여), 지시문으로 인터프리터에게 명령한다.
/* 값 */
const num = 123;
/* 식 */
num = 123 + 2;
num < 500;
/* 문 */
function num2(num) {
return num * 2;
}
리터럴
리터럴은 가장 작은 단위로 데이터를 직접 나타내는 값이다. 결국 데이터 값이며, 일반적으로 가장 작은 단위로 생각하면 값(string, number, boolean ..)에 있는 것들을 생각하는데 객체도 리터럴이다.
타입
Js에는 크게 두 가지 타입이 있다.
(https://ifpb.github.io/javascript-guide/ecma/values-and-types/ 에서 그림 발췌)
- 원시형(Primitive) -> 기본형
- 객체형(reference) -> 참조타입, 레퍼런스타입이라고도 부름.
원시형은 숫자(number), 문자열(string), 불린(boolean), null, undefined, Symbol(ES6에서 추가)로 구성되있고, 객체형은 말 그대로 객체(Object)가 있다. 배열, 함수, 날짜, 정규표현식과 ES6에서 추가된 Map, Set 같은 것들은 객체의 하위 분류에 속한다.(그래서 배열을 instanceof Object로 검사하면 true가 나온다.)
원시형과 객체형의 가장 큰 차이는 원시형은 복제가 가능하지만, 객체형은 메모리 주소값을 가지고 있는 형태라서 원본 복사가 아닌, 주소 복사로 복제가 된다.
원시형을 복제한 뒤 수정하면 복제는 불변하지만, 객체형은 복제하면 주소가 복제되기 때문에 값을 수정하면 그 값을 가리키는 주소값들은 다 값이 바뀐다.
let primitiveValue = 123;
let copyPriValue = primitiveValue;
primitiveValue = 456;
console.log(primitiveValue); //456
console.log(copyPriValue); //123
---------------------------------------------
let referenceValue = { name: "suging" };
let copyRefValue = referenceValue;
referenceValue.name = "susu";
console.log(copyRefValue.name);//susu변수
변수를 사용하는 방법에는 세가지가 있다.
1) 선언만 하는 경우
2) 할당을 하는 경우
3) 선언과 동시에 할당하는 경우
let variable; //1)
variable = 123; //2)
constr variable = 456; //3)1)의 경우 variable은 undefined이며 정의 되지 않았기 때문에 할당 값이 없다. 저 할당 값이 없는 것을 정확히 하려면 null을 할당해야한다.
(https://velog.io/@soonbee/undefined-vs-null-vs-NaN 에서 그림 발췌)
null은 매우 불완전한 값이기 때문에 조심히 써야한다. 팀에서 규칙을 정해서 쓰는 경우도 있지만 보통 undefined를 쓴다고 한다.
원시값의 래퍼객체
래퍼객체(wrapper object)는 이름 그대로 원시값을 감싸는 객체이다.
null과 undefined를 제외한 4가지 원시값 각각에 대응하는 객체가 제공된다.
/* 원시값 */
const bool = false;
const num = 123;
const str = "string";
/* 래퍼 객체 */
const bool2 = new Boolean(false);
const num2 = new Number(123);
const str2 = new String("string");원시값의 경우 typeof로 검사하면 되지만 래퍼 객체의 경우 '객체'이기 때문에 object로 나온다. 그렇기 때문에 instanceof(객체의 instance가 어떤 생성자로 생성된 것인지 검사한 뒤 boolean값으로 반환)로 검사해야한다.
console.log(typeof bool2);//object
console.log(bool2 instanceof Boolean); //true
배열
배열은 객체의 하위 항목이기 때문에 객체의 성질을 가지고 있으며, index와 value를 연결하는 dictionary형태이다. 객체처럼 매칭이 된다.
배열의 length
배열의 length는 값이 있는 것들을 세어서 반환하는 것이 아니라 값이 있는 가장 높은 index를 추적해서 그 index값을 반환하는 것이다.
const arr = [1, 2, 3];
arr[9] = undefined;
console.log(arr.length); //10
2번 index의 '3'과 9번 index의 'undefined' 사이의 값이 없지만 제일 높은 index인 undefined를 반영해서 arr.length는 10이 반환되었다.
정리하자면 중간에 빈 요소가 있다면 배열의 length는 예상 외의 값을 내놓는다.
함수 (+ 배열 요소 다루기)
배열을 수정하고, 배열의 하위항목인 map(),sort() 등의 설명은 그 전에 쓴 내용을 첨부한다.
JavaScript문법
