자바스크립트 - 03

월요일좋아·2022년 10월 9일

JavaScript

목록 보기

3/6

연산자 알아보기

산술 연산자
- ES6에서 추가된 연산자 : ** ( 지수연산을 위한 제곱 )
- 그 외는 자바와 동일 ( + - * / % ++ -- )

할당 연산자

ES6에서 추가된 연산자 : **=

console.log("a ** b = " + (a ** b));    //  지수 연산자 이용
console.log("a * a * a = " + (a * a * a));  // 지수 연산자를 사용하지 않을때 a의 b제곱 표시하는 법

그 외는 자바와 동일 ( = += -= /= %=)

연결 연산자
문자열과다른 데이터 타입을 + 로 연결 시, 모두 문자열이 된다.
ex) document.write ( 배열Array + " 배열입니다. "); --> 합쳐서 문자열이 됨(배열 내부 안보임)
비교 연산자
피연산자 2개의 값을 비교해서 true나 false로 결과값 반환
- JS에만 있는 연산자 (프로그램에서 값을 비교할때 많이사용)
  === : 3 === "3" // false
  !== : 3 !== "3" // true
  자바에서는 "5"와 5를 아예 다른것으로 인식하여 연산이 불가능함.
  자바스크립트에서는 5와 "5"의 연산이 가능함.

자바스크립트에서는 간소화된 문법을 사용하기 때문에 문자열로 데이터 타입의 숫자와 숫자 데이터 타입의 숫자의 비교 연산이 가능함.

//   ==, !=, ===, !== 의 차이점은 ==, != 은 데이터 타입을 확인하지 않고 비교 연산만 진행.
//   ===, !==은 값과 데이터 타입을 모두 확인하여 비교 연산을 진행
console.log("'5' == 5 : " + ('5' == 5));
console.log("'5' === 5 : " + ('5' === 5));
console.log("'5' != 5 : " + ('5' != 5));
console.log("'5' !== 5 : " + ('5' !== 5));

//   논리 연산자
console.log("10 > 5 && '5' === 5 : " + (10 > 5 && '5' === 5));
console.log("10 > 5 || '5' === 5 : " + (10 > 5 || '5' === 5));
console.log("!('5' != 5) : " + (!('5' != 5)) )

//   typeof : 지정한 변수의 데이터 타입을 확인(타입을 반환)
console.log("typeof a : " + (typeof a));    // number
a = "자바스크립트";
console.log("typeof a : " + (typeof a));    // String

//   instanceof : 지정한 변수가 지정한 클래스의 객체인지 확인(true/false 반환)
let time = new Date();
console.log("instanceof : " + (time instanceof Date));

연산자의 우선순위

()
. : 멤버, [] : 멤버, () : 함수호출
new
++, --, !, typeof, delete
*, , /, %
+, -
<<, >>, >>> : 비트연산
in, instanceof, <, <=, >, >=, ==, ===, !=, !==
&, ^, |
&&, ||, ? :
=, +=, -=, *=, /=, %=, **=

객체 타입 (Object)

원래 객체 타입은 자바스크립트의 클래스라고 생각하면 됨.
함수와 변수를 모두 가지고 있는 형태의 데이터 타입
여기서 말하는 객체 타입은 배열과 같은 형태로 사용하는 객체 타입을 말함, 이를 object 타입이라고 앞으로 이야기 할꺼임
배열처럼 하나의 변수명으로 여러개의 데이터를 저장할 수 있는 데이터 타입이다. index가 없고, 데이터를 구분하기 위해 key를 사용함
key와 value의 1:1 로 연동되어있는 형태의 데이터 타입 (인덱스 없어서 for-in 문 사용하여 출력가능)
사용 기호는 { }, key와 value는 : 으로 구분하고, 각각의 데이터는 , 로 구분
key를 설정 시 문자열로 입력하고, " " 또는 ' ' 는 생략해도 됨
사용법: [ 선언 ]
변수명 = {key1: value1, key2: value2, ... };
사용법: [ 사용 ]
변수명.key; ---> 출력
변수명.key = 데이터 ---> 저장
변수명["key"];
변수명["key"] = 데이터; ---> 저장
조회

const obj = {name: "홍길동", 'age': 30, "gender": "남자"};
console.log("이름 : " + obj.name);
console.log("나이 : " + obj.age);
console.log("성별 : " + obj["gender"]);

저장

obj.name = "아이유";
obj["gender"] = "여성";

console.log("이름 : " + obj.name);
console.log("나이 : " + obj.age);
console.log("성별 : " + obj["gender"]);

데이터 추가

obj.job = "가수";
console.log("직업 : " + obj["job"]);
console.log(obj);

데이터 삭제

delete obj.gender;
console.log(obj);

문자열 함수

문자열 변수 사용 시 선언 방법

let str1 = "일반적인 = 을 사용한 방법";
let str2 = new String("new 키워드를 사용한 방법");

console.log(str1);
console.log(str2);

str1 = "test";
str2 = new String("test");
console.log(str1);
console.log(str2);

console.log("str1 == atr1 : " + (str1 == str2));
console.log("str1 === atr1 : " + (str1 === str2));

str3 = "test";
str4 = "test";
console.log("str3 == atr4 : " + (str3 == str4));
console.log("str3 === atr4 : " + (str3 === str4));

str5 = new String("test");
str6 = new String("test");
console.log("str5 == atr6 : " + (str5 == str6));
console.log("str5 === atr6 : " + (str5 === str6));

length( )

문자열의 길이를 출력

slice( )

문자열의 일부를 추출, 원본은 그대로 두고 새 문자열을 반환, 끝 index는 포함하지 않음, 음수를 사용하여 뒤에서부터 자를 수 있음
substring은 음수 인덱스 값 사용 불가능
사용법 :
변수명.slice(시작index, 끝index);
변수명.slice(시작index);

let str7 = "사과, 바나나, 파인애플";
console.log("원본 문자열 : " + str7);
let str8 = str7.slice(4);
console.log("slice(4) 로 잘라낸 문자열 : " + str8);
str8 = str7.slice(4, 7);    // 주의! 끝 index는 포함하지 않음.
console.log("slice(4, 7) 로 잘라낸 문자열 : " + str8);

//  substring 과의 차이점 : slice는 음수 인덱스 값 사용 가능
str8 = str7.slice(-9, -6);
console.log("slice(-9, -6) 로 잘라낸 문자열 : " + str8);

substring( )

slice()와 비슷한 기능, 원본은 그대로 두고 새 문자열을 반환,
가장 작은 값이 0이기 때문에 음수를 사용하면 가장 작은 값인 0 으로 변환하여 데이터를 가져옴
substring은 slice와 다르게 음수 인덱스값 인식 못하고 최소값인 0 으로 인식함.
사용법 :
변수명.substring(시작index, 끝index);
변수명.substring(시작index);

console.log("원본 문자열 : " + str7);
str8 = str7.substring(4);
console.log("substring(4) 로 가져온 문자열 : " + str8);
str8 = str7.substring(4, 7);
console.log("substring(4, 7) 로 가져온 문자열 : " + str8);

//  substring은 slice와 다르게 음수 인덱스값 인식 못하고 최소값인 0 으로 인식함.
str8 = str7.substring(-9);
console.log("substring(-9) 로 가져온 문자열 : " + str8);

substr( )

slice()와 비슷한 기능, 두번째 매개변수가 추출할 문자열의 길이를 뜻함 (몇번 index 부터 몇개 가져와라)
두번째 매개변수가 없을 경우 문자열의 끝까지 가져옴
사용법 :
변수명.substr(시작index, 글자수);
변수명.sucstr(시작index);

console.log("원본 문자열 : " + str7);
str8 = str7.substr(4, 3);
console.log("substr(4, 3) 로 가져온 문자열 : " + str8);
str8 = str7.substr(4);
console.log("substr(4) 로 가져온 문자열 : " + str8)

replace( )

검색한 문자를 지정한 문자로 변환, 검색된 [첫번째 문자열만] 변경,
검색된 모든 문자열을 변경하려면 반복문을 사용하거나 정규표현식을 사용해야 함. 원본은 그대로 두고 새 문자열을 반환함
사용법 :
변수명.replace(검색할 문자열, 변경할 문자열);

console.log("원본 문자열 : " + str7);
let str9 = str7.replace("바나나", "몽키바나나");
console.log("replace(\"바나나\", \"몽키바나나\") 사용 후 : " + str9);
str9 = str7.replace(", ", "");
console.log("replace(\", \", \"\") 사용 으로 문자 삭제 후 : " + str9);
str9 = str7.replace(/, /g, "");
console.log("replace()와 정규표현식으로 문자 삭제 : " + str9);

toUpperCase( )

영문자를 모두 대문자로 변경
사용법 :
새 변수 = 변수명.toUpperCase();

let str10 = "Hello World!";
console.log("원본 문자열 : " + str10);
let str11 = str10.toUpperCase();
console.log("toUpperCase() 사용 후 : " + str11);

toLowerCase( )

영문자를 모두 소문자로 변경
사용법 :새 변수 = 변수명.toLowerCase();

console.log("원본 문자열 : " + str10);
str11 = str10.toLowerCase();
console.log("toUpperCase() 사용 후 : " + str11);

concat( )

2개 이상의 문자열을 하나의 긴 문자열로 변환, 새 문자열로 반환( 원본은 그대로 )
사용법 : 새 변수 = 문자열1.concat(문자열2, ...);

console.log("원본 문자열 str10 : " + str10 + "\tstr11 : " + str11);
let str12 = str10.concat(str11);
console.log("concat() 사용 후 : " + str12);

trim( )

문자열에 포함된 앞, 뒤의 공백을 삭제함
사용법 : 새 변수 = 문자열.trim();

const str13 = "     공백이 많은 문자열     ";
console.log("원본 문자열 : " + str13);
let str14 = str13.trim();
console.log("trim() 사용 후 : " + str14);

charAt( )

지정한 index에 있는 문자를 반환
사용법 : 새 변수 = 문자열.charAt(index);

console.log("원본 문자열 : " + str13);
str14 = str13.charAt(5);
console.log("charAt(5)로 가져온 문자 : " + str14);

split( )

문자열을 지정한 문자를 기준으로 하여 전부 잘라내어 배열로 반환
사용법 : 새 배열 = 문자열.split(문자);

const str15 = "사과,배,감,귤,복숭아,포도";
console.log("원본 문자열 : " + str15);
console.log("str15의 타입 확인 : " + typeof str15);
let arr1 = str15.split(",");
console.log("split(\",\") 사용 후 :");
console.log(arr1);
console.log("arr1의 타입 확인 : " + typeof arr1);

indexOf( )

문자열 내에서 지정한 검색어를 검색하여 해당 Index 번호를 반환
사용법 :
변수 = 문자열.indexOf(검색어);
변수 = 문자열.indexOf(검색어, 검색위치);

const str16 = 
      "replace()와 정규표현식으로 검색되는 모든 문자 변경 : 사과바나나파인애플";

console.log("원본 문자열 : " + str16);
let index = str16.indexOf("모든");
console.log("indexOf('모든') 의 위치 : " + index);
index = str16.indexOf(" ", 29); // 29번 문자 이후 공백 검사
console.log("indexOf(' ', 29) 의 위치 : " + index);

lastIndexOf( )

문자열 내에서 지정한 검색어를 뒤에서부터 검색하여 해당 Index 번호를 반환
사용법 :
변수 = 문자열.lastIndexOf(검색어);
변수 = 문자열.lastIndexOf(검색어, 검색 위치);

console.log("원본 문자열 : " + str16);
index = str16.lastIndexOf(" ");
console.log("indexOf(' ') 의 위치 : " + index);

// 30번 문자 이전, 뒤에서 시작했을때 제일 처음 만나는 공백 검사
index = str16.lastIndexOf(" ", 30); 

console.log("lastIndexOf(' ', 30) 의 위치 : " + index);

search( )

indexOf와 비슷한 기능, 정규표현식에서 사용 가능, indexOf와 달리 두번째 매개변수가 없음.
사용법 : 변수 = 문자열.search(문자열);

const str17 = "사과,배,감,귤,복숭아,포도,사과,배,감,귤,복숭아,포도";
console.log("원본 문자열 : " + str17);
index = str17.search("감");
console.log("search('감')으로 검색한 위치 : " + index);

match( )

정규표현식에서 사용, 검색된 내용을 배열로 반환
사용법 : 새 배열 = 문자열.match();

console.log("원본 문자열 :  " + str17);
arr1 = str17.match(/귤/g);
console.log("match(/귤/g) 로 검색 : ");
console.log(arr1);

includes( )

지정한 문자열이 존재하는지 아닌지 확인, ES6에서 사용
사용법 : 변수 = 문자열.includes(문자열);

console.log("원본 문자열 :  " + str17);
let bVal = str17.includes("귤");
console.log("includes('귤')로 확인 : " + bVal ) ;
bVal = str17.includes("한라봉");
console.log("includes('한라봉')로 확인 : " + bVal );
bVal = str17.includes("귤");
console.log("indexOf('귤')로 확인 : " + index ) ;
bVal = str17.includes("한라봉");
console.log("indexOf('한라봉')로 확인 : " + index ) ;

startWith( )

지정한 문자열로 시작하면 true, 아니면 false
사용법 : 변수 = 문자열.startWith(문자열);

console.log("원본 문자열 :  " + str17);
bval = str17.startsWith("사과");
console.log("startWith('사과')로 확인 : " + bVal );
bval = str17.startsWith("바나나");
console.log("startWith(바나나')로 확인 : " + bVal );

endsWith( )

지정한 문자열로 종료하면 true, 아니면 false
사용법 : 변수 = 문자열.endWith()(문자열);

console.log("원본 문자열 :  " + str17);
bval = str17.endsWith("포도");
console.log("endsWith('포도')로 확인 : " + bVal );
bval = str17.endsWith("바나나");
console.log("endsWith(바나나')로 확인 : " + bVal );

문자열 템플릿

문자열 템플릿 : 문자열을 표현하기 위해 " ", ' '를 사용하지 않고 ` `(백틱) 을 사용할 경우 문자열 내에서 ${...} 에 변수를 사용할 수 있음

console.log("일반적인 문자열 사용");
console.log(`역따옴표를 사용한 문자열 출력`);

` ` 를 사용하여 문자열을 표현 시, "", ''를 이스케이프 문자 없이 바로 사용할 수 있음.

console.log("작은 '따옴표'를 문자열로 표시 1");
console.log('작은 \'따옴표\'를 문자열로 표시 2');
console.log('큰 "따옴표를" 문자열로 표시 1');
console.log("큰 \"따옴표\"를 문자열로 표시 2");
console.log(`역 따옴표를 사용하면 "큰 따옴표", '작은 따옴표'를 마음대로 사용`);

여러 줄 입력을 지원함.

let txt1 = "문자열을 여러줄로" +
    "입력을 하려면" +
    "      이런 식으로     " +
    "   입력하면   " +
    "됩니다.     ";

let txt2 = `문자열을 여러줄로
입력을 하려면
    이런 식으로
    입력하면
    됩니다.     `;

console.log(txt1);
console.log(txt2);

역따옴표를 사용한 문자열 내에 ${ }를 사용하면 변수가 대입되어 출력됨

let name = "홍길동";
let age = 30;
let txt3 = `나의 이름은 ${name}이고 나이는 ${age}살 입니다.`;
console.log(txt3);
txt3 = '나의 이름은 ' + name + '이고, 나이는' + age + "살 입니다.";
console.log((txt3));

let price = 1000;
let vat = 0.25;

let total = `Total : ${(price * (1 + vat)).toFixed(2)}`;
console.log(total);

console.log(`10 + 20 = ${10 + 20}`);

숫자 관련 함수

toString( )

숫자 데이터를 문자열 데이터로 변환
사용법 : 변수 = 숫자데이터.toString();

let num1 = 123;
console.log("원본 데이터 : ");
console.log(num1);
console.log("toString() 변환 : " + num1.toString());
console.log(`toString() 변환 : ${(100 + 200).toString()}`);

toExponential( )

숫자 데이터를 지수표기법으로 변환, 반올림으로 동작함
사용법 : 숫자데이터.toExponential(표시할 자리수);

let num2 = 9.654;
console.log(`원본 데이터 : ${num2}`);
console.log(`toExponential() 사용 후 : ${num2.toExponential()}`);
console.log(`toExponential(2) 사용 후 : ${num2.toExponential(2)}`);
console.log(`toExponential(4) 사용 후 : ${num2.toExponential(4)}`);

toFixed( )

소수점 자리를 지정한 크기만큼 표현, 반올림 효과
사용법 : 숫자.toFixed(소수점자리);

console.log(`원본 데이터 : ${num2}`);
console.log(`toFixed(0) 사용 : ${num2.toFixed(0)}`);
console.log(`toFixed(2) 사용 : ${num2.toFixed(2)}`);
console.log(`toFixed(4) 사용 : ${num2.toFixed(4)}`);

isNaN( )

NaN : Not a Number 의 줄임말로, 숫자가 아니라는 뜻임
지정한 데이터가 숫자인지 아닌지를 확인하는 명령어.
숫자가 아니라면 true( = 숫자가 아닌게 맞다), 숫자이면 false
사용법 : 변수 = isNaN(데이터);

const num3 = "1234";
const num4 = "12삼사";
console.log(`원본 데이터 num3 : ${num3}\tnum4 : ${num4}`);
console.log(`isNaN(num3) : ${isNaN(num3)}`);
console.log(`isNaN(num4) : ${isNaN(num4)}`);

Number( )

문자열 데이터 타입 숫자를 숫자형 데이터타입으로변환, 변환이 불가능할 경우 NaN 이라는 데이터 타입을 반환
(일반적으로 Number()을 이용하여 문자->숫자 변환)
사용법 : 변수 = Number(데이터);

// true는 1로, false는 0으로  바꿔줌
console.log(`Number(true) : ${Number(true)}`);  
console.log(`Number(false) : ${Number(false)}`);

console.log(`Number("10") : ${Number("10")}`);
console.log(`Number("   10") : ${Number("   10")}`);
console.log(`Number("10   ") : ${Number("10   ")}`);
console.log(`Number("   10   ") : ${Number("   10   ")}`);
console.log(`Number("10.33") : ${Number("10.33")}`);
console.log(`Number("10,33") : ${Number("10,33")}`);
console.log(`Number("10 33") : ${Number("10 33")}`);
console.log(`Number("javascript") : ${Number("javascript")}`);

parseInt( )

문자열 데이터 타입의 숫자를 정수로 데이터로 변환
사용법 : 변수 = parseInt(데이터);

console.log(`parseInt("-10") : ${parseInt("-10")}`);
console.log(`parseInt("-10.33") : ${parseInt("-10.33")}`);
console.log(`parseInt("10") : ${parseInt("10")}`);
console.log(`parseInt("10.33") : ${parseInt("10.33")}`);
console.log(`parseInt("10 20 30") : ${parseInt("10 20 30")}`);
console.log(`parseInt("10 year") : ${parseInt("10 year")}`);
console.log(`parseInt("year 10") : ${parseInt("year 10")}`);

parseFloat( )

문자열 데이터 타입의 숫자를 실수 데이터로 변환
사용법 : 변수 = parseFloat(데이터);

console.log(`parseFloat("10") : ${parseFloat("10")}`);
console.log(`parseFloat("10.33") : ${parseFloat("10.33")}`);
console.log(`parseFloat("10 20 30") : ${parseFloat("10 20 30")}`);
console.log(`parseFloat("10 year") : ${parseFloat("10 year")}`);
console.log(`parseFloat("year 10") : ${parseFloat("year 10")}`);

. MAX_VALUE

최대값 출력
사용법 : Number.MAX_VALUE;

console.log(`숫자 데이터의 가장 큰 수 : ${Number.MAX_VALUE}`);

. MIN_VALUE

최소값 출력
사용법 : Number.MIN_VALUE;

console.log(`숫자 데이터의 가장 작은 수 : ${Number.MIN_VALUE}`);

조건문 알아보기

자바와 동일
if 문과 if ~ else 문
피연산자 2개의 값을 비교해서 true나 false로 결과값 반환
하나의 if ~ else 문 안에 다른 if ~ else 문을 넣을 수 있다.

자바스크립트의 제어문

자바의 제어문과 동일함
if, if ~ else, else if, switch ~ case
prompt() 는 웹 페이지에서 동작하므로 웹 브라우저에서 js 파일을 로딩하여 실행해야 함

if - else 문

let userNumber = prompt("숫자를 입력하세요");

if (userNumber !== null) {
    if (userNumber % 3 == 0) {
        alert("3의 배수 입니다.");
    }
    else {
        alert("3의 배수가 아닙니다.");
    }
}
else {
    alert("입력이 취소되었습니다.");
}

else if 문

let score = prompt("점수를 입력해주세요");
score = Number(score);
if (score >= 90) {
    console.log(`점수 : ${score}\n등급 : A`);
}
else if (score >= 80) {
    console.log(`점수 : ${score}\n등급 : B`);
}
else if (score >= 70) {
    console.log(`점수 : ${score}\n등급 : C`);
}
else if (score >= 60) {
    console.log(`점수 : ${score}\n등급 : D`);
}
else {
    console.log(`점수 : ${score}\n등급 : F`);
}

switch 문

let day = new Date().getDay();  // 오늘 날짜 가지고 오기

switch (day) {
    case 0:
        console.log("일요일");
        break;
    case 1:
        console.log("월요일");
        break;
    case 2:
        console.log("화요일");
        break;
    case 3:
        console.log("수요일");
        break;
    case 4:
        console.log("목요일");
        break;
    case 5:
        console.log("금요일");
        break;
    case 6:
        console.log("토요일");
        break;
}

while 문

사용법이 java와 같음

let count = 0;

while (count < 10) {
    console.log(`count의 값 : ${count}`)
    count++;
}

월요일좋아

이전 포스트

자바스크립트 - 02

다음 포스트

자바스크립트 - 03

JavaScript

연산자 알아보기

연산자의 우선순위

객체 타입 (Object)

문자열 함수

length( )

slice( )

substring( )

substr( )

replace( )

toUpperCase( )

toLowerCase( )

concat( )

trim( )

charAt( )

split( )

indexOf( )

lastIndexOf( )

search( )

match( )

includes( )

startWith( )

endsWith( )

문자열 템플릿

숫자 관련 함수

toString( )

toExponential( )

toFixed( )

isNaN( )

Number( )

parseInt( )

parseFloat( )

. MAX_VALUE

. MIN_VALUE

조건문 알아보기

자바스크립트의 제어문

if - else 문

else if 문

switch 문

while 문

자바스크립트 - 02

자바스크립트 - 04

0개의 댓글