LG CNS Camp 2기/Front-end : JavaScript

[JavaScript] 자료형

BuSiSi 2025. 4. 1. 00:13

Primitive (기본) : 더 이상 나눠지지 않는 하나의 값 (Single item)

  • number, string, boolean, null, undefined

Reference (참조) : Single item 들을 하나의 단위로 관리

  • { }, [ ], class

Function (함수)

  • First-class Function
  • 함수를 다른 변수와 동일하게 다루는 것

숫자

  • number() : 숫자로 형변환
  • parseInt() : 정수형으로 형변환
  • parseFloat : 실수형으로 형변환
<body>
    <script>
        let food1 = prompt('첫번째 음식의 금액을 입력해주세요.');
        let food2 = prompt('두번째 음식의 금액을 입력해주세요.');
        let cnt = prompt('나누어 낼 인원 수를 입력해주세요.');
        let price = 0; // 전체 금액
        let nPrice = 0; // 인원 수로 나눈 금액
        
        // 프롬프트로 받는 입력은 기본적으로 문자열임
        // 문자 => 숫자 형변환
        price = Number(food1) + Number(food2);
        nPrice = price / cnt;
        console.log(`전체 금액: ${price}, 인원 수: ${cnt}`);
        console.log(`1/n 금액: ${nPrice}`);
    </script>
</body>

문자

  • 작은 따옴표 ' ', 큰 따옴표 " ", backtick ` ` 사용 가능.
backtick 사용 예시
let age = 1;
console.log(`나이는 ${age}살 입니다.`);
  • . (점) : 내부 기능 활용 ( 자주 사용되는 것은 알아두기 )
    .length : 글자 길이
    .substring() : 원하는 글자 추출 (시작인덱스~ 끝인덱스)
    .substr() : 원하는 글자 추출(시작인덱스~원하는 문자수)
    .indexOf() : 원하는 문자 위치 확인
    .includes() : 원하는 값이 존재하는지 확인
    .replace() : 문자열 변환
<body>
    <script>
        const str = 'JavaScript';
        
        //원하는 값이 몇번째에 있는지 확인
        console.log(str.indexOf('v')); //출력 : 2 
        console.log(str.indexOf('a', str.indexOf('a') + 1) + '번째'); //출력 : 3번째

        //str안에 원하는 값이 존재하는지 확인 true/false
        console.log(str.includes('v')); //출력 : true

        //문자열 변환
        console.log(str.replace("Java", "자바")); //출력 : 자바Script

        //substr(시작인덱스, 추출할 문자수), substirng(시작인덱스, 끝인덱스+1)
        console.log(str.substr(4, 2)); //출력 : Sc
        console.log(str.substring(4, 7)); //출력 : Scr

    </script>
</body>
  • 인덱싱활용
<body>
    <Script>
        const char = 'c';
        const username = 'developer';

        // index의 개념
        console.log(username[0]); //출력 : d
        console.log(username[7]); //출력 : e

        console.log(username.length); // 출력 : 9
    </Script>
</body>

논리

  • true or false

null / undefined

  • null : 값을 할당하지 않았음을 명시
  • undefined : 선언만 한고 값에 대해 언급하지 않음

object

<body>
    <script>
    	// { "key값": "value" } 
        const user = { "name": "developer", "age": 30 };
        user.age = 29;
        console.log(user);
        
        const arr = [1, 2, 3];
        arr[0] = 10;
        console.log(arr);
    </script>
</body>

배열 정렬

  • .sort(a, b) 활용
<body>
    <script>
        const arr = [5, 3, 1, 2, 4];
        arr.sort();
        console.log(arr);
        //출력 : [1, 2, 3, 4, 5]

        arr.sort((a, b) => b - a);
        console.log(arr);
        //출력 : [5, 4, 3, 2, 1]
    </script>
</body>