codeStates front-end/Java Script

[JS] Chapter 1. 타입, 변수

환테크 2023. 1. 4. 10:12
반응형

 

 

 

 

 

 

 

코드 실행은 https://stackblitz 에서 진행했습니다.

 

 

타입

 

타입(type)은 값(value)의 종류

 

자주 쓰는 표현은 분류가 필요

정보를 전달하기 위해서 값(value)을 사용

 

2020;
'안녕하세요';
true;

 

자주 쓰는 값을 분류

 

typeof 2020; //"number"
typeof '안녕하세요'; //"string"
typeof true; // boolean

 

각 타입은 고유한 속성과 메서드를 가진다.

 

'안녕하세요'.lenth; // 6
'hello world'.toUpperCase() // 'HELLO WORLD'

 

JS에는 다양한 타입 목록을 가진다.

 

 

Number 타입 - 정수와 실수

 

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

 

typeof 연산자로 해당 값이 숫자 타입인지 확인 가능

 

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

 

 

-산술 연산자

 

같은 숫자 값 간의 사칙 연산

 

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 타입 - 문자열

 

'사과'
"JavaScript"
"欢迎你"
"안녕하세요" + "!!"; // 안녕하세요!! 문자열 연결 연산자
"감사합니다." + " " + "🙏" // 감사합니다. 🙏
1 + "1" // 11
console.log('欢迎你'.length); // 3 문자열 length 속성

 

인덱스(Index) - 문자 순서, 위치, 0부터 셈

 

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

 

문자열 주요 메서드

    •  
    • toLowerCase() : 문자열을 소문자로 변경합니다.
    • toUpperCase() : 문자열을 대문자로 변경합니다.
    • concat() : 문자열 연결 연산자 + 처럼 문자열을 이어 붙일 수 있습니다.
    • slice() : 문자열의 일부를 자를 수 있습니다.
    • indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인합니다.
      • 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
      • 포함되어 있지 않으면 1 을 반환합니다.
      • includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인합니다.

 

 

'HELLO WORLD'.toLowerCase(); // 'hello world'
'hello world'.toUpperCase(); // 'HELLO WORLD'
'hello '.concat('world'); // 'hello world'
'hello world'.slice(0, 5); // 'hello'
'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false

 

 

 

Boolean 타입

 

 

true;
false;

 

비교연산자 : == , ≠= , > . < . ≤ , ≤

논리연산자 : || , &&

논리 부정 연산자 : !

 

변수

 

변수 선언 : let (var 도 가능하나 잘 사용 x)

값을 할당할 때는 할당 연산자(=)

동시 선언 가능

 

let name;
name = 'kjh';
let name = 'kjh';

 

변수 활용

 

연산

 

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

 

 

 

실습) 삼각형 너비 구해보기

 

 

반응형