[JavaScripts] JavaScripts 시작하기

JIIJIIJ·2023년 4월 18일

JavaScript

목록 보기

1/23

JavaScript

정의

웹 페이지에 이벤트 발생 시 어떻게 작동하는지 디자인/프로그래밍 등 웹 페이지 동작을 제어.

클라이언트 측 웹(브라우저)에서 실행되며, 웹의 동작을 구현하는 객체(object)기반의 스크립트 언어이다.

쉽게 말해, HTML은 자동차의 뼈대, CSS는 외관, JavaScript는 자동차의 동력원인 엔진이라고 할 수 있다.

특징

객체 기반의 스크립트 언어이다.

동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.

객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

실행 환경 구성

HTML 파일에 포함시키기

외부 JavaScript파일 사용하기

Web Browser에서 바로 입력하기

Web Browser로 실행하기

HTML파일에 직접 JavaScript 코드를 작성 후 웹 브라우저로 파일 열기

Chrome의 개발자 도구 - Console 탭에서 결과 확인 가능

.js 확장자를 가진 파일에 JavaScript를 작성하고, 해당 파일을 HTML에 포함 가능

결과 확인

특별하게 웹 브라우저에서 바로 실행할 수 있는 JavaScript문법들을 Vanilla JavaScript라고 부른다.

기초문법

식별자

식별자(identifier)는 변수를 구분할 수 있는 변수명을 뜻한다.

반드시 문자, 달러($) 또는 밑줄(_)로 시작.

대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작.

예약어는 사용이 불가능 하다. EX) for, if, function...

카멜 케이스(camelCase)

변수, 객체, 함수에 사용된다.

파스칼 케이스(PascalCase)

클래스, 생성자에 사용된다.

대문자 스네이크 케이스(SNAKE_CASE)

상수(constants)에 사용된다.

변수 선언 키워드

let

블록 스코프 지역 변수를 선언(추가로 동시에 값을 초기화)

재할당은 가능하나 재선언은 불가능하다.

const

블록 스코프 읽기 전용 상수를 선언(추가로 동시에 값을 초기화(반드시 초기값 설정))

재할당과 재선언 모두 불가능하다

var

변수를 선언(추가로 동시에 값을 초기화)

재할당과 재선언 모두 가능하다.

"호이스팅"되는 특성으로 인해 예기치 못한 문제가 발생할 수 있기 떄문에,
var대신 const와 let을 사용하는것을 권장한다.

함수 스코프(function scope)를 가진다.

변수 선언시 var, const, let 키워드 중 하나를 사용하지 않으면 var로 선언된다.

데이터 타입

원시 타입

Number - 정수 도는 실수형 숫자를 표현하는 자료형

String - 문자열을 표현하는 자료형

Template Literal

내장된 표현식을 허용하는 문자열 작성 방식

Backtick(``)을 이용하며, 변수를 문자열 안에 바로 연결 할 수 있다.

EX) const age = 10 / const message = '홍길동은 ${age}살 입니다.

null - 값이 없을을 나타낸다.

undefined - 값이 할당되지 않은 변수를 나타낸다.

Boolean - 참과 거짓을 표현하는 자료형

참조 타입

Object - 이름과 값을 가진 속성(property)들의 집합으로 이루어진 자료구조

객체는 속성(property)들의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현

key

문자열 타입만 가능

key 이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현

value - 모든 타입(함수포함) 가능

객체 요소 접근

점., 또는 대괄호[] 가능

key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능

Array - 여러 개의 값을 순서대로 저장하는 자료구조

키와 속성들을 담고 있는 참조 타입의 객체

순서를 보장하는 특징이 있다.

주로 대괄호[]를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근이 가능하다.

function - function 키워드를 통해 생성하며, 호출 시 실행 될 코드를 정의

함수 선언식(function declaration)

함수 표현식(function expression)

표현식 내에서 함수를 정의하는 방식

함수 표현식은 함수의 이름을 생략한 익명 함수로 정의가 가능하다.

연산자

할당 연산자

오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자

비교 연산자

피연산자들(숫자, 문자 Boolean등)을 비교하고 결과값을 boolean으로 반환하는 연산자

동등 연산자(==)

두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환한다.

비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

예상치 못한 결과가 발생할 수 있으므로 특별한 경우를 제외하고 사용하지 않는다.

일치 연산자(===)

두 피연산자의 값과 타입이 모두 같은 경우 true를 반환한다.

같은 객체를 가리키거나, 같은 타입이면서 같은 값인지를 비교한다.

동등 연산자보다 좀 더 엄격한 비교가 이루어지며, 암묵적 타입 변환이 일어나지 않는다.

논리 연산자

세 가지 논리 연산자로 구성된다

and 연산은 %%, or 연산은 ||, not 연산은 !

삼항 연산자

3개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자

가장 앞의 조건식이 참이면 :(콜론) 앞의 값이 반환되며,
그 반대일 경우 : 뒤의 값이 반환되는 연산자이다.

삼항 연산자의 결과 값이기 때문에 변수에 할당이 가능하다.

스프레드 연산자

배열이나 객체를 전개하여 각 요소를 개별적인 값으로 분리하는 연산자

주로 함수 호출 시 매개변수로 배열이나 객체를 전달할 대 사용

조건문

if statement

if, else if, else

조건은 소괄호(condition)안에 작성

실행 할 코드는 중괄호 {}안에 작성

블록 스코프 생성

반복문

while

조건문이 참이기만 하면 문장을 계속해서 수행한다.

for

특정한 조건이 거짓으로 판별될 때 까지 반복

for...in

인덱스를 반환한다

객체(objecs)의 속성을 순회할 때 사용한다.

속성 이름을 통해 반복한다.

배열도 순회 가능하지만 인덱스 순으로 순회한다는 보장이 없으므로 권장하지는 않는다.

for...of

반복 가능한 객체를 순회할 떄 사용한다.

속성 값을 통해 반복한다.

반복 가능한 객체의 종류 : Array, Set, String