JavaScript

1. Javascript 기초(1)

char1ey 2022. 11. 2. 00:17
목차
1. Javascipt 개요

  1.1. 컴파일러와 인터프리터
  1.2. 자바스크립트의 특징
    1.2.1. 자바스크립트의 엔진
  1.3. 자바스크립트의 연결
2. 연산자

  2.1. 기본 연산자
  2.2. 단항 산술연산자
  2.3. 비교 연산자
3. 변수(variable)

  3.1. 변수 선언 방법
    3.1.1. 변수명 설정과 표기법
  3.2. 예약어의 종류
    3.2.1. var
    3.2.2. let
    3.2.3. const
4. 데이터 타입

  4.1. 데이터 타입과 연산
  4.2. boolean
5. 조건문 : if문
6. 반복문 : for문

 

1. Javascript 개요

Javascript(자바스크립트)는 기존의 HTML과 CSS만으로는 부족했던 동적인 요소를 추가해 주기 위한 프로그래밍 언어다.

이름이 비슷해 Java와 Javascript와 헷갈려 할 수도 있는데 둘은 완전히 다르다는 것은 꼭 알아두도록 하자.

일반적으로 프로그래밍 언어는 객체지향언어 혹은 함수형언어 두 가지로 나뉘지만, Javascript는 두 가지와는 다른 Prototype 언어이다. Prototype의 장점은 객체지향, 함수형 모두 가능하다는 데에 있다.

 

1.1 컴파일러와 인터프리터

 

컴파일러

  • 컴파일이란 코드 전체를 다른 언어로 바꾸어 주는 것이다. 컴파일러는 이러한 기능을 자동으로 수행하는 소프트웨어이며, 한마디로 번역기라고 할 수 있다. 이를 이용하는 것으로 C++, Java가 대표적이다.

인터프리터

  • 코드를 한 줄씩 실행하고 결과값을 얻어내, 한꺼번에 처리하는 컴파일러와 차이가 있다. 이 방식을 채택한 언어는 Python, Javascript 등이 대표적이다.

 

1.2 자바스크립트의 특징

 

  • 인터프리터 방식을 채택했다.
  • 프론트엔드와 백엔드 모두 사용가능하다. (Javascript만의 장점)
  • 코드를 작성하면 기계어로 변환해야하기 때문에 text로 작성하면 엔진이 실행하여 번역해준다. 즉, 엔진이 필요하다.
  • 타입지정이 없어서 입문자가 배우기가 수월하다.

 

1.2.1 자바스크립트의 엔진

 

  • 브라우저
  • NodeJS

브라우저에서의 Javascript는 동적요소들을 구현하기 위해 생겨났다. 하지만, 속된말로 치밀하게 구성되지 못했던 족보없는 저급한 언어였으나, 2015년 ES6, 2017년 ES7 로 인해 업그레이드 되면서 Javascript의 스펙도 같이 올라가게 되었다. 

이후 Javascript의 스펙이 아까워서 나오게 된게 NodeJS다.

 

NodeJS에서의 Javascript는 브라우저가 아닌 내 컴퓨터에 초점이 맞춰져있어서, 내 컴퓨터의 Input/Output의 조작이 되면서 웹서버를 만들고 통신이 가능해져 벡엔드에서도 사용이 가능하게 되었다.

 

두 환경에서의 동작환경이 달라서 문법이 조금 달라진다. 브라우저의 언어를 가져와서 NodeJS에 넣는 행위를 주의하도록 하자.

 

1.3 자바스크립트의 연결

 

 CSS의 연결과 마찬가지로 연결하는데 입력하는 태그가 <style>, <link/> 가 <script>로 바뀌었다고 생각하면된다.

HTML에 적을 때, <body>, <head> 둘 중 한군데에만 들어가면 된다. <style>과 마찬가지로 태그 안에서는 JS의 문법을 작성해야한다. JS의 확인은 개발자 도구의 console 창에서 확인이 가능하다.

<script type="text/javascript">console.log("Hello, World!")</script>

<script src="./index.js" type="text/javascript"></script>

<그림 1> hello, world!

2. 연산자

 

2.1 기본 연산자

 

연산자를 사용할 때에는 연산자의 앞이나 뒤에 값이 있어야한다.

  • 덧셈 연산자 : +
  • 뺄셈 연산자 : -
  • 곱셈 연산자 : *
  • 나눗셈 연산자 : /
  • 나머지 연산자 : %
  • 거듭제곱 : **
  • 대입연산자 : =

[여기서 대입연산자는 여태 배워왔던 equal의 개념이 아니라 대입(넣는다)의 개념이다]

 

2.2 단항 산술연산자

 

연산자는 기본적으로 앞, 뒤에 값이 와야하는 데, 그렇지 않은 연산자를 단항 연산자라고 한다.

let num = 1
num = num +1

console.log(num) // 2

위의 연산은 대입 연산자를 기준으로 오른쪽 부터 실행하여 왼쪽에 값을 대입한다. 이를 짧게 줄여주는 연산자가 있다.

let num = 1
num++

console.log(num) // 2

위의 연산자 ++ 은 num = num +1 을 줄여준 것이다. 마찬가지로 -- 연산자도 num = num - 1을 산출한다.

연산자 ++ 에는 특이한 점이 있는데 위치에 따라 의미가 살짝 바뀐다.

let num2 = 2
console.log(num2++) // 2
console.log(++num2) // 4

num2++ 라는 연산은 먼저 num2가 가진 2를 가지고 와서 증가시킨다는 뜻이다.

++num2 라는 연산은 먼저 증가시켜놓고 num2를 가지고 와서 증가시킨다는 뜻이다.

 

아래의 결과로 감을 익혀보자.

let num2 = 2
                // 호출값 - > 저장값
console.log(num2++) // 2 -> 3
console.log(++num2) // 4 -> 4
console.log(--num2) // 3 -> 3
console.log(num2++) // 3 -> 4
console.log(num2--) // 4 -> 3
console.log(++num2) // 4

왼쪽은 실제로 console에 출력되는 값이나 실제값은 오른쪽의 저장값이라고 할 수 있다.

 

비슷한 연산 줄임으로 다음과 같은 경우들이 있으므로 인지해두자. 각줄의 연산을 단항 연산자로 치환한 코드이다.

let num3 = 5

num3 = num3 + 3
num3 += 3

num3 = num3 - 5
num3 -= 5

num3 = num3 * 4
num3 *= 4

num3 = num3 / 4
num3 /= 4

 

2.3 비교 연산자

비교 연산자는 결과값을 true나 false로 결과를 출력한다.

console.log(1==1) // true
console.log(1==="1") // false

비교 연산자 == 는 글자와 숫자를 구분 못하는 반면, ===는 데이터의 타입까지 함께 구분해준다. 그러므로 되도록 ===를 쓰도록 해야한다.

 

console.log(1 != 1) // 1과 1은 다른가? false
console.log(1 !== 1) // 1과 1은 다른가? false

!는 같지 않음을 뜻하게 만들어 준다. ==, ===과 마찬가지로 !=, !== 이 있다. 전자는 데이터 타입을 구분하지 못하지만, 후자는 데이터 타입을 구분하므로 되도록 !==을 쓰도록하자. 

 

결론적으로 비교연산자를 사용하면 아래에서 언급할 boolean 타입의 데이터를 산출한다.

 

이외에도 익숙한 비교 연산자들이 있다. 이들은 모두 boolean 타입의 데이터를 산출한다.

  • >
  • <
  • >=
  • <=

3. 변수(variable)

변수라는 것은 데이터를 잠시 저장하는 공간으로 사용되는 곳이다. 상자에 담아 둔다는 개념이 이해하기 편하다.

 

3.1 변수 선언 방법

에약어[let, const] 변수명[아무글자] = [데이터] 

단, 변수명에는 예약어, 숫자로 시작하는 단어는 안된다.

var 번호 = 1
console.log(번호)

 

해석해보자면,

1. var로 번호라는 변수를 선언하여 1이라는 데이터를 번호에 집어 넣는다

2. 번호를 출력한다. 결과값 = 1

변수의 목적은 데이터를 저장하는 것이다. 즉, 변수를 선언하면 데이터를 저장할 공간이 확보된다.

변수를 선언만 하고 데이터를 꼭 입력하지 않아도 된다. 아래 코드처럼 같이 사용해도 된다.

var 번호
번호 = 1
console.log(번호)

여기서 주의할 점은 코드는 위에서 아래로 읽히기 때문에 아래와 같이 순서가 바뀌어 버리면 작동하지 않는다(에러).

console.log(번호)
var 번호 = 1

 

3.1.1 변수명  설정과 표기법

개발자들끼리의 약속과도 같은 것이니 기억해두자.

  • 카멜 표기법 : 두번째 단어 첫글자에 대문자 사용
  • 파스칼 표기법 : 단어마다 첫글자 대문자 사용
  • 스네이크 표기법 : 단어와 단어사이 언더바(_) 사용
var firstName // 카멜 표기법
var FirstName // 파스칼 표기법
var first_name // 스네이크 표기법

 

3.2 예약어의 종류

 

3.2.1 var

var는 Javascript의 오랫동안 사용해왔던 변수 선언이며, hosting 이라는 개념으로인해 오류가 많이 발생하여, 요즘에는 잘 사용하지 않는다. 잠시 잊어도 좋다.

3.2.2 let과 const

let 번호
번호 = 1
console.log(번호) // 1

번호 = 10
console.log(번호) // 10

let은 위와 같이 값을 선언하고 바꿀 수 있다. 이것을 할당, 재할당이라고 한다.

쉽게말해 값을 바꿀 수 있다. 하지만, 다시 선언. 즉, 재선언은 불가능하며 이를 위반할 시 에러가 발생한다.

let 번호
번호 = 1
console.log(번호)

let 번호 // error​

<그림 2> 재선언시 발생 에러

const는 상수라고 하며 선언과 동시에 값을 할당해야한다. 즉, 대입연산자를 반드시 써주어야한다.

그리고 const는 let과 다르게 재할당이 안된다.

const 번호
번호 = 1 //에러

<그림 3>값을 넣지 않은 const 에러

const 번호 = 2
번호 = 3

<그림 4> 재할당시 const 에러

const 번호 = 1
const 번호 = 2

4. 데이터 타입

데이터에는 각자 타입이라는게 정해져있다. 이 타입에 따라 값이 바뀌니 꼭 알아두어야 한다.

 

[데이터 타입]

원시형 데이터

  • 문자형
  • 숫자형
  • boolean
  • undefined : 선언만하고 아무런 값을 할당하지 않았을 때, 들어가는 값
  • null : undefined와 비슷하다
  • ...

객체형 데이터(참조형)

  • 배열
  • 객체
  • 함수
  • ...

 

아래에는 두가지 변수가 있다. 이 두가지 변수는 같아 보이지만 다른 데이터이다.

let string = '1'
console.log(string)

let string2 = 1
console.log(string2)

<그림 5> 아래의 1이 미세하게 파란색이다

위의 1은 글자, 아래의 1은 숫자이다.

 

기본적인 데이터에는 글자와 숫자가 있다. 글자를 표현하는 방법은 " "로 나타난 것들이다.

이 외에도 많은 타입이 있지만, 우선 글자와 숫자를 구별하는 능력을 늘려야한다.

Javascript에서는 숫자를 Number타입, 글자를 String타입이라고한다.

 

4.1 데이터 타입과 연산

 위에서 본 데이터들과의 연산들은 결과가 어떻게 되는지 알아보자.

let string = 'Java'
let string2 = 'script'
let num = 1
let num2 = 2


console.log(string + string2)
console.log(num + num2)
console.log(string + num)
console.log(num + string)

<그림 6>

글자데이터 끼리는 합연산을 했을 경우 붙어서 나오고, 숫자데이터 끼리는 연산이 진행되어 산출된다.

하지만, 데이터와 숫자가 연산 되었을 경우에는 에러가 나지않고, 붙어서 나오게 된다.

 

4.2 boolean

 

글자와 숫자가 아닌 boolean이라는 데이터 타입이 있다.

컴퓨터는 1, 0 = 1bit으로 값을 저장한다. 이 때, 1은 참(true), 0은 거짓(false) 으로 표현된다.

 

예를 들면

 

5 > 3 ---> 1 (참)

3 > 5 ---> 0 (거짓)

 

이렇게 표현된 데이터를 boolean 타입이라고 한다. 비교연산자들과 함께 쓰인다.

5. 조건문 : if문

 

비교 연산을 하고나서 true 혹은 false 값에 따라 다른 값을 출력할 수 있도록 하는 에약어 if에 대해 알아보자.

if (boolean) {
    // true일때 실행
} else {
    // false일때 실행
}​

if문의 문법은 위의 코드와 같다 true 값이 ()에 들어 갔을때 첫번째 { }을 실행시키고, false 값을 입력하게되면 else 뒤의 { }를 실행시킨다.  예시를 보자

if (true) {
    console.log("true")
} else {
    console.log("false")
}

위 코드를 진행했을 때 true를 입력했기 때문에 결과값은 "true"가 출력된다.

 

if (1 > 2) {
    console.log("true")
} else {
    console.log("false")
}

위의 코드 입력값에는 비교 연산자가 들어가있다. 입력값란에 연산자를 먼저 실행되고나서 값을 출력하고 코드를 진행한다.

 

6. 반복문 : for문

원하는 값을 구하기 위해 코드를 여러줄 작성해야 하는 작업을 간단하게 단 몇줄로 줄 일수 있다면, 시간의 효율이 상당할 것이다. 이를 가능하게 하는게 for문이다.

for(1.초기값; 2.종료조건; 3.증감값 ) {

}

 

기본적으로 위의 코드 구조를 가지고 있다. for뒤의 괄호에는 초기값을 설정; 종료조건을 설정; 증감값 설정; 으로 이루어 져있다.

  1. 초기값 : 변수선언후 할당
  2. 종료조건 : boolean 비교연산자
  3. 증감값

 

말로하는 것보다는 직접 해보는게 이해가 편하다.

for(let i = 1; i <= 100; i++) {
    console.log(i)
}

위의 코드를 해석해보자.

  1. 초기값 : let i = 1; 부터시작
  2. 종료조건 : i <= 100; i가 100이 되면 종료 (= i는 100보다 작거나 같아야한다.)
  3. i++ ; i = i +1 인데 i++은 증가시키지 않은 i를 먼저 출력후 ++ 연산을 하여 i에 넣는 개념이다.

2번의 종료조건에 부합할 때 까지 이 코드를 반복해서 출력해 주는 것이 for문이다.

다시 한번 정리 해보자면,

 

  1. ( )안의 조건을 먼저 실행시킨다.
  2. 초기값 실행 후 할당
  3. true 조건이 되면 3번으로 이동하여 증가
  4. i++은 증가 시키기 전에 진행 후 증가
  5. 그 후 값을 다시 증가된 i 값을 가지고 실행
  6. 반복
  7. i 값이 조건에 걸리게 되면 출력을 관둔다.

이는 직사각형, 마름모와 화살표로 이루어진 알고리즘 그림으로 이해하면 좀 더 쉽게 이해할 수 있다.

 

if문과 for문을 활용하면 좀 더 다양하게 식을 표현할 수 있다. 이는 많이 해보고 경험해야 늘기 때문에 시간을 투자해 보도록 하자.