[코드스테이츠 FE 45기] _2023.04.18 _ Day 6

---

오늘은 Day 6

2023년 04월 18일

오늘 드디어 자바스크립트 !! ㅠㅜ 걱정이지만 화이팅 해보자

오늘은 오전 9시부터 12시 전 까지는 자습시간이다.

오늘도 자습을 시작해 보자!!

오후에는 페어분과 코드 리뷰를 하고 

나머지 시간에는 자습및 복습을 할 생각이다.

---

JavaScript

자바스크립트(JavaScript)는 웹 페이지를 동적으로 만들기 위해 개발된 스크립트 언어입니다. 초기에는 브라우저에서만 사용되었지만, 이제는 서버 사이드와 클라이언트 사이드 모두에서 사용됩니다.

 

자바스크립트는 객체 기반의 스크립트 언어로, 프로토타입 기반의 객체 지향 언어입니다. 이는 클래스(class) 개념이 없으며, 객체를 생성하는데 있어서 기존 객체를 상속받는 방식을 사용합니다.

 

console.log()

: 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드

 

console.log('hello world'); // hello world

 

JavaScript Type

Number 타입

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

100; // 정수를 표현할 수 있습니다.
-100; // 음수를 표현할 수 있습니다.
100.123; // 실수를 표현할 수 있습니다.

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 타입

String은 자바스크립트에서 사용되는 원시(primitive) 데이터 타입 중 하나입니다. String 타입은 텍스트 데이터를 나타내며, 따옴표(큰따옴표, 작은따옴표)로 둘러싸인 문자열(string)을 생성할 수 있습니다.

const str1 = 'Hello, world!'; // 작은따옴표로 둘러싸인 문자열
const str2 = "Hello, world!"; // 큰따옴표로 둘러싸인 문자열
const str3 = `Hello, ${name}!`; // 템플릿 리터럴(template literal)로 둘러싸인 문자열

위의 코드에서 str1과 str2는 따옴표로 둘러싸인 문자열입니다. str3은 백틱(backtick)으로 둘러싸인 문자열인데, 이를 템플릿 리터럴이라고 부르며, 문자열 내에 변수를 삽입할 수 있습니다.

 

String 타입은 다양한 메서드(method)를 제공합니다. 이러한 메서드를 사용하여 문자열을 가공하거나 검색(search)할 수 있습니다. 예를 들어, indexOf(), slice(), replace(), toUpperCase(), toLowerCase() 등의 메서드를 사용할 수 있습니다.

---

+ 연산자를 사용하여 문자열을 이어 붙일 수 있습니다.

이를 문자열 연결(concatenation)이라고 합니다. 예를 들어, 아래와 같이 두 개의 문자열을 이어 붙일 수 있습니다.

문자열의 length 속성

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

const str1 = 'Hello,';
const str2 = ' world!';
const str3 = str1 + str2;

console.log(str3); // 'Hello, world!'

위의 코드에서 str1 + str2는 두 개의 문자열을 이어 붙인 새로운 문자열을 생성합니다. 이때, + 연산자는 좌항의 문자열과 우항의 문자열을 이어 붙입니다.

 

템플릿 리터럴(template literal)이라는 새로운 문자열 표기법이 추가되었습니다. 이를 사용하면, 문자열을 이어 붙일 때 + 연산자 대신 ${}를 사용하여 변수나 표현식을 삽입할 수 있습니다. 예를 들어, 아래와 같이 템플릿 리터럴을 사용하여 문자열을 생성할 수 있습니다.

const name = 'John';
const str = `Hello, ${name}!`;

console.log(str); // 'Hello, John!'

위의 코드에서 ${} 안에 변수 name을 넣으면, 변수의 값이 문자열에 삽입됩니다. 이때, 변수의 값은 문자열로 자동으로 변환됩니다.

 

 

인덱스(Index)

 

인덱스(index)는 배열(array)이나 문자열(string) 등에서 요소(element)의 위치를 나타내는 값입니다. 자바스크립트에서 인덱스는 0부터 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이며, 두 번째 요소의 인덱스는 1, 세 번째 요소의 인덱스는 2, ... 순서대로 증가합니다.

const arr = [1, 2, 3];
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3

위의 코드에서 arr[0]은 배열 arr의 첫 번째 요소를 나타냅니다. 따라서 이 코드는 1을 출력합니다.

const str = 'hello';
console.log(str[0]); // 'h'
console.log(str[1]); // 'e'
console.log(str[2]); // 'l'
console.log(str[3]); // 'l'
console.log(str[4]); // 'o'

위의 코드에서 str[0]은 문자열 str의 첫 번째 문자를 나타냅니다. 따라서 이 코드는 'h'를 출력합니다.

---

Boolean 타입

Boolean 타입은 true(참) 또는 false(거짓) 값을 가지는 타입입니다.

자바스크립트에서는 조건식의 결과로 true 또는 false 값을 반환하며, 이를 이용하여 프로그램의 흐름을 제어하는 등 다양한 용도로 사용됩니다.

true;
false;

Boolean 타입의 값은 직접 값을 지정하거나, 논리 연산자(logical operator) 등을 사용하여 계산할 수 있습니다. 예를 들어, 아래와 같이 Boolean 타입의 값을 직접 지정할 수 있습니다.

const bool1 = true;
const bool2 = false;

위의 코드에서 bool1 변수는 true 값을, bool2 변수는 false 값을 가집니다.

 

Boolean 타입의 값은 논리 연산자를 사용하여 계산할 수도 있습니다. 예를 들어, 아래와 같이 두 개의 값을 비교하여 결과를 Boolean 타입으로 반환하는 비교 연산자(comparison operator)를 사용할 수 있습니다.

const x = 10;
const y = 20;
const bool3 = x < y; // true

위의 코드에서 bool3 변수는 비교 연산자(<)를 사용하여 x < y를 계산한 결과인 true 값을 가집니다.

falsy

Falsy는 조건문에서 false로 간주되는 값들을 의미합니다. 자바스크립트에서는 6개의 Falsy 값이 있습니다.

1. false: false 키워드를 직접 사용한 값
2. 0: 숫자 0
3. -0: 음의 무한대로 발산하는 0
4. NaN: Not-a-Number의 약자로, 숫자가 아님을 나타내는 값
5. null: 값이 존재하지 않음을 나타내는 값
6. undefined: 값이 정의되지 않았음을 나타내는 값

Falsy 값을 제외한 모든 값은 truthy 값이라고 합니다.

Falsy 값은 조건문에서 if, while, for 등에서 false로 판단됩니다. 예를 들어, 아래와 같이 Falsy 값인 false를 조건으로 사용하면 조건문이 실행되지 않습니다.

if (false) {
  console.log('This code will not be executed.');
}

또한, Falsy 값은 논리 연산자를 사용하여 변수의 값을 검증할 때 유용합니다. 예를 들어, 아래와 같이 변수 x가 Falsy 값인지 검증할 수 있습니다.

const x = 0;
if (!x) {
  console.log('x is Falsy.');
}

위의 코드에서 x 변수는 0이므로 Falsy 값입니다. !x는 x 값의 부정을 나타내며, 이는 true 값으로 평가됩니다. 따라서, 조건문이 실행되어 'x is Falsy.'가 출력됩니다.

비교연산자(comparison operator)

불리언은 비교연산자(comparison operator)로 두 값이 같은지 다른지를 확인할 때 유용합니다.

 

비교 연산자는 두 개의 값을 비교하여 Boolean 값을 반환하는 연산자입니다. 자바스크립트에서는 다양한 비교 연산자를 제공합니다.

 

연산자	설명
==	좌항과 우항의 값이 같으면 true, 다르면 false를 반환합니다. 이 때, 값의 타입은 일치하지 않아도 됩니다.
!=	좌항과 우항의 값이 다르면 true, 같으면 false를 반환합니다. 이 때, 값의 타입은 일치하지 않아도 됩니다.
===	좌항과 우항의 값과 타입이 모두 같으면 true, 그 외에는 false를 반환합니다.
!==	좌항과 우항의 값과 타입이 모두 다르면 true, 그 외에는 false를 반환합니다.
>	좌항의 값이 우항의 값보다 크면 true, 그 외에는 false를 반환합니다.
>=	좌항의 값이 우항의 값보다 크거나 같으면 true, 그 외에는 false를 반환합니다.
<	좌항의 값이 우항의 값보다 작으면 true, 그 외에는 false를 반환합니다.
<=	좌항의 값이 우항의 값보다 작거나 같으면 true, 그 외에는 false를 반환합니다.

 

논리연산자(logical operator)

논리 연산자는 Boolean 값을 이용하여 논리적인 연산을 수행하는 연산자입니다.

연산자설명

연산자		설명
논리곱 (AND)	&&	좌항과 우항의 값이 모두 true이면 true, 그 외에는 false를 반환합니다.
논리합(OR)	||	좌항 또는 우항의 값이 true이면 true, 그 외에는 false를 반환합니다.
부정 (NOT)	!	단항 연산자로, 피연산자의 논리 값을 반대로 반환합니다.

 

---

변수를 선언하는 방법

var

var 변수이름;

let

let 변수이름;

const

const 변수이름;

변수를 할당하는 방법

변수를 선언하는 방법은 var, let, const 키워드를 사용합니다.

var

• var: ES5부터 사용 가능한 변수 선언 키워드입니다. 함수 스코프를 가지고 있으며, 변수의 중복 선언이 가능합니다. 다만, 블록 스코프를 지원하지 않고 호이스팅 문제가 있어서 선언 전에 참조하면 undefined 값을 반환합니다. 최근에는 let과 const를 사용하는 것을 권장합니다.

let

• let: ES6부터 추가된 변수 선언 키워드입니다. 블록 스코프를 가지고 있으며, 변수의 중복 선언이 불가능합니다. 호이스팅이 발생하지만, 초기화 전에 변수를 참조하면 에러가 발생합니다.

consst

• const: let과 유사하지만, 상수를 선언하는 데 사용됩니다. 한 번 선언하면 값을 변경할 수 없으며, 반드시 초기화를 해야 합니다. 블록 스코프를 가지고 있으며, 변수의 중복 선언이 불가능합니다.

변수를 선언할 때는 다음과 같은 형식을 따릅니다.

var/let/const 변수명 [= 초기값];

초기값을 생략하면 undefined 값을 가지게 됩니다. 예를 들어, 다음과 같은 변수를 선언할 수 있습니다.

var name = 'John'; // var 키워드로 변수 선언
let age = 30; // let 키워드로 변수 선언
const PI = 3.14; // const 키워드로 상수 선언

---

아무것도 할당하지 않은 변수

아무것도 할당되지 않은 변수는 undefined가 자동으로 할당됩니다. 이는 초기화라는 JavaScript의 독특한 특징입니다.

let variable;
console.log(variable) // undefined

값의 재할당

let키워드로 선언한 변수에 새로운 값을 할당할 수 있습니다. 이를 재할당이라고 합니다. 재할당에도 할당연산자(=)를 사용합니다.

let name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker';
console.log(name) // 'parkhacker'

재할당이 불가능한 변수(상수)

let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지됩니다.

const name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker'; // Uncaught TypeError: Assignment to constant variable.

---

네이밍 규칙

자바스크립트에서 변수, 함수, 객체 등의 이름을 정할 때 다음과 같은 네이밍 규칙을 따릅니다.

1. 이름은 영문 알파벳, 숫자, 언더스코어(_), 달러 기호($)로 구성됩니다.
2. 이름은 숫자로 시작할 수 없습니다.
3. 이름은 대소문자를 구분합니다.
4. 이름은 의미를 파악할 수 있는 명확하고 직관적인 이름을 사용해야 합니다.
5. 변수 이름은 소문자로 시작하고, 단어가 연결되는 경우에는 카멜 케이스(camelCase)를 사용합니다. 예를 들어, myVariableName과 같이 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 표기합니다.
6. 함수 이름은 동사로 시작하고, 함수가 수행하는 작업을 나타내는 이름을 사용합니다. 카멜 케이스를 사용합니다.
7. 상수(constant)의 이름은 모두 대문자로 작성하며, 단어가 연결되는 경우 언더스코어로 구분합니다.

예를 들어, 다음과 같은 변수, 함수, 상수 이름이 유효한 네이밍 규칙을 따릅니다.

let myVariableName = 'hello';
function calculateSum(a, b) {
  return a + b;
}
const MAX_SIZE = 100;