[Javascript] 1

Javascript

Js는 클라이언트측 웹에서 실행하는 언어로, 웹 페이지가 이벤트 발생 시 어떻게 작동하는지 디자인하고 프로그래밍하며,  웹 페이지 동작을 제어하는 데 널리 사용된다. HTML 문서의 컨텐츠를 동적으로 변경할 수 있는 언어로, 웹이라는 공간 내에서 채팅, 게임 등 다양한 동작을 할 수 있게 된 기반이다.

웹 브라우저의 역할

URL을 통해 Web을 탐색한다. HTML/CSS/JS를 이해한 뒤 해석해서 사용자에게 하나의 화면으로 보여준다. 즉, 웹 서비스 이용 시 클라이언트의 역할을 한다. 즉, 웹 페이지 코드를 이해하고, 보여주는 역할을 하는 것이 웹 브라우저다.

JavaScript Engine

무조건 닫는 body 위에 js코드 작성해주어야 한다.

EcmaScript

EcmaScript는 Javascript를 표준화하기 위해 만들어졌고, 표준화된 프로그래밍 언어를 의미한다. Javascript의 기본적인 문법, 데이터 타입, 객체 모델, 함수, 연산자 등을 정의한다.

JavaScript는 2칸 들여쓰기를 사용하고, block은 if, for, 함수에서 중괄호 내부를 의미한다. python과 다르게 javascript는 중괄호를 이용해 코드 블럭을 구분한다.

세미콜론

자바스크립트는 세미콜론을 선택적으로 사용이 가능

세미콜론이 없으면 ASI에 의해 자동으로 세미콜론이 삽입됨(ASI:Automatic Semicolon Insertion)

변수와 식별자

식별자 정의와 특징

식별자는 변수를 구분할 수 있는 변수명을 말한다.

식별자는 반드시 문자, 달러, 밑줄로 시작한다.

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

예약어를 식별자로 사용할 수 없다.

camelCase

: 변수, 객체, 함수에 사용한다.

PascalCase

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

SNAKE_CASE

: 상수에 사용한다. (상수: 개발자의 의도와 상관없이 변경될 가능성이 없는 값을 의미한다.)

변수 선언 키워드

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

const: 블록 스코프 읽기 전용 상수를 선언한다.(추가로 동시에 값을 초기화한다.)

var: 변수를 선언한다.(추가로 동시에 값을 초기화한다.)

선언

• 변수를 생성하는 행위 또는 시점

할당

• 선언된 변수에 값을 저장하는 행위 또는 시점

초기화

• 선언된 변수에 처음으로 값을 저장하는 행위나 시점

let

• 재할당 가능 & 재선언 불가능

let number = 10 #선언 및 초기값 할당
number = 20 # 재할당

let number = 10 #선언 및 초기값 할당
let number = 20 #재선언 불가능

블록 스코프를 갖는 지역 변수를 선언하고, 동시에 원하는 값으로 초기화할 수 있다.

const (기본적으로 권장한다.)

• 재할당 불가능 & 재선언 불가능

const number = 10 #선언 및 초기값 할당
number = 10 #재할당 불가능

const number = 10 #선언 및 초기값 할당
const number = 20 #재선언 불가능

선언과 반드시 초기값을 설정해야하며, 이후 값 변경이 불가능하다. let과 동일하게 블록 스코프를 가진다.

var

• 재할당 가능, 재선언 가능
• ‘호이스팅’되는 특성으로 인해 예기치 못한 문제가 발생해 ES6 이후부터는 const와 let을 사용하는 것을 권장한다. 함수 스코프를 가진다.

+호이스팅

• 변수 선언 전 참조할 수 있는 현상. 변수 선언 이전 위치에서 접근 시 undefined를 반환한다.

변수 선언 시 var, const, let 중 하나를 이용하지 않으면 자동으로 var로 선언된다.

데이터 타입

원시 타입(Primitive type)과 참조 타입(Reference type)으로 구분

원시 타입

Number, String, null, undefined, Boolean

Number : 정수나 실수형 숫자를 표현하는 자료형

NaN을 반환하는 이유

1. 숫자로서 읽을 수 없다
2. 결과가 허수인 수학 계산식
3. 피연산자가 NaN
4. 정의할 수 없는 계산식
5. 문자열을 포함하며 덧셈이 아닌 계산식

String: 문자열을 표현하는 자료형으로, 작은 따옴표나 큰 따옴표 모두 가능하다. 줄 바꿈은 \n으로 하고, ${변수} 형태로 변수 삽입한다.

Empty Value

• 값이 존재하지 않음을 표현하는 값으로 null과 undefined가 존재한다.

null : 변수의 값이 없음을 의도적으로 표현할 때 사용한다

undefined: 값이 정의되어 있지 않음을 표현하는 값. 변수 선언 이후 값을 할당하지 않으면 자동으로 할당된다!

typeof 연산자를 통해 타입을 확인하면 차이를 잘 볼 수 있다.

typeof null > object

typeof undefined > undefined

Boolean

• T/F으로 표현하는 값으로, 조건문과 반복문에서 유용하다.

참조 타입

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

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

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

Object

• 객체는 property의 집합이고, 중괄호 내부에 K-V 쌍으로 표현한다.
• key : 문자열 타입만 가능하다. key 이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어 표현
• value : 모든 타입 가능
• 객체 요소 접근 : . 또는 대괄호로 가능하다. key 이름에 띄어쓰기와 같은 구분자가 있으면 대괄호 접근만 가능하다.

함수 선언식

• 일반적은 프로그래밍 언어의 함수 정의 방식

function add(num1, num2) {
	return num1 + num2
}

add(2,7) //9

함수 표현식

• 표현식 내에서 함수를 정의하는 방식으로, 함수의 이름을 생략한 익명 함수로 정의가 가능하고, 이름을 명시하는 것도 가능하다. 이 경우 함수 이름은 호출에 사용되지 않고 디버깅 용도로 사용된다. 함수 선언식을 사용하면 함수 선언 전 함수 호출이 가능한 호이스팅이 발생할 수 있다. 이를 방지하기 위해 함수 표현식을 사용해야 한다!

const sub = function(num1, num2) {
	return num1 - num2
}
sub(7,2) // 5

자동 형변환

할당 연산자

• 오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자
• 다양한 연산에 대한 단축 연산자 지원

동등 연산자

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

자동 형변환 예시

console.log('5'-1) // 4
console.log('5'+1) // '51'

일치 연산자

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

암묵적 타입 변환이 발생하지 않는다. 두 비교 대상의 타입이 같은지 비교하는 방식이다

논리 연산자

and 연산은 &&, or 연산은 ||, not 연산은 !으로 한다.

단축 평가를 지원한다.

ex ) false && true는 false를, true || false는 true를 return한다.

T && F //false
T && T //true

F || T // true
F || F // false

!true // false

#단축 평가
1 && 0 //0
0 && 1 // 0
4 && 7 // 7
1 || 0 // 1
0 || 1 // 1
4 || 7 // 4

삼항 연산자

3개의 피연산자를 사용해 조건에 따라 값을 반환하는 연산자. 가장 앞의 조건이 참일 경우 :(콜론)의 값이 반환되며, 그 반대의 경우 뒤의 값이 반환된다. 삼항 연산자의 결과 값이기 때문에 변수에 할당이 가능하다.

true ? 1:2 //1
false? 1:2 //2

const result = Math.Pi > 4? 'Yep':'Nope'
console.log(result) //Nope

스프레드 연산자(Spread Operator)

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

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

얕은 복사를 위해서도 활용이 가능하다.

조건문

if statement

if, else if, else

• 조건은 소괄호 안에 작성해야 한다.
• 실행할 코드는 중괄호 안에 작성해야 한다.
• 블록 스코프를 생성

반복문

• while
• for
• for … in
• for … of
• Array.forEach

for … in과 for …of의 차이

for in은 속성 이름을 통해 반복하고, for of는 속성 값을 통해 반복한다