이론
자바스크립트 언어는 ES6에 추가된 클래스 개념으로 자바스크립트의 객체 지향 프로그래밍의 자리를 공고히 한다. 뿐만 아니라 자바스크립트 언어는 내장 함수 객체의 메소드 활용 등 함수형 프로그래밍에 가까운 언어로 멀티 패러다임을 배우는 데 좋은 언어이다. 컴파일 과정 없이 스크립트 코드를 실행하며, var, let, const 등 변수 선언과 자료형이 동적으로 변환되는 점이 자유롭다.
Node와 Web Console을 이용해서 프로그래밍을 할 수 있다.
브라우저에 내장된 웹 콘솔은 다양한 기능을 제공한다. 동일 탭에서 선언한 변수에 접근할 수 있고, 자동 변환 및 입력한 코드 이력들을 방향키로 쉽게 찾을 수 있다. 웹 콘솔은 자바스크립트의 콘솔 객체 함수를 통해 명시적으로 오류, 경고 및 정보 메시지 등을 출력한다. 출력 정보를 확인하는 방식을 응용하여 디버깅 용도로 활용할 수 있다. 이외에도 대화형 쉘 프롬프트 용도 또한 가능하다. 콘솔 입력 창을 통해 자바스크립트 코드를 실시간으로 입력, 실행하고 검증된 실행 결과를 바로 보여주는 대화형 상호 작용이 가능하다.
모든 웹 브라우저는 기본적으로 브라우저 객체 모델을 갖고 있다. 브라우저 객체 모델이란 웹 브라우저와 관련된 객체의 집합을 의미하며 대표적으로 window, location, navigator, history, screen, document 객체가 있다.
변수
자바스크립트에서 변수에 값을 저장하는 방법은 다음과 같다.
foo = "bar"
별도의 키워드 없이 변수를 할당하는 방법을 자바스크립트에서는 암시적 선언이라고 한다. 그러나 암시적 선언보다 키워드를 사용하여 변수를 선언하는 것을 권장한다. 그 이유는 변수가 선언되는 범위(Scope) 때문이다.
자바 스크립트는 다른 컴파일 언어와 달리 값을 변수로 저장할 때 어떤 유형인지 명시하지 않아도 된다. 일관된 키워드인 var을 작성하여 변수를 선언한다. 이를 동적 바인딩이라고 한다.
자료형
자바스크립트는 크게 두 가지 타입으로 구분된다.
원시 타입과 참조 타입이다.
[원시 타입]
숫자형, 불린형, 문자형, 심볼형, null, undefiend
- 숫자형
다른 프로그래밍 언어와 달리 자바스크립트는 숫자의 형태를 구체적으로 나눠서 정의하지 않는다. 정수, 부동 소수점, 작은 수, 큰 수 등 여러 유형의 숫자를 숫자형 하나로 정의한다. 이밖에도 Infinity, NaN이라는 숫자향이 존재한다. Infinity는 무한대를 의미하며 다른 어떤 수보다 가장 큰 수를 뜻한다. NaN이란 Not a number으로 산술 연산의 결과가 유효하지 않은 값 또는 숫자가 너무 커서 표현할 수 없는 값을 의미한다. 콘솔 로그에서 Infinity는 값 그대로 출력된다. Infinity로 나누면 무슨 값이든 0이 된다. 유효하지 않은 수식인 경우, 연산의 결과 NaN이 된다.
- 문자형
문자열로 표현할 때는 큰따옴표, 작은 따옴표, 억음 부호와 함께 사용한다. 다른 언어와 달리 자바스크립트는 큰따옴표 문자열과 작은 따옴표 문자열 간의 차이점은 없다. 따옴표 기호들은 단일 문장이어야 유효하나, 간혹 개행이 필요한 문장도 있다. 이때, 따옴표로 묶인 텍스트 안에 \n을 추구하면 개행이 가능하다. 백슬래시 뒤의 문자는 경우에 따라 변경할 수 있다.
- 불린형
true / false
- null, undefined
null: 비어있는 값, 존재하지 않는 값. typeof로 자료형을 확인할 때 object(객체)를 반환함. null이 객체형이라는 것은 아님.
undefined: 아무 값도 할당받지 않은 상태. undefined 원시 자료형으로 분류 됨.
[참조 타입]
원시 타입과 달리 변수에 고정된 크기를 저장하지 않고, 값의 메모리 주소를 참조한다. 참조 타입인 객체의 특징을 살펴보면 그 이유를 알 수 있는데, 객체는 속성들의 집합을 의미하며, 집합 내부에는 순서도 크기도 고정되어 있지 않다. 이렇게 고정되지 않은 값을 변수에 할당하려면 직접 해당 값을 지정할 수 없고 참조만 가능하다. 따라서 참조 타입은 값의 메모리 주소를 변수에 할당하여 값을 참조한다.
객체는 {} 안에 키 : 값 형태로 이루어진 속성들의 모음이다. 키는 반드시 문자(String) 자료형이어야 하고, 이 속성 키를 통해 해당 속성에 매핑된 값에 접근할 수 있다.
객체
원시 자료형은 하나의 값을 저장한다. 반면에 객체는 여러 개의 값을 한 번에 접근할 수 있도록 한다.
객체는 값들을 그룹으로 묶은 데이터 모음이다. 객체를 만드는 방법은 표현식으로 중괄호 {}를 사용하면 된다. 중괄호 안에 여러 값들을 넣을 수 있는데, 키와 값을 한 쌍으로 정의하며 이를 속성이라고 부른다.
하나의 키에는 하나의 값이 매핑된다. 객체 안에 중복된 키 이름은 허용하지 않으며, 두 줄 이상의 속성을 정의할 때는 콤마를 사용하여 구분한다. 들여쓰기를 해서 가독성을 높인다.
반복문
for-in 반복문은 for 반복문과 비슷하게 for 키워드를 사용한다. 단, 순회 조건과 내부 요소에 접근하는 방법에 차이가 있는데, for-in 반복문은 in 키워드를 사용한다. in 키워드를 사이에 두고 오른쪽에는 반복할 대상 변수를, 왼쪽에는 속성명을 작성한다.
연산자
[비교 연산자]
동등 연산자 ==는 비교 대상 값의 자료형이 서로 다르면 강제로 형을 바꾼 뒤에 비교한다. 값의 자료형과 상관없이 내용이 같으면 true를 반환한다. 두 값이 객체형이라면 메모리 주소를 바라보는지를 확인한다. 서로 다른 유형의 두 변수의 [값] 비교. 숫자 비교 시 데이터 값만 같은지를 체크한다.
일치 연산자 ===는 값 뿐만 아니라 자료형까지 일치하는지 비교한다. 엄격한 비교를 하는 것으로 [값 & 자료형] -> true. 숫자 비교 시 데이터 값과 데이터 형이 같은지까지 체크한다.
숫자를 숫자 리터럴과 비교하면 '=='는 그것을 허용하지만 '===' 두 변수의 형식은 동일하지 않은 경우, 값뿐만 아니라 두 변수의 유형도 확인하므로 허용하지 않는다. 즉, '==='는 'false'으로 반환하고, '=='는 'true'로 반환한다.
부등 연산자 !=는 값이 다른 경우 true를 반환한다.
불일치 연산자는 !==는 엄격한 기준으로 값의 불일치 여부를 확인한다. 같은 자료형에서 값의 내용이 다르거나 다른 자료형인 경우 true를 반환한다.
0 == false // 0값은 false와 동일하므로 true 출력
0 === false // 두 피연산자의 유형이 다르기 때문에 false 출력
console.log(typeof 0); // number
console.log(typeof false); // boolean
2 == "2" // 자동 유형 변화 비교로 true 출력
2 === "2" // false
console.log(typeof 2); // number
console.log(typeof "2"); // string변수를 비교하거나 어떤 비교를 위해 항상 '===' 연산자를 사용할 것을 권장한다.
[삼항 연산자]
조건문 ? 표현문1 : 표현문2
템플릿 문자열
카트 배열을 정의한다. 카트 배열에는 name과 price를 속성으로 가지는 객체로 구성된다.
템플릿 문자열은 ~(`)로 작성한다. 템플릿 문자열을 이용하면 $[표현식]를 이용하여 삽입 처리가 가능하다. 삽입 처리란 표현식의 계산된 결과가 문자열로 변경되어 해당 위치에 삽입되는 것을 말한다.
문법
body 태그 안에 script 태그가 존재한다.
<body>
<script>
...
</script>
</body>
조건문
if: 대다수의 조건문 사용.
switch: 한정된 데이터 값을 사용. 가독성 좋음.
'Frontend' 카테고리의 다른 글
| [JavaScript] Document & DOM (0) | 2022.10.08 |
|---|---|
| [책] 초보자를 위한 JavaScript 200제 실습 (0) | 2022.10.08 |
| [책] 생활코딩! HTML + CSS + 자바스크립트 (0) | 2022.10.06 |
| [인프런] 자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1 실습 (0) | 2022.10.03 |
| [인프런] 자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1 이론 (0) | 2022.08.10 |
