자바스크립트

자바스크립트 기초

해말그미 2023. 5. 26. 01:16

🌼 JavaScript 코드 실행하기

JavaScript는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어입니다. 그래서 HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동합니다. 혹은 따로 Node.js라는 JavaScript 런타임을 컴퓨터에 설치해야 합니다. 다만, 처음에는 좀 더 쉽게 JavaScript를 학습하기 위해서 StackBlitz에서 JavaScript 코드를 실행해 봅시다.

 

StackBlitz로 코드를 실행하는 방법은 두 가지입니다.

  1. index.js 파일에 원하는 JavaScript 코드를 작성하고, Terminal에 node index.js를 입력하고 엔터를 누르면 작성한 코드가 실행되고 출력 결과를 확인할 수 있습니다.
  2. Terminal에 node를 입력하면 REPL을 사용할 수 있습니다. REPL 사용을 종료하려면 .exit를 입력합니다.

프로그램은 컴퓨터를 특정 방식으로 작동시킬 수 있는 코드의 모음이고

그 프로그램을 실행하면 프로세스가 된다. 브라우저도 작성한 코드를 화면에 구현한 것이기 때문에 하나의 프로세스이다.

 

  • REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경입니다. 내가 작성한 코드가 문법에 맞는지 틀린 지 간단하게 실행해 볼 수 있습니다.
  • 프로그램(program): 작업(task) 수행을 위한 코드 모음
  • 프로세스(process): 프로그램 실행의 결과물.

🌼 JavaScript 엔진이 코드 읽는 법

 

사람이 다룰 수 있게 일정한 문법과 의미를 지는 언어를 프로그래밍 언어라고 한다. 

 

  • 기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없다.
  • 프로그래밍 언어: 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지닌다.
  • 자바스크립트(JavaScript): JavaScript는 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어입니다.
  • JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램입니다. 크롬에 내장된 v8이 대표적입니다.

이렇게 읽고, 평가가 완료되어 하나의 의미를 가지는 코드가 값(value)입니다. 값을 표현하기 위해서는 다양한 방식이 있습니다. 예를 들어, 숫자값 1995를 표현하기 위해서는 아래와 같은 다양한 코드로 쓸 수 있습니다. 이렇게 하나의 값으로 평가될 수 있는 코드를 표현식(expression)이라고 합니다. + 기호와 같이 값에 변화를 줄 수도 있습니다. 이렇게 산술 연산이나 논리 연산 등을 할 수 있는 기호를 연산자(operator)라고 합니다.

1995;
1000 + 900 + 90 + 5;
1900 + 95;​

 

  • 값(value): 하나의 고유한 의미를 가지는 코드. JavaScript 엔진이 하나의 값으로 읽고 평가할 수 있어야 한다.
  • 표현식(expression): 값으로 평가될 수 있는 코드.
  • 연산자(operator): 특정 연산을 수행할 수 있는 코드.

🌼 타입이란?

 

타입은 값의 종류이다. 

자바스크립트의 모든 값은 타입을 가지고 있다. 

타입을 기반으로 쉽게 분류하고 각 타입은 고유한 속성과 메서드를 가져서 값을 변경하거나 다룰 수 있다.

 

🌼Number 타입

 

숫자를 표현하기 위한 데이터 타입

 

Math 내장 객체

좀 더 복잡한 계산을 위해서는 Math 내장 객체를 사용합니다. Math 내장 객체의 대표적인 메서드에 대해서 알아보겠습니다.

  • Math.floor(): 괄호 안의 숫자를 내림하여 반환합니다.
  • Math.ceil(): 괄호 안의 숫자를 올림하여 반환합니다.
  • Math.round(): 괄호 안의 숫자를 반올림하여 반환합니다.
  • Math.abs(): 괄호 안의 숫자의 절대값을 반환합니다.
  • Math.sqrt(): 괄호 안의 숫자의 루트값을 반환합니다.
  • Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환합니다.

Math.floor(100.621); // 100
Math.ceil(100.621);  // 101
Math.round(100.621); // 101
Math.round(100.421); // 100
Math.abs(-100); // 100
Math.abs(100); // 100
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142135623730951
Math.pow(2, 5); // 32

 

🌼 String 타입

 

인간의 언어, 자연어를 표현하기 위한 데이터 타입

 

- 문자열의 length 속성을 이용하여 문자열의 길이를 확인할 수 있습니다. 문자열 값에 .length 를 붙이면 됩니다.

- 문자열의 각 문자는 순서를 가지고 있습니다. 각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있습니다.

 

문자열 주요 메서드

  • toLowerCase() : 문자열을 소문자로 변경합니다.
  • toUpperCase() : 문자열을 대문자로 변경합니다.
  • concat() : 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있습니다.
  • slice() : 문자열의 일부를 자를 수 있습니다.
'HELLO WORLD'.toLowerCase(); // 'hello world'
'hello world'.toUpperCase(); // 'HELLO WORLD'
'hello '.concat('world'); // 'hello world'
'hello world'.slice(0, 5); // 'hello'
  • indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인합니다.
    • 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
    • 포함되어 있지 않으면 -1을 반환합니다.
'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1
  • includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인합니다.

🌼 Boolean 타입

 

falsy

불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값이 일부 있는데, 이를 falsy 값이라고 합니다. 반대로 true로 “여겨지는” 값은 truthy 값이라고 합니다. truthy 값은 매우 많아서, falsy 값을 암기하면 구분하기 쉽습니다.


// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN

🌼 변수

 

특정 데이터에 이름을 붙이는 것

변수 선언 - 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것

값 할당 - 할당연산자(=)을 사용해 메모리 공간에 특정한 값을 넣는 것

 

변수에는 모든 타입의 값을 할당할 수 있고, 아무것도 할당되지 않은 변수는 undefiend가 자동으로 할당된다.

 

재할당이 필요한 변수에는 let 키워드를 사용하고, 재할당이 불필요하거나 변경되는 것을 방지해야 하는 변수는 const 키워드를 사용한다.

 

변수명에는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 포함할 수 있고, 숫자는 맨앞에 올 수 없다.

 

🌼 변수를 활용한 연산

 

연산의 결과를 변수에 반영하려면 재할당을 하면 된다.


let number = 10;
number = number + 2;
console.log(number); // 12

number = number * 3;
console.log(number); // 36

🌼 템플릿 리터럴

문자열 타입을 만드는 방법 중 하나인 백틱 (``)을 사용하는 것을 템플릿 리터럴이라고 한다. 이 방법은 문자열 내부에 변수를 삽입할 수 있는 기능이 있다. 

 

${}를 사용하여 변수를 삽입할 수 있다. 

 

공백 삽입을 위해 ' ' 를 넣는 것보다 템플릿 리터럴을 사용하는 것이 가독성 부분에서 우수하다.

let name = '해말그미';
let age = 1004;

console.log(`${name} ${age}`); // '해말그미 1004'