JavaScript 기초 1

Minsu Lee·2023년 4월 18일

✨ SEB FE

Unit5 JavaScript 기초

💡 당신이 가진 두려움으로 인해서 무언가를 포기하지 마라. 만약 그렇게 한다면, 당신은 당신의 마음과 진정으로 대화할 기회를 놓치게 될 것이다.
"Don't give in to your fears. If you do, you won't be able to talk to your heart."
-파울로 코엘료(Paul Coelho)

📌 JavaScript?

🔍 JavaScript

JavaScript는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. (Wikipedia)

JavaScript는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어이다. 따라서 HTML파일과 함께 브라우저에서 실행하거나 따로 Node.js(JavaScript 런타임)을 설치해 사용해야한다.

Stack Blitz
웹 애플리케이션 개발을 위한 클라우드 통합 개발 환경이다. 이곳에서 JavaScript 코드를 실행해볼 수 있다.
Stack Blitz로 JavaScript 코드를 실행하는 두 가지 방법

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

REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경

🔍 JavaScript의 데이터 타입

타입(type)은 값(value)의 종류이다.
typeof 연산자로 타입을 확인할 수 있다.

1. Number 🌱

JavaScript의 여러 데이터 타입 중 Number는 일상생활에서 흔히 접할 수 있는 숫자를 자바스크립트에서 표현하기 위한 데이터 타입이다. 정수(integer)와 실수(float)를 모두 표현할 수 있다.

Math 내장 객체

Math.floor(): 괄호 안의 숫자를 내림하여 반환합니다.

Math.ceil(): 괄호 안의 숫자를 올림하여 반환합니다.

Math.round(): 괄호 안의 숫자를 반올림하여 반환합니다.

Math.abs(): 괄호 안의 숫자의 절대값을 반환합니다.

Math.sqrt(): 괄호 안의 숫자의 루트값을 반환합니다.

Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환합니다.

2. String 🌱

JavaScript 데이터 타입 String(문자열)은 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입이다. 따옴표(’), 큰따옴표(”), 백틱(`)으로 감싸면 된다. 맥북의 경우 백틱은 영어로 전환하고 물결(~)을 누르면 입력할 수 있다.

length 속성
문자열의 length 속성을 이용하여 문자열의 길이를 확인할 수 있다. 문자열 값에 .length 를 붙이면 된다.
인덱스(Index)
문자열의 각 문자는 순서를 가지고 있다. 각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있다. Zero-based numbering을 따르고 있다. (시작이 0부터)

문자열 주요 메서드

toLowerCase() : 문자열을 소문자로 변경합니다.

toUpperCase() : 문자열을 대문자로 변경합니다.

concat() : 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있습니다.

slice() : 문자열의 일부를 자를 수 있습니다.

indexOf() : 문자열 내에 특정 문자가 몇 번째 위치하는지 확인합니다.

includes() : 문자열 내에 특정 문자가 포함되어 있는지 확인합니다.

3. Boolean 🌱

JavaScript 데이터 타입 Boolean(불리언)은 사실 관계를 구분하기 위한 타입이다. 불리언 타입의 값은 true 혹은 false 둘 중 하나이다.

true;
false;

falsy한 값? : 불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값이 일부 있는데, 이를 falsy 값이라고 한다.
// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN```

Boolean 타입의 연산자

비교연산자(comparison operator)

===, !== : 엄격한 동치 연산자
==, != : 느슨한 동치 연산자
대소 관계 비교 연산자

> , < , >= , <=
논리연산자(logical operator)

||: 논리합(OR)
두 값 중 하나만 ture여도 결과를 true로 판단 (모두 false면 false)
&&: 논리곱(AND)
두 값 중 하나만 false여도 결과를 false로 판단 (모두 true면 true)
! : 부정(NOT)
오른쪽 피연산자와 반대의 사실을 반환, falsy, truthy의 반대 값을 반환합니다.

🔍 JavaScript 변수

변수 선언 방법

변수선언키워드 변수명;

변수 선언 키워드 종류
var : 중복선언 가능 -> 사용 권장하지 않음
let : 재할당 가능
const: 재할당 불가능

변수를 선언하고 할당하지 않으면 undedined가 자동할당된다.

네이밍 규칙 🌱

식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.

단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.

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

네이밍 컨벤션 🌱

JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용한다. 카멜 케이스는 낙타의 등모양에서 유래된 이름으로써, 첫 단어의 첫 문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성하는 방법
// 🐪카멜 케이스(camelCase) <- JavaScript에서 사용!
let firstName = 'coding'; 
let lastName = 'kim';
// 그밖에 네이밍 컨벤션
let first_name; // 🐍스네이크 케이스(snake_case) : 단어와 단어 사이에 언더스코어(_)를 사용
let FirstName; // 📐파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성