[TIL] 24.12.23(월)

JavaScript 문법 종합반 1주차

 

1-1

자바스크립트 소개

 

JS 언어의 특징

[1] 객체 지향 프로그래밍 지원

JS는 객체 지향 프로그래밍이 가능한 언어로, 객체를 생성하고 관리하는 데에 강점이 있음 > 이를 통해 복잡한 기능 구현 가능

객체 지향 프로그래밍 (JavaScript)

데이터와 함수를 객체라는 그룹으로 묶어서 처리하는 방법으로 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성(Property)이라고도 함. JS에서 객체를 만들 때는 중괄호({})를 사용하여 객체를 만들고, 각 속성을 쉼표(,)로 구분하여 추가함.

속성은 이름과 값을 가지며, 이름은 문자열로 작성하고 값은 다양한 데이터 타입을 사용할 수 있음. 객체 내부의 함수를 메소드(method)라고 부르며, 속성의 값으로 함수를 추가할 수 있음. 객체를 만들어서 필요한 속성과 메소드를 추가하여 사용.

 

절차 지향 프로그래밍

순서대로 실행되는 일련의 과정을 단계적으로 기술하여 프로그램을 만드는 것

[2] 동적 타이핑

자바스크립트는 동적 타이핑을 지원하는 언어로서, 변수를 선언할 때 타입을 지정하지 않음. '런타임 시점'에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다는 것을 의미함.

 

[3] 함수형 프로그래밍 지원

자바스크립트는 함수형 프로그래밍을 지원하는 언어로, 함수를 일급 객체로 취급하고, 고차 함수를 지원함

이를 통해 코드의 재사용성과 가독성을 높일 수 있음.

 

[4] 비동기 처리

비동기 처리는 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식

 

[5] 클라이언트 측 및 서버 측 모두에서 사용 가능

자바스크립트는 클라이언트 측에서만 사용되는 것이 아니라, Node.js를 이용하여 서버 측에서도 사용됨.

이를 통해 웹 개발 전반에 걸쳐 자바스크립트를 활용할 수 있음.

 

 

 

1-2

자바스크립트 기본 문법

 

변수와 상수

 

변수

모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용 하기 위해 변수라는 메커니즘을 이용함

변수 이름: 저장된 값의 고유 이름

변수 값: 변수에 저장된 값

변수 할당: 변수에 값을 저장하는 행위

변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위

변수 참조: 변수에 할당된 값을 읽어오는 것

// var로 변수 선언
var myVar = "Hello world";
console.log(myVar);

// let으로 변수 선언
let my Let = "Hello world";
console.log(myLet);

// const로 상수 선언
const myConst = "Hello world"
console.log(myConst);

JS에서 변수는 var, let, const 세 가지 방법으로 선언할 수 있음.

var는 예전부터 사용되던 방법. let과 const는 ECMAScript 6(ES6)에서 새로 도입된 방법.

var는 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언한 값으로 변수가 덮어씌워짐.

let과 const는 같은 이름의 변수를 두 번 선언하면 오류가 발생함. const는 선언 후에 값을 변경할 수 없는 상수를 선언할 때 사용함

 

 

 

1-3, 1-4

데이터 타입 1, 2

데이터 타입: 숫자(Number)

a. 정수형 숫자(Integer)

b. 실수형 숫자(Float)

c. 지수형 숫자(Exponential)

d. NaN(Not a Number)

e. Infinity

f. Infinity

// 데이터 타입
// ruttime : run 하는 time
// 코드를 작성할 때가 아니라, 실제 코드가 실행될 때
// > 우측 터미널에 코드가 실행될 때
// 그 때, 데이터 타입이 결정된다.
// java : String a = "abc";
// const a = "abc";

// 1. 숫자
// 1-1. 정수
let num1 = 10;
console.log(num1);
console.log(typeof num1)

// 1-2. 실수(float)
let num2 = 3.14;
console.log(num2);
console.log(typeof num2);

// 1-3. 지수형(Exp)
let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3);
console.log(typeof num3);

// 1-4. 
// NaN : Not a Number
let num4 = "Hello" / 2;
console.log(num4);

// 1-5. Infinity(무한대)
let num5 = 1 / 0;
console.log(num5);
console.log(typeof num5);

// 1-6. Infinity(무한대)
let num6 = -1 / 0;
console.log(num6);
console.log(typeof num6);

 

 

데이터 타입: 문자(String)

문자열은 문자의 나열으로, 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현함

// 2. 문자 : string(문자열 = 문자의 나열)
// ' ' = " "
let str = "Hello, World!";
console.log(str);
console.log(typeof str);

// 2-1. 문자열 길이 확인하기
console.log(str.length);

// 2-2. 문자열 결합하기(concatenation)
let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result);

// 2-3. 문자열 자르기
let str3 = "Hello, World!";
console.log(str3.substr(7, 5));
console.log(str3.slice(7, 12));

// 2-4. 문자열 검색
let str4 = "Hello, World!";
console.log(str4.search("World"));

// 2-5. 문자열 대체
let str5 = "Hello, World!";
let result01 = str5.replace("World", "JavaScript")
console.log(result01);

// 2-6. 문자열 분할
let str6 = "apple, banana, kiwi";
let result02 = str6.split(",");
console.log(result02);

 

 

데이터 타입: 불리언(Boolean)

불리언은 참(true)과 거짓(false)을 나타내는 데이터 타입

// 불리언(Boolean)
// true(참), false(거짓)
let bool1 = true;
let bool2 = false;

console.log(bool1);
console.log(typeof bool1);
console.log(bool2);
console.log(typeof bool2);

// if : 만약 ~ 한다면! < if문에 불리언이 들어감

// undefined
// un : not, define : 정의하다
let x;
console.log(x);

// null : 값이 존재하지 않음을 '명시적'으로 나타내는 방법
// null = undefined (같지 않음!!)
let y = null;
console.log(y);

// object(객체) : key-value pair
let person = {
    name: 'choi',
    age: 20,
    isMarride: true
}

console.log(typeof person);

// array(배열)
// 여러 개의 데이터를 순서대로 저장하는 데이터 타입!!!
let number = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

 

 

 

1-5

형 변환

자바스크립트에서는 다양한 자료형을 다룰 수 있음. 그리고 이 자료형들은 서로 형 변환이 가능함.

 

암시적 형 변환(implicit coercion)

암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생함

 

명시적 형 변환(explicit coercion)

명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말함

// 형 번환
// 형태 > 바꾼다
// 명시적 형 변환, 암시적 형 변환

// 1. 암시적 형 변환
// 1-1. 문자열 ('더하기' 연산자로 문자열과 다른 데이터 타입(ex. 숫자, 불리언 등)이 만나면 문자열이 우선시 되어 문자열로 형 변환이 됨)
let result1 = 1 + "2";
console.log(result1);
console.log(typeof result1);

let result2 = "1" + true
console.log(result2);
console.log(typeof result2);

// {}, null, undefined + "1" > 문자열

// 1-2. 숫자 ('더하기' 연산자가 아닌 다른 연산자(ex. 빼기, 곱하기, 나누기 등)가 나왔을 때는 항상 숫자가 우선시 되어 숫자로 변환 됨.)
let result3 = 1 - "2";
console.log(result3);
console.log(typeof result3);

let result4 = "2" * "3"
console.log(result4);
console.log(typeof result4);

// 1-3. Boolean(값이 비어있지 않은 "문자열", {객체}는 true로 출력됨)
console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
console.log(Boolean("------------"));
console.log(Boolean("false"));
console.log(Boolean({}));

// 2. 명시적 형 변환

// 2-1. 문자열 변환
let result5 = String(123);
console.log(typeof result5);
console.log(result5);

let result6 = String(true);
console.log(typeof result6);
console.log(result6);

let result7 = String(false);
console.log(typeof result7);
console.log(result7);

let result8 = String(null);
console.log(typeof result8);
console.log(result8);

let result9 = String(undefined);
console.log(typeof result9);
console.log(result9);

// 2-2. Number 숫자 변환
let result10 = Number("123");
console.log(result10);
console.log(typeof result10);

 

 

 

1-6

연산자

자바스크립트에서는 다양한 연산자를 제공하여 변수나 상수를 다양한 방법으로 조작할 수 있음.

// 연산자(+, -, *, /, %)

// 1. 더하기 연산자 (더하기 연산자가 문자열과 함께 나올 때 문자열이 우선시 됨)
console.log(1 + 1); //2
console.log(1 + "1"); //11

// 2. 빼기 연산자 (빼기 연산자가 문자열과 함께 나올 때 숫자가 우선시 됨)
console.log(1 - "2"); //-1
console.log(1 - 2); //-1

// 3. 곱하기 연산자(*) (더하기 제외 모든 연산자는 숫자가 우선시 됨)
console.log(2 * 3); //6
console.log("2" * 3) //6

// 4. 나누기 연산자(/)
console.log(4 / 2); //2
console.log("4" / 2); //2

// 5. 나누기 연산자(/) vs 나머지 연산자(%)
console.log(5 / 2); //2.5
console.log(5 % 2); //1

// 6. 할당 연산자(assignment)
// 6-1. 등호 연산자(=)
let x = 10; //x라는 변수를 선언하고, 값(10)을 할당했다. (=)을 통해서!
console.log(x);

// 6-2. 더하기 등호 연산자(+=)
x += 5; // x = x + 5;
console.log(x);
//x에 5를 더해서 10+5=15가 나오게 됨

x += 5; // x = x + 5;
console.log(x);
//현재 위에서 15가 된 x에 5를 또 더해서 15+5=20이 나오게 됨

// 6-3. 빼기 등호 연산자(-=)
x -= 5; // x = x - 5;
console.log(x);
//현재 20이 된 x에서 5를 빼서 20-5=15가 나오게 됨

x -= 20; // x = x - 20;
console.log(x);
//현재 15가 된 x에서 20을 또 빼서 15-20=-5가 나오게 됨

// 6-4. 곱하기 등호 연산자(*=)
let a = 10;
a *= 2; // a = a * 2;
console.log(a);
//a(=10)에 2를 곱한다 > 20

// 비교 연산자 (> true 또는 false를 반환하는 연산자)
// 1. 일치 연산자(===)
// 타입까지 일치해야 true를 반환하는 연산자
console.log(2 === 2); //숫자 2가 숫자 2랑 같니? 응!! > true로 출력
console.log("2" === 2); //문자 2와 숫자 2가 같니? 아니!! > false로 출력
console.log(2 === "2"); //방향을 바꾼다 하더라도 왼쪽과 오른쪽을 비교하는 것이기 때문에 > false로 출력

// 2. 불일치 연산자(!==)
// 타입까지 일치해야 false를 반환하는 연산자
console.log(2 !== 2); //숫자 2가 숫자 2랑 다르니?? 아니!! > false로 출력
console.log("2" !== 2); //문자 2와 숫자 2가 다르니? 응!! > true로 출력
console.log(2 !== "2"); //방향을 바꾼다 하더라도 왼쪽과 오른쪽을 비교하는 것이기 때문에 > true로 출력

// 3. 작다 연산자(<) / 크다 연산자(>)도 동일한 메커니즘 / 작거나(or크거나) 같다 연산자(<=, >=)
console.log("------"); //그냥 구분선
console.log(2 < 3); //숫자 2가 숫자 3보다 작니? 응!! > true로 출력
console.log(2 <= 3); //숫자 2가 숫자 3보다 작거나 같니? 응!! > true
console.log(3 <= 3); //숫자 3이 숫자 3보다 작거나 같니? 응!! > true
console.log(4 <= 3); //숫자 4가 숫자 3보다 작거나 같니? 아니!! > false

// 4. 논리 연산자 (불리언 타입으로, true 와 false를 비교하는 연산자)
// 4-1. 논리곱 연산자(&&): 두 값이 모두 true일때만, true를 반환함
console.log("------");
console.log(true && true); //true
console.log(true && false); //false
console.log(false && false); //false
console.log(false && true); //false

// 4-2. 논리합 연산자(||): 두 값 중 하나라도 true인 경우 true를 반환
console.log("------");
console.log(true || true); //true
console.log(true || false); //true
console.log(false || false); //false
console.log(false || true); //true

// 4-3. 논리 부정 연산자(!): 값을 반대로 바꾸는 것
console.log("------");
console.log(!true); //false
let c = true;
console.log(!c); //false
console.log(!1 === 1); //false

// 5. 삼항 연산자(): 조건에 따라 값을 선택하는 것 (항이 세개로 이루어져서 삼항)
let d = 10;
let result1 = d > 5 ? "크다" : "작다";
// d > 5, "크다", "작다" 총 3개의 항으로 이루어져서 삼항이라고 함
// 조건(x > 5)이 true이면 앞의 것("크다")으로 결정하고, false이면 뒤의 것("작다")으로 결정하는 것
console.log("------");
console.log(result1);

let e = 20;
// 삼항 연산자를 이용해서 e가 10보다 작은 경우 작다를
// console.log로 출력해주세요.
// 10보다 크다면 크다를 출력해주세요!
let result3 = e < 10 ? "크다" : "작다";
console.log(result3);

let result2 = e > 10 ? "크다" : "작다";
console.log(result2);


// 6. 타입 연산자(typeof)
console.log(typeof "5"); //string으로 출력

 

---

 

VS Code 명령어

터미널 탭에 clear 입력: 데이터 정리(지워짐)

터미널 탭에 node NN.js 입력: (01.js일 경우 node 01.js 라고 입력) 해당 파일 저장 후(cmd+s), 터미널 탭으로 결과 값 불러오기

CMD + 슬래시: 주석 처리