24.04.23 TIL(Today I Learned)

Jony·2024년 4월 23일
0

[TIL]

목록 보기
8/15
post-thumbnail

JavaScript

1. 변수, 상수

: 메모리에 저장하고, 읽어들여 재사용한다.

  • 변수의 5가지 주요 개념
    1) 변수 이름: 저장된 값의 고유 이름
    2) 변수 값: 변수에 저장된 값
    3) 변수 할당: 변수에 값을 저장하는 행위
    4) 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위
    5) 변수 참조: 변수에 할당된 값을 읽어오는 것

  • 변수를 선언할 수 있는 3가지 방법 : var, let, const
    1) var : 재할당과 재선언이 가능
    2) let : 재할당 가능, 재선언 불가능
    3) const : 재할당과 재선언 불가능

2. 데이터 타입

: runtime, 코드를 작성할 때가 아니라 실제 코드가 실행될 때(터미널에 코드가 실행될 때) 그 때, 데이터 타입이 결정된다.

1) 숫자

1-1) 정수
let num1 = 10
console.log(num1) //10
console.log(type of num1) //number
1-2) 실수(float)
let num2 = 2.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. 문자 (string : 문자열 - 문자의 나열) '',""
    let str = "hello world!";
    console.log(str);
    console.log(typeof str);

    2-1) 문자열의 길이 확인 (.length) (띄워쓰기도 포함)
    console.log(str.length);
    2-2) 문자열 결합 (.concat /concatenation)
    let str1 = 'hello '
    let str2 = 'world'
    let result = str1.concat(str2);
    console.log(result)
    2-3) 문자열 자르기 (.substr, .slice)
    let str3 = "hello world";
    console.log(str3.substr(0,5)) // (시작하는 숫자,시작한 곳에서 끝내는 숫자)
    console.log(str.slice(5,10)) // (시작하는 숫자, 전체 열에서의 숫자)
    2-4) 문자열 검색 (.search)
    let str4 = 'hello world'
    console.log(str4.search('world'))
    2-5) 문자열 대체 (.replace)
    let str5 = 'hello world'
    let result1 = str5.replace('world', 'script')
    console.log(result1)
    2-6 문자열 분할
    let str6 = 'apple, melon, banana';
    let result2 = str6.split(',')
    console.log(result2)

3. 블리언(Boolean):

true(참), false(거짓)

let bool1 = true;
let bool2 = false;
console.log(bool1);
console.log(typeof bool1);
console.log(bool2);
console.log(typeof bool2);

1) undefined 정의되지 않은 값(할당되지 않은 값)
let x
console.log(x)
2) null : 값이 존재하지 않음을 '명시적'으로 나타내는 방법(의도적으로 표현)
let y = null
console.log(y)
3) object(객체) : key-value pair 키와 벨류 값이 같이 들어가야 한다.
let person = { name: 'seo', age: 30 }
console.log(person)
console.log(typeof person)
4) array 배열
: 여러개의 데이터를 순서대로 저장하는 데이터 타입!
위치에 의한 데이터(index)가 있다.(0부터 시작~)
let number = [1, 2, 3, 4, 5, 6];
let fruit = ['apple', 'grape', 'banna'];

4. 형 변환

형태를 바꾼다

명시적 형 변환, 암시적 형 변환

1) 암시적 형 변환

1-1) 문자열
let result = 1 + '2';
console.log(result);//12
console.log(typeof result);//string
숫자와 문자가 만나면 문자열로 된다
let result1 = '1' + true;
console.log(result1);//1true
console.log(typeof result1);//string

  • {객체}, null, nndefined + '1' => 문자열로 변환
    1-2) 숫자
    let result2 = 1 - '2';
    console.log(result2)//-1
    console.log(typeof result2);//number

let result3 = '2' * '3';
console.log(result3);//6
console.log(typeof result3);//number

  • +연산자를 제외한 -,*,/ 연산자를 사용할 땐 숫자가 우선 시 된다.

2) 명시적 형 변환
Boolean
console.log(Boolean(변환시킬 값));
console.log(Boolean(0));//number
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({}));//true

2-1) 문자열
예1)
let result4 = String(123);
console.log(typeof result4)//string
console.log(result4)//123
예2)
let result5 = String(true);
console.log(typeof result5)//string
console.log(result5)//true
예3)
let result6 = String(false);
console.log(typeof result6)//string
console.log(result6)//false
예4)
let result7 = String(null);
console.log(typeof result7)//string
console.log(result7)//null
예5)
let result8 = String(undefined);
console.log(typeof result8)//string
console.log(result8)//undefined

2-2) Number
예1)
let result9 = Number('123')
console.log(result9)//123
console.log(typeof result9)//number

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

1) 더하기 연산자 (+)
console.log(1 + 1)
console.log('1' + 1)

  • +연산자를 제외한 -,*,/ 연산자를 사용할 땐 숫자가 우선 시 된다.

2) 빼기 연산자(-)
console.log(1 - '3')
console.log(1 - 3)

3) 곱하기 연산자(*)
console.log(2 x 4)
console.log('2' x 9)

4) 나누기 연산자(/)
console.log(2 / 6)
console.log('5' / 20)

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

5-1. 할당 연산자(assingnment)

1) 등호 연산자(=)
let x = 10; // x = 10이다
console.log(x)

2) 더하기 등호 연산자(+=)
let y =10;
y +=5; // y의 값에 5를 더해준다
console.log(y)

3) 빼기 등호 연산자 (-=)
y -=5 // y의 값에 5를 빼준다
console.log(y)

let a = 10;
a *= 2;
console.log(a);

5-2. 비교 연산자 (비중이 높다) : true 또는 false를 반환하는 연산자

1) 일치 연산자(===) : 타입까지 일치해야 true를 반환

console.log(2 === 2); // true >>숫자2와 숫자2가 같아? => '응'
console.log('2' === 2); // false >>문자2와 숫자 2가 같아? => '아니'
console.log( 2 === '2'); //false

2) 불일치 연산자(!==) : 타입까지 일치해야 false를 반환

console.log(2 !== 2) // false >>숫자2와 숫자2가 달라? => '아니'
console.log( 3 !== '3') //true >>숫자3과 문자3이 달라? => '응'

3) 작다 연산자 (<), 작거나 같다 연산자(<=)
console.log(2 < 4) // true
console.log(2 <= 4) // true
console.log(5 <= 4) // false
console.log(9 <= 5) // false

5-3. 논리 연산자

1) 논리곱 연산자 - 모두 true일 때 true 반환
console.log(true && true) //true
console.log(true && false) //false
console.log(false && true) //false
console.log(false && false) //false

2) 논리합 연산자 - 두 값 중 하나라도 true인 경우 true
console.log(true || true) //true
console.log(true || false) //true
console.log(false || true) //true
console.log(false || false) //false

3) 논리부정 연산자 - 서로 값을 반대로 바꿔줌
console.log(!true)
console.log(!false)

let b= true
console.log(!a)

5-4. 삼항 연산자(중요!) : 조건에 따라 값을 선택한다.

let z = 10;
let result = (z > 5) ? '크다' : '작다'
console.log(result)

let c = 20;
let result1 = (c > 10) ? '크다' : '작다'
console.log(result1)

1) 타입 연산자 (typeof)
console.log(typeof '56')

profile
알면 알수록 모르는 코태계

0개의 댓글