Daily Logs/TIL (Today I Learned)

8월 12일 본강의 6일 Java.s

Jcob.moon 2024. 8. 12. 21:52

자바 스크립트의 역사 LiveScript ->Javascript 넷스케이프 커뮤니케이션.

-브라우저 동작 스크립트 언어.

2005년 AJAX 등장. 이전엔 전체적인 새로고침 이후 부분 새로고침

폭발적인 UX 향상 유저익스피리언스= 사용자 경험

 

2008 V8 엔진 출시 코드 실행 속도 부분 상당 개선 , 메모리 관리시스템

2009 노드JS 등장 서버개발 활성화

FrontEnd+BackEnd+DB = Fullstack 

 

JS 언어의 특징

1. 객체 지향 프로그래밍 지원 . 

ex 객체지향 vs 절차지향 

절차지향 -> 첫번째 일 다음 두번째 일처리.

객체 지향 -> 데이터와 함수를 객체라는 그룹으로 묶어서 처리. 객체는 상태와 행동을 가지고있으며 상태는 객체의 속성이라고도 합니다.

JS에서 객체를 만들 때는?

자바스크립트에서 객체를 만들 때는 **중괄호({})**를 사용하여 객체를 만들고, 각 속성을 **쉼표(,)**로 구분하여 추가합니다. 속성은 이름과 값을 가지며, 이름은 문자열로 작성하고, 값은 다양한 데이터 타입을 사용할 수 있습니다. 객체 내부의 함수를 **메소드(method)**라고 부르며, 속성의 값으로 함수를 추가할 수 있습니다. 객체를 만들어서 필요한 속성과 메소드를 추가하여 사용합니다.

 

2. 동적 타이핑 언어이다.

런타임 시점에서 타입이 정해진다. 반대는 컴파일 시점.
선언과 할당에 집중.

let myVariable = "Hello, world!"; // 변수 선언 및 문자열 데이터 타입으로 할당
console.log(typeof myVariable); // "string" 출력

myVariable = 123; // 숫자 데이터 타입으로 할당
console.log(typeof myVariable); // "number" 출력

myVariable = true; // 불리언 데이터 타입으로 할당
console.log(typeof myVariable); // "boolean" 출력

 

3. 함수형 프로그래밍 지원

함수를 일급 객체로 취급하고, 고차 함수를 지원합니다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다.

일급 객체(first-class object)란, 함수를 일반 값과 마찬가지로 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 객체를 의미합니다.

// 함수를 변수에 할당
const add = function(a, b) {
  return a + b;
}

// 함수를 인자로 받는 함수
function calculate(func, a, b) {
  return func(a, b);
}

// 함수를 반환하는 함수
function getAddFunction() {
  return add;
}


// 함수를 일급 객체로 다루어 코드의 재사용성을 높임
console.log(calculate(add, 2, 3)); // 5
console.log(getAddFunction()(2, 3)); // 5

 

고차 함수(higher-order function)란, 함수를 인자로 받거나, 함수를 반환하는 함수를 의미합니다.

// 고차 함수 예시: 함수를 인자로 받는 함수
function operate(func, a, b) {
  return func(a, b);
}

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

console.log(operate(add, 2, 3)); // 5
console.log(operate(multiply, 2, 3)); // 6

4.비동기 처리

 

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

================================================================================

-변수와 상수.

 

변수가 무엇이고, 왜 필요할까요? 모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용 하기 위해 변수라는 메커니즘을 이용합니다. 만약, 변수를 이용해서 재사용을 하지 않는다면, 우리는 “10 + 20 + 30 = 60”이라는 식에서 60이라는 결과값을 얻기 위해서 항상 저렇게 긴 식을 써줘야 하겠죠. 변수를 사용한다면 60이라는 결과만 변수에 담아놓고, 계속해서 재사용하기만 하면 돼요 🙂

 

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

변수 값 : 변수에 저장된 값

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

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

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

자바스크립트에서 변수는 var, let, const 세 가지 방법으로 선언할 수 있습니다. **var**은 예전부터 사용되던 방법입니다. **let**과 **const**는 ECMAScript 6(ES6)에서 새로 도입된 방법입니다.

 

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

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

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

 

var는 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언한 값으로 변수가 덮어씌워집니다. let과 const는 같은 이름의 변수를 두 번 선언하면 오류가 발생합니다. const는 선언 후에 값을 변경할 수 없는 상수를 선언할 때 사용합니다.

 

// var로 변수 덮어쓰기 var myVar = "Hello"; var myVar = "World"; console.log(myVar); // "World" //

let으로 변수 덮어쓰기 let myLet = "Hello"; myLet = "World"; // 기존 값을 덮어쓰기 console.log(myLet); // "World" //

const로 상수 선언 후 값 변경하기 const myConst = "Hello"; myConst = "World"; // 오류 발생 console.log(myConst);

=======================================================================================

데이터 타입과 형 변환

console.log(typeof num) -> 콘솔로그 타입 출력.

1- 데이터 타입.

1. 숫자 

a 정수형 숫자(integer)

let num1=10;
console.log(num1);
console.log(typeof num1);

b 실수형 숫자(Float) -

let num2=3.14;
console.log(num2);
console.log(typeof num2);

c지수형 숫자(Exponential)

let num3=2.5e5;
console.log(num3);
console.log(typeof num3);

d NaN (Not a number)

let num4="Hello"/2;
console.log(num4);

e infinity

let num5 = 1/ 0 ;
console.log(num5);
console.log(typeof num5);

f -infinity ( 음수)


let num6 = -1/ 0 ;
console.log(num6);
console.log(typeof num6);

2. 문자열(string)

문자열은 문자의 나열입니다. 작은따옴표나 큰따옴표로감싸서 표현합니다.

a 문자열 길이(length)확인하기

let str = "Hello World!";
 console.log(str);
 console.log(typeof str);
console.log(str.length);

b 문자열 결합(concatenation)

let str1 ="Hello,";
let str2 ="World!";
let result = str1.concat(str2);
 console.log(result);

c 문자열 자르기(substr,slice)

 let str3="Hello, World!";
 console.log(str3.substr(7,5));
 console.log(str3.slice(7,12));

d 문자열 검색(search)

let str4="Hello, World1";
 console.log(str4.search("World"));

e 문자열 대체(replace)

let str5="hello,World!";
let result01 = str5.replace("World","Javascript")
console.log(result01);

f 문자열 분할(splite)

let str6 = "apple,banana,kiwi";
let result02 = str6.split(",");
console.log(result02);

 

3. 불리언(Boolean)

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

let bool1 = true;
let bool2 = false;

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

&& AND , ll OR , ! Not

4.undefined 

값이 할당되지 않은 변수.

let x;
console.log(x);

5.null

값이 존재하지 않음을 의미 [개발자가 의도적으로 값이 없음을 명시하기 위하여 넣은것임.]

let y=null;
console.log(y);

 

6.객체(Object)

객체는 속성과 메소드를 가지는 컨테이너 입니다. 중괄호({})를 사용하여 객체를 생성합니다.

let person ={
    name:'choi',
    age :20,
    isMarried:true
}
console.log(typeof person);

7.배열(Array)

배열은 여러개의 데이터를 순서대로 저장하는 데이터 타입입니다. 대괄호([])를 사용하여 배열합니다.

let number =[1,2,3,4,5];
let fruits = ['apple','banana','orange']
console.log(number);
console.log(fruits);
console.log(typeof number);
console.log(typeof fruits);

 

2- 형 변환

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

1.암시적 형변환(implicit coercion)

암시적 형변환은 자바스크립트에서 자동으로 수행되는 형 변환이며 일반저긍로 연산자를 사용할떄 발생한다.

더하기 연산자가 아닌 다른 연산자 빼기 , 곱하기 나누기가 나오면 숫자가 우선시.

1-1 문자열 변환 

let result1= 1+"2";
console.log(result1);
console.log(typeof result1);

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

1-2 숫자변환 


let result3 = 1 - "2";
console.log(result3);
console.log(typeof result3);

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

1-3 불리언 변환

console.log(Boolean(0)); //false
console.log(Boolean("")); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(false)); // true
console.log(Boolean({})); //ture

 

2.명시적 형변환(explicit coercion)

명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말합니다.

2-1 문자열 변환

let result5 = String(123); // String
console.log(typeof result5);
let result6 = String(true);
console.log(typeof result6);
let result7 = String(false);
console.log(typeof result7);
let result8 = String(null);
console.log(typeof result8);
let result9 = String(undefined);
console.log(typeof result9);

2-2 숫자변환

let result10 = Number("123"); //Number
console.log(typeof result10);

 

=====================================================================================

연산자

다양한 연산자를 제공하여 변수나 상수를 다양한 방법으로 조작할 수 있습니다.

1. 산술 연산자(arithmetic operators)

a 더하기 연산자

console.log(1+1); // 2
console.log(1+"1"); //11

숫자 + 문자열 -> 문자열 변환

b. 빼기 연산자

console.log(1-2); // -1
console.log(1-"2"); // -1

뺴기 연산자는 숫자와 문자열을 함께 사용할 경우 자동으로 숫자로 변환.

 

c 곱하기 연산자

console.log(2 *3); //6
console.log(2 *"3"); //6

곱하기 연산자는 숫자와 문자열을 함꼐 사용할 경우, 자동으로 숫자로 변환합니다.

d 나누기 연산자/

console.log(4 /2 ); //2
console.log("4" /2 ); //2

자동으로 숫자로 변환합니다.

e 나머지 연산자 %

console.log(5/2); //2.5
console.log(5%2) //1

자동으로 숫자로 변환합니다.

 

2.할당 연산자(assignment operators)

a 등호 연산자(=)

let x = 10;
console.log(x); //10

b더하기 등호 연산자(+=)

let x = 10;
console.log(x);
x+=5;
console.log(x); //15

c빼기 등호 연산자(-=)

let x = 10;
console.log(x);
x-=5;
console.log(x); //5

d곱하기 등호 연산자(*=)

let x = 10;
console.log(x);   // 10
x -= 5;
console.log(x);   // 50

e나누기 등호 연산자(/=)

let x = 10;
console.log(x);   // 10
x /= 5;
console.log(x);   // 2

f나머지 등호 연산자(%=)

let x = 10;
console.log(x);   // 10
x %= 3;
console.log(x);   // 1

 

3.비교 연산자(comparison operators) 중요 true 또는 false를 반환하는 연산자

a 일치 연산자(===)

console.log(2 === 2); // true

console.log("2" === 2); // false

console.log(2 === "2"); // false

자료형(타입)까지 비교

 

b 불일치 연산자(!==)

console.log(2 !== 2);   // false
console.log("2" !== 2);   // true
console.log(2 !== "2");   // true

자료형까지 비교

 

c 작다<연산자

console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true

자동으로 숫자 변환

 

d 크다> 연산자

console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false

자동으로 숫자 변환

 

e크거나 같다 연산자

자동으로 숫자 변환

 

4 논리 연산자(logical operators) true와 false 를 비교하는 연산자

a 논리곱(&&) 연산자

console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

두값이 모두 true일 경우에만 true를 반환합니다

 

b 논리합(ll)연산자

console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

두 값 중 하나라도 true일 경우 true를 반환합니다.

 

c논리 부정 (!) 연산자

console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

true를 false로 false를 true로 변환

 

5.삼항 연산자(ternary operator) 조건에 따라 값을 선택한다.

a 삼항 연산자(?:)

 

//y가 10보다 작은 경우 작다를 10보다 크다면 크다를 console.log로 출력. 3항연산자이용

let y=20;
let result = y>10 ? "크다" : "작다";
console.log(result);

 

6. 타입 연산자(type operators)

a typeof연산자

원시시자료형의경유 해당 자료형의 이름을 객체나 함수의 경우 object or function을 반환합니다.

typeof null의 경우 object를 반환하는 버그가있다.

---------------------------------------------------------------------------------------------------------------

함수  -> 인풋과 아웃풋

함수를 정의하여 코드의 재사용성을 높일 수 있다.

 

1. 함수 정의

1- 함수 선언문

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

function add(x,y){
    return x+y;

};
console.log(add(10,20));


10과 20 더한값 출력

2- 함수 표현식(function expression)

let add = function(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

let add =function(x,y){
    return x+y;
}
console.log(add(10,20));

10과 20 더한값 출력

2. 함수 호출하기

1- 함수 호출하기

 

3 함수 매개변수와 반환값

1- 함수 매개변수

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

2- 함수 반환값

function add(x, y) {
  return x + y;
}

let result = add(2, 3);
console.log(result);   // 5

 

4. 함수 스코프

1- 전역 스코프 (global scope)

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

2- 지역스코프(local scope)

function printX() {
  let x = 10;
  console.log(x);
}

printX();   //

3-블록 스코프 (block scope)

if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

 

5 화살표 함수 

1- 기본적인 화살표 함수

let add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));   // 5

2- 한줄로 된 화살표 함수

let add = (x, y) => x + y;

console.log(add(2, 3));   // 5

3- 매개변수가 하나인 화살표 함수

let square = x => x * x;

console.log(square(3));   // 9

===============================================================

조건문 (if,else if , else , switch)

1.if 문

1-1. 기본적인 if문

if문은 조건이 참인 경우에만 코드를 실행합니다.

let x = 10;

if (x > 0) {
  console.log("x는 양수입니다.");
}

1-2 if-else 문

조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행합니다.

let x = -10;

if (x > 0) {
  console.log("x는 양수입니다.");
} else {
  console.log("x는 음수입니다.");
}

1-3 if-else if else 문

변수가 양수인지 음수인지를 판별 0도 포함. 출력 해당 조건에 맞는 코드 실행.

let x = 0;

if (x > 0) {
  console.log("x는 양수입니다.");
} else if (x < 0) {
  console.log("x는 음수입니다.");
} else {
  console.log("x는 0입니다.");
}

 

2 switch문

 

변수의 값에 따라 여러개의 경우(case) 하나를 선택하여 코드를 실행합니다.

default는 모든 경우에 맞지 않는 경우에 실행되는 코드입니다.

 

let fruit = "사과";

switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break;
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break;
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}