오늘은 자바 스크립트의 기본 문법에 대해 알아보겠다.

Do it html+css+자바스크립트 웹 표준의 정석

위 동영상 강좌도 참고하여 작성하였다.

사칙연산

덧셈 +, 뺄셈 -, 곱셈 *, 나눗셈 /을 사용하면 된다.

데이터 타입

js의 기본 데이터 타입

자바스크립트의 데이터 타입은 typeof() 함수를 이용하여 확인할 수 있다.

> typeof(32)
"number"

js에는 총 6종류의 기본 데이터 타입이 있다.

그 중 중요한 4가지를 간략히 소개하겠다.

자료형	표현 방법	예시	역할
Number	숫자 형태	24.1	숫자의 표현
String	따옴표로 감쌈	"hello"	문자의 표현
Boolean	영문 소문자	true/false	참과 거짓의 표현
undefined	변수 선언	let x	변수에 값이 할당되지 않았음을 안내

Number(넘버)

숫자를 표현하기 위한 데이터 타입이다.
소수점을 활용할 수도 있으며, 소수점 없이 정수로 사용해도 된다.

앞서 얘기한 사칙연산이 성립된다.

String(스트링)

문자를 표현하기 위한 데이터 타입이다.
스트링을 표현하려면 두 개의 따옴표가 필요하다.

큰 따옴표"" 와 작은 따옴표'' 모두 사용이 가능하다.

스트링과 스트링 사이에 덧셈이 가능하다.
덧셈을 사용하면 두 개의 스트링을 하나로 이어붙여 준다.

> "abc" + "def"
abcdf

스트링은 뒤에 점. 을 찍어서 다양한 method를 사용할 수 있다.

스트링의 자주 사용되는 함수 몇 가지를 소개하겠다.

메서드	실행 예시	용도
length	"text".length	문자의 길이를 알려줌
startWith	"text".startWith("te")	스트링이 괄호 안의 문자로 시작하는지 검사
endWith	"text".endWith("xt")	스트링이 괄호 안의 문자로 끝나는지 검사
indexOf	"abcde".indexOf("c")	괄호 안의 스트링이 어디에 위치하는지 알려줌. 없으면 -1
repeat	"abc".repeat(3)	스트링을 여러 번 반복
replace	"abcde".replace("c", "q")	스트링 일부분을 다른 내용으로 교체
split	"abcde".splic("c")	괄호 안에 입력받은 내용을 토대로 스트링을 쪼개줌
toUpperCase	"abc".toUpperCase()	알파벳을 대문자로 바꿔줌
toLowerCase	"ABC".toLowerCase()	알파벳을 소문자로 바꿔줌

Boolean(불리언)

참과 거짓을 표현하기 위해 사용한다.
소문자 true와 false 두 종류가 있다.
true 는 숫자 1이며 false 는 숫자 0이다.

따라서 불리언과 넘버 사이에는 사칙연산이 성립한다.

> true + 1
2

undefined

'정의되지 않았음'의 의미이다.
데이터가 입력될 수 있는 공간임에도 비어 있다는 뜻으로 사용된다.

우리가 의도하여 undefined 라는 데이터 타입을 사용할 일은 많지 않다.
주로 에러 메세지에서 마주하게 된다.
마주하게 된다면 어딘가 데이터 누락이 발생한 것이 아닌지 살펴보자.

타입캐스팅

데이터 타입의 종류를 바꾸는 것을 타입캐스팅이라 부른다.
자주 사용되는 타입캐스팅 명령어 종류는 세 개뿐이니, 외워 두자.

명령어	예시	용도	비고
String	String(3) > "3"	데이터를 스트링으로 변환	대부분의 데이터에 적용 가능
Number	Number("3") > 3	데이터를 넘버로 변환	True와 False는 각각 1과 0으로 변환됨. "b"와 같이 숫자로 변경하기 곤란한 데이터는 NaN이 됨
Boolean	Boolean(0) > false	데이터를 불리언으로 변환	숫자 0이나 NaN과 같이 의미 없는 경우에만 false가 나오고, 유의미한 데이터를 입력받은 경우 true가 나옴

인덱싱과 슬라이싱

인덱싱

인덱싱은 데이터를 분석하여 우리가 원하는 순서에 위치한 데이터를 뽑아준다.

> "abcde"[2]
"c"

인덱스는 0부터 시작한다.
대괄호 []을 적용하는 것으로 인덱싱을 수행할 수 있다.

슬라이싱

하나의 값이 아니라 여러 개의 값을 가져오고 싶을 때 slice() 메서드를 사용한다.

> "abcdefgh".slice(3, 5)
de

괄호 안에 시작점부터 종료 지점을 입력하는 것으로 연속된 값을 가져올 수 있다.

변수

변수는 데이터를 담아 두기 위한 그릇 같은 존재이다.
변수를 선언해보자.

> let a
undefined

let은 지금부터 변수를 만들겠다는 의미이다.
let 으로 선언한 변수는 블럭변수로, 블럭(), {} 안에서 활용이 가능하다.

var을 이용하여 선언할 수도 있다.

> var x

이는 지역변수이다.

그 외에도 const를 이용하여 선언할 수도 있다.
이는 고정된 값을 사용할 때 사용한다.

> const a = 3

이번에는 변수에 값을 할당해보자.

> let a
> a = 3
> let b = 4

변수의 앞뒤에 ++ 또는 -- 가 붙으면 변수에 입력된 숫자가 1 증가하거나 감소한다.
++ 나 -- 가 변수의 어느쪽에 위치하냐에 따라 증감의 순서가 달라진다.

조건문

조건문은 if문을 사용한다.

if문의 사용 방법은 아래와 같다.

if (조건){
  수행할 행동
} else if (조건){
  수행할 행동
} else {
  수행할 행동
}

if문의 조건문에서 주로 비교 연산자를 사용한다.

명령여	용도
===	왼쪽과 오른쪽에 있는 값이 동일한지 비교
!==	왼쪽과 오른쪽에 있는 값이 다른지 비교
<, >	왼쪽과 오른쪽에 있는 값의 대소를 비교(미만, 초과)
<=, >=	왼쪽과 오른쪽에 있는 값의 대소를 비교(이하, 이상

이때 같다 ===와 같지 않다 !==에 다른 언어들과 달리 =이 1개 더 붙어 있음을 주의하자.

반복문

반복문은 for문을 사용한다.

for(초기문; 조건문; 증감문){
  반복하려는 내용
}

for문은 위와 같이 사용한다.

예시를 들어보겠다.

for(let i=0; i<5; i++){
  console.log("hello")
}

위에서 console.log() 함수는 콘솔에 출력하는 함수이다.

함수

함수를 만드는 방법

js에서 함수를 만드는 방법은 아래와 같다.

function 함수이름(){
  	실행할 내용
}

또는 매개변수를 받아서 사용한다.

function 함수이름(매개변수){
  실행할 내용
}

function은 함수를 만들겠다는 의미의 명령어이다.

매개변수

매개변수는 함수에 입력된 값을 임시로 저장해 두기 위한 변수이다.

> function plus(x){
  console.log(x+2)
}
> plus(3)
5

매개변수는 여러 개를 가질 수 있다.

리턴

함수를 만들면서 별도의 출력값을 만들어 줄 때는 리턴을 사용한다.

> function plus(x, y){
  	return x + y
}
> let t = plus(3, 4)
> t
7

배열

데이터를 질서 있게 한 줄로 늘어둔 것을 배열이라고 한다.

배열을 만들 때는 대괄호 [] 를 사용한다.

> let a = [1, 2, 3, 4]
> a
(4) [1, 2, 3, 4]

사용하는 콘솔에 따라서 화면에 배열을 출력하면
맨 앞에 소괄호()를 통해 배열의 길이를 안내해 주기도 한다.

배열도 스트링과 마찬가지로 인덱싱을 할 수 있고, 슬라이싱도 할 수 있다.

> a[2]
3
> a.slice(2, 4)
(2) [3, 4]

배열을 상대로 덧셈 연산을 수행하면 합쳐진다.
그러나 유용한 결과가 아니므로 사용을 잘 하지 않는다.

js에서 배열을 이어붙일 때는 concat() 을 사용한다.

> let a = [1, 2, 3, 4]
> let b = [5, 6]
> a.concat(b)
(6) [1, 2, 3, 4, 5, 6]

객체

객체 만들기

js에서 말하는 객체는 데이터를 효과적으로 저장하기 위한 도구이며, 딕셔너리와 유사하다.
다른 언어에서의 객체와는 조금 다음 개념일 수 있다.

객체를 만들 때는 변수의 선언과 함께 할당하는 값으로 중괄호 {} 를 적어주면 된다.

let id = {
  name: "rann",
  age: 21,
  books: "frontend",
  job: "Engineer"
}

객체에 수록된 데이터를 값이라고 부르며
이 값을 찾아내도록 도와주는 책갈피를 키라고 부른다.

값이 여러개인 객체를 만들 대는 키: 값 쌍 사이에 콤마 ,를 넣어준다.

객체에 저장된 데이터 불러오기

객체의 데이터를 불러올 때는 점.을 사용한다.

> id.name
"rann"
> id.age
21

점을 찍는 대신 인덱싱과 유사한 방식으로도 값을 불러올 수 있다.

> id["name"]
"rann"

객체에 새로운 값 추가하기

객체에는 새로운 키와 값을 추가할 수 있다.

객체에 값을 추가하는 방법은 두 가지이다.
점. 을 찍거나, 인덱싱과 유사한 방법으로 값을 추가할 수 있다.

> a.name = "test"
> a.name
"test"

> a["name"] = "test2"
> a["name"]
"test2"

두 코드의 실행 결과는 동일하다.

JSON

js에서 사용하는 객체의 규격을 JSON이라고 부른다.
이는 JavaScript Object Notation의 줄임말이다.

JSON은 아주 활용 빈도가 높은 규격이다.
JSON에 삽입할 수 있는 데이터 종류는 아래와 같다.

데이터 종류	사용
넘버	정수와 소수 모두 가능
스트링	반드시 큰따옴표(") 사용
불리언	true와 false 사용
배열	대괄호와 쉽표 사용
객체	객에 창네 객체를 넣을 수도 있다
null	텅 빈 값으로, 아무런 값도 없다는 의미로 null을 기재한다

이렇게 JavaScript의 기본 문법을 알아보았다.
다음에는 JS를 HTML과 함께 사용하는 법을 공부해보도록 하겠다.