JavaScript

HTML/CSS로 뼈대를 잡고 살을 붙였으면 이제는 JavaScript라는 근육을 통해서 움직여보자!

코드 기초

JavaScript는 원래 웹 브라우적에서 실행하기 위해 만들어진 프로그래밍 언어다. 따라서 브라우저와 함께 사용해야지 작동한다. 하지만 브라우저 말고도 Node.js라는 JavaScript Runtime이 존재한다.

Runtime: 컴퓨터 프로그램이 실행되고 있는 동안의 동작, 혹은 프로그래밍 언어가 구동되는 환경.

원래 브라우저가 JavaScript의 Runtime. Node.js에서 실행하면 Node.js가 Runtime.

REPL(Read Evaluate Print loop): 읽고 평가하고 print하고 반복. 한 줄 명령을 인식하고 실행되는 간단한 개발 환경. 빠르게 얻고 싶은 결과값을 얻을 수 있다.

타입

타입이란, value(값)의 종류.

Number

숫자를 자바스크립트에서 표현하기 위한 데이터 타입.
number 타입을 가진 value라면 내장된 Math 객체를 쓸 수 있다. 대표적인 메서드를 알아보자.

• Math.floor(x): 숫자 x 이하의 가장 큰 정수.
• Math.ceil(x): 숫자 x보다 크거나 같은 숫자 중 가장 작은 정수.
• Math.round(x): 숫자 x를 반올림한 값과 가장 가까운 정수.
• Math.abs(x): 절댓값
• Math.sqrt(x): x의 제곱근
• Math.pow(x, y): x를 밑, y를 지수로 하는 숫자.

String

인간의 언어인 자연어를 JavaScript에 표현하기 위한 데이터 타입. 따옴표, 큰따옴표, 백틱으로 감싸서 쓴다.
문자열 연결 연산자+는 문자열끼리 붙이는 데 사용된다.

인덱스(Index)

문자열의 각 문자는 순서를 가지고 있다. 각 문자의 위치를 나타내는 것을 Index(인덱스)라고 하며 첫번째 문자의 인덱스는 0이다.

• toLowerCase(): 문자열을 소문자로.
• toUpperCase(): 문자열을 대문자로.
• concat(): 문자열 연결 연산자 +처럼 문자열을 붙일 수 있다.
• slice(): 문자열의 일부를 자를 수 있다.
• indexOf(): 문자열 내 특정 문자가 몇번째 위치에 있는지 인덱스를 반환.
• includes(): 문자열 내 특정 문자가 포함되어 있는 지 확인.

Boolean

tk실 관계를 구분하기 위한 타입. true 아니면 false

falsy

JavaScript에서 false로 여겨지는 값을 falsy 값이다.

false
0
-0
0n
""
''
``
null
undefined
NaN

비교연산자(comparison operator)

• ===, !==: 엄격한 동치 연산자
  보이는 값이 같아도, 두 값의 타입이 다르면 false.

• ==, !=: 느슨한 동치 연산자
  보이는 값만 같아도 true.

• >, <, >=, <=: 대소 관계 비교 연산자
  수학에서 부등호 기호의 사용법과 유사.

논리 연산자(logical operator)

• ||: 논리합(OR)
  두 값이 모두 true면 true로 판단.
• &&: 논리곱(AND)
  두 값 중 하나만 false여도 false로 판단.

논리 부정 연산자(!)의 경우, 사실 관계를 반대로 표현.

• !부정(NOT)
  • 오른쪽 피연산자와 반대의 사실을 반환.

    !true          // false
    !(100 > 200)   // true

  • falsy, truthy의 반대 값을 반환.

    !0   // true
    !''  // true
    !1   // false

변수

변수를 사용하는 이유는 데이터를 편리하게 저장하고 꺼내 쓸 수 있도록 해주는 것이다. 데이터 보관함(메모리)에 저장해서 변수를 저장해서 이름을 통해 데이터 재활용 가능.

선언과 할당

선언

let num;  // 변수 선언

할당

num = 5; // 값 할당

변수 활용

변수에 숫자 타입의 값이 할당되어있는 경우 숫자타입처럼 여겨지며 모든 연산이 가능하다. 또한 변수의 값을 바꾸고 싶으면 재할당을 통해 바꿀 수 있다.

템플릿 리터럴(template literal)

문자열 내부에 변수를 삽입할 수 있는 기능. 템플리 리터럴 내부에 ${}를 사용하여 변수를 삽입 할 수 있다. 문자열이 할당되지 않은 변수도 문자열로 취급.

let name = "홍길동"
let age = 12
let job = "초등학생"
console.log(`안녕하세요 저는 ${age}살 ${job} ${name}이라고 합니다. `)

마지막으로

자바스크립트를 만들 때는 변수부터 잡고 가는 것이 가장 중요하다고 생각한다. 함수를 쓸 때, 변수의 정의를 잘 배워서 clean coding을 목표로 하자.