[C/F TIL] 6일차 - JavaScript 개념, 기초, 변수, 할당, 네이밍 컨벤션, 템플릿 리터럴

mu-eng·2023년 4월 18일

JavaScript TIL 코드스테이츠

TIL (in boost camp)

목록 보기

7/53

Code States
Front-end boost camp
Today
I
Learned

☔️ Gloomy Tuesday 비가 오는 대신 미세먼지 적은 화요일, 6일차 자바 스크립트 시작!

☔️ 자바 스크립트는?

최초 브라우저에서 실행하기 위해 만들어졌으며 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어
html, javascript를 동시에 실행해야 작동
JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램입니다. 크롬에 내장된 v8이 대표적

☔️ stackblitz

가상 개발환경에서 자바스크립트 실행할 수 있도록 돕는 프로그램
index.js 파일에 원하는 자바스크립트 코드를 작성하고 터미널에 'node index.js'를 입력하고 엔터를 누르면 작성한 코드가 실행되고 출력 결과 확인 가능
터미널에 node를 입력하면 REPL을 사용할 수 있다. 종료는 '.exit' 입력
-- REPL : Redad, Evaluate, Print, Loop 하는 가장 간단한 개발 환경. 내가 작성한 코드가 맞는지 간단하게 실행 가능
-- Program : 작업(task) 수행을 위한 코드 모음
-- Process : 프로그램 실행의 결과물
-- consled.log() : 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드

☔️ 함께 알아둘 개념

기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없다.
프로그래밍 언어: 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지닌다.
주석: JavaScript 엔진이 따로 해석하지 않는 코드. 개발자가 쓰고 싶은 사람의 언어, 자연어를 자유롭게 작성할 수 있다.

/*
주석처리 하기
*/

==> /*/* 중첩 */*/ 다음과 같이 중첩하여 사용하지는 않는다.

자연어: 인간이 쓰는 언어. 컴퓨터공학에서 프로그래밍 언어와 구분하기 위해 사람의 언어를 자연어로 따로 구분
값(value): 하나의 고유한 의미를 가지는 코드. JavaScript 엔진이 하나의 값으로 읽고 평가할 수 있어야 한다.
표현식(expression): 값으로 평가될 수 있는 코드.
연산자(operator): 특정 연산을 수행할 수 있는 코드.

☔️ 타입

타입이란? 값의 종류, 각 값을 분류하는데 타입으로 쉽게 나눔 (일상ex. 자연어, 숫자, 100>50, ✅ 등등)
자바스크립트의 모든 값은 타입을 가지고 있다.
각 타입은 고유한 속성과 메서드를 가진다.

✔️ Number 타입

일상생활 속 숫자를 자바스크립트에서 표현하기 위한 데이터 타입
정수(integer)와 실수(float)를 모두 표현 가능

100; // 정수
-100; // 음수
100.123 // 실수

'typeof' 연산자 : 해당 값이 숫자 타입인지 확인

typeof 100; // 'number'
typeof -100; // 'number'
typeof 100.123; // 'number'

산술 연산자 (arithmetic operator)

console.log(1 + 2); // 3
console.log(1 - 2); // -1
console.log(1 * 2); // 2
console.log(1 / 2); // 0.5
console.log(9 % 2); // 1 (9를 2로 나눈 나머지 구하기)

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

인간의 언어, 자연어를 자바스크립트에서 표현하기 위한 데이터 타입
따옴표('), 큰따옴표("), 백틱(`)으로 감싸면 됨
'+'로 문자열 이어붙이기 가능

"안녕하세요" + "!!"; // 안녕하세요!!
"감사합니다." + " " + "🙏" // 감사합니다. 🙏
1 + "1" // 11

문자열의 length 속성 : 문자열의 길이 확인, 문자열 값에 '.length'

console.log('欢迎你'.length); // 3
console.log('최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.length); // 48

인덱스(Index) : 각 문자가 몇 번째에 위치하는지 확인, 첫번째 문자의 인덱스는 0임! ==> Zero-Based numbering

let str = 'tiffany';
console.log(str[0]); // 't'
console.log(str[4]); // 'a'

문자열 주요 메서드

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() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인

## 예시 :
'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false

✔️ Boolean 타입

사실 관계를 구분하기 위한 타입
true 혹은 false
falsy : 불리언 타입은 아니지만 JS에서 false로 "여겨지는"값

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

truthy : 반대로 true로 "여겨지는" 값, 매우 많아서 위 falsy를 암기하여 구분 권고
비교연산자(conparison operator)

## 엄격한 동치연산자 : ===, !==
## 예시 :
121 === (100 + 21); // true
121 === "121"; // false
121 !== (100 + 21); // false
121 !== "121"; // true

## 느슨한 동치연산자 : 타입이 달라도 값이 같으면 true, 다르면 false
### ==, !=
### 현대 웹 개발에서 사용 권장하지 않음
### 다른 언어에서는 괜찮, 자바스크립트에서는 특이점 주의

## 예시 :
12 == '12' // true

## 대소 관계 비교 연산자 : 두 피연산자의 값을 비교, 수학에서의 부등호와 유사

## 예시 :
100 > 200; // false ("100은 200보다 크다."는 거짓)
200 > 100; // true ("200은 100보다 크다."는 참) 
100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)
          
===========
'<=' 는 안됨!

논리연산자(logical operator)

## || : 논리합(OR)
- 두 값 중 하나만 true여도 true
- 두 값이 모두 false면 false로 판단

## && : 논리곱(AND)
- 두 값이 모두 true면 true
- 두 값 중 하나만 false여도 false

## 논리 부정 연산자(!)
- ! : 부정(NOT)
- 오른쪽 피연산자와의 반대의 사실을 반환
- falsy, truthy의 반대 값을 반환

☔️ 변수

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

✔️ 변수를 선언할 때는 let 키워드 사용

let name;

✔️ 선언된 변수에 값을 할당할 때는 할당 연산자(=) 사용

name = 'kimcoding';

✔️ 변수 선언과 값 할당을 동시에 가능

let name = 'kimcoding';

✔️ 자바스크립트에서 사용이 가능한 모든 타입의 값 할당 가능

let string = '원주율';
let number = 3.141592;
let boolean = true;
let array = [1, 'two', false];
let object = {name: 'kimcoding', age: 25, course: 'SEB FE'};
let empty = null;
let notDefined = undefined;

✔️ 아무것도 할당하지 않은 변수 : undifined 자동 할당, 초기화라는 자바스크립트의 특징

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.

✔️ var 키워드 : let과 const 키워드 등장 전 사용, 현재 권장x

✔️ 네이밍 규칙

## 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($) 포함 가능
let name, $head, _score // 사용 가능한 변수명

## 단, 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야함, 숫자로 시작하는 것 불가
let 1st; // 사용할 수 없는 변수명

## 예약어는 식별자로 사용 불가 : 예약어란 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어 (ex. let, const, true, false, typeof 등)

## 그 외, 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현
let x = 100;
let y = 5; // 변수의 존재 목적 이해 x
let name = 'tiffany ko'; // 변수의 존재 목적 이해 가능

✔️ 네이밍 컨벤션

하나 이상의 영단어를 사용하여 식별자를 만들경우 네이밍 컨벤션을 잘 지키면 가독성을 높일 수 있다. 첫 단어의 첫 문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성

// 🐪카멜 케이스(camelCase)
let firstName = 'coding'; 
let lastName = 'kim';

// 그밖에 네이밍 컨벤션
let first_name; // 🐍스네이크 케이스(snake_case) : 단어와 단어 사이에 언더스코어(_)를 사용
let FirstName; // 📐파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성

☔️ 변수 활용하기

변수를 활용한 연산 : 숫자 타입의 값이 할당되어 있는 경우 숫자 타입에 가능한 모든 연산 가능

let number = 10;
console.log(number + 2); // 12
console.log(number - 5); // 5
console.log(number * 3); // 30
console.log(number / 2); // 5
console.log(number % 3); // 1
console.log(number); // 10

재할당 : 앞선 예시는 연산은 독립적으로 이루어지나 number은 그대로 10이 할당, 연산의 결과를 변수에 반영하기위해서는 재할당 활용

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

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

템플릿 리터럴 : 백틱(`)을 사용하는 방법. 템플릿 리터럴은 큰따옴표, 작은 따옴표가 사용한 표기 방법과는 다른 기능을 가짐. 특히, 문자열 내부에 변수를 삽입할 수 있는 기능 주목!

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'

## 사용하는 이유? 하단 예시를 보면, 공백 삽입을 위해 ' ' 를 사용하는 경우보다 가독성이 훨씬 우수하기 때문
let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(course + ' ' + cohort + ' ' + name); // 'SEB FE 99 kimcoding'

🌤️ 오후 페어 프로그래밍 시간

오후가 되니 해가 쨍! 기분좋게 페어 프로그래밍 시간
코드 스테이츠 교육 시스템 내부에 있는 코플릿 내에 알고리즘(보다 더 친절한 설명이 도와주는) 문제 10개를 페어분과 함께 풀어본다.

🌤️ 6일차 수업을 마치며...

어렵다. 어려운데 아직 열받진 않는다. 오늘부터 프로그래머스 알고리즘을 왕초보 단계부터 하루에 한문제씩 풀 예정이다. 하루에 한문제면 한달이면 30문제 남은 5개월이면 150문제! 화이팅!

오늘 실시간 세션 수업까지 마치고 나면 전체적으로 오늘 배운 내용을 복습할 것이다.

mu-eng

[무엥일기] 무엥,,, 내가 머쨍이 개발자가 될 수 이쓰까,,,

이전 포스트

[C/F TIL] 5일차 - 계산기 목업 업데이트, 동기부여 세션

다음 포스트