javascript 변수, 자료형, 연산자, 조건문, 반복문 (2023.04.25)

🎈 변수

데이터를 저장하는 공간

자바와 달리 자바스크립트는 느슨하게 자료형을 체크한다. 

→ 자바에서는 변수명 앞에 자료형을 작성하여 변수 선언을 하지만

→ 자바스크립트에서는 자료형에 관계 없이 변수선언 키워드(let)을 사용하여 변수를 선언한다. 

 

📖 변수 선언 키워드 3가지

⚙️ var

변수 재선언 가능

변수 재할당 가능

 

⚙️ let

변수 재선언 불가능

변수 재할당 가능

let 키워드 사용하여 변수 재선언시 발생하는 오류

 

⚙️ const

변수 재선언 불가능

변수 재할당 불가능

 

const 키워드 사용하여 상수 재할당시 발생하는 오류

 

// 변수 : 데이터를 담을 공간
let num = 3;
// let -> 변수 선언 키워드
// num -> 변수 이름
//  3 -> 변수에 할당된 값

// 재선언 : 같은 변수 이름으로 다시 변수를 선언하는 것
// 재할당 : 선언된 변수에 다시 값을 할당하는 것

// var : 재선언 O, 재할당 O
var var1 = 1;
console.log('var1 최초 선언', var1);
var var1 = 2;
console.log('var1 다시 선언', var1);
var1 = 3;
console.log('var1 재할당', var1);

// let : 재선언X, 재할당 O
let let1 = 4;
console.log('let 최초 선언', let1);
// let let1 = 5;   ---> 오류발생
// console.log('let 다시 선언', let1);
let1 = 5;
console.log('let 재할당', let1);

// const : 재선언x, 재할당X
const const1 = 6;
console.log('const 최초 선언', const1);
// const const1 = 7; ----> 오류 발생
// const1 = 7;
// console.log('const 재할당', cont1); ---> 오류 발생

📖 변수 선언시 주의사항 

1. 변수명 첫 글자로는 $, _(언더바), 영문자만 올 수 있다. - 숫자로 시작할 수 없다!

2. 변수명으로는 예약어를 사용할 수 없다. 

3. 변수명을지을 때 되도록 의미를 부여해 작성하는 것이 좋다.  

 

🎈 자바스크립트의 자료형

 

 

// 1. number : 정수, 실수 등 산술연산이 가능한 자료형
let num1 = 1.234;
let num2 = 50;
console.log(num1);
console.log(num2);

// 2. string : 문자열로 이루어진 자료형
let str1 = '신지영';
let str2 = '31';
console.log(str1);
console.log(str2);

// 3. boolean : 참/거짓으로 표현되는 논리 형태의 자료형
let isFemale = true;
let isRich = false;
console.log(isFemale);
console.log(isRich);

// 4. undefined : 값이 할당된 적이 없거나 존재하지 않는 속성일 때의 유형
let val1;
console.log(val1);

// 5. null : 아무런 값을 나타내지 않을 때의 자료형
let val2 = null;
console.log(val2);

 

📖 자료형 형변환

 

let num = '3.14';
console.log(num);

// 1. 문자 -> 실수형으로 형변환 : parseFloat()
console.log('문자 → 실수 형변환', parseFloat(num));

// 2. 문자 -> 정수형으로 형변환 : parseInt()
console.log('문자 → 정수 형변환', parseInt(num));

// 3. 문자 -> 숫자형으로 형변환 : Number()
let num2 = '5'
console.log('문자 → 숫자 형변환', Number(num));
console.log('문자 → 숫자 형변환', Number(num2));

// 4. 숫자 -> 문자형으로 형변환 : String(data), data.toString()
let num3 = 100;
console.log('숫자 → 문자 형변환', String(num3));
console.log('숫자 → 문자 형변환, toString() 사용', num3.toString());

 

// 1. num1 -> '100', num2 -> 200
let num1 = '100';
let num2 = 200;
let sum = num1 + num2; // 문자열 + 숫자 ->  문자열
console.log(sum); 
sum = Number(num1) + num2;
console.log(sum);

// 2. 콘솔창에 형태에 맞춰 출력
// num1과 num2의 합 >> num1 + num2

// console.log(num1 + '과 ' + num2.toString() + '의 합 >> ' + (parseInt(num1) + num2));
console.log(num1+'과 '+num2+'의 합 >> ' + sum);

// Templete literals(템플릿 리터럴)
// : 표현식과 문자열 삽입 또는 여러줄 문자열 등 다양한 기능을 제공하는 형태
// -> 백틱(`) 기호 사용
// -> 표현식 : ${변수}
console.log(`${num1}과 ${num2}의 합 >> ${sum}`);

console.log(`안녕하세요.
반갑습니다`); // 여러줄 문자열

 

🎈 연산자

 

 

자바와 차이점

1. / : 자바에서는 몫을 의미하지만 자바스크립트에서는 실제 나눠진 값을 나타낸다. 

    예시) 100 /  3 ===> 33.33333 (자바에서는 몫인 33 출력)

2. === , == : 자바스크립트에서 ==는 자동형변환을 하여 값만 비교하지만 ===는 값과 함께 자료형도 비교해줌

 

// / 연산자 : 자바에서는 몫, 자바스크립트에서는 실제 나누기 연산 결과
console.log(100+3);
console.log(100-3);
console.log(100*3);
console.log(100/3);
console.log(100%3);

// == : 자동으로 자료형을 변환시킴, 값만 비교
// === : 값과 자료형을 함께 비교 (값과 자료형 모두 일치해야 true)
let val1 = 10;
let val2 = '10';

console.log(val1 == val2);
console.log(val1 === val2);

 

 

 

🎈 조건문 

주어진 조건을 비교, 판단하여 결과를 얻는 구문

 

// 조건문 : 주어진 조건을 비교, 판단하여 결과를 얻는 구문

// 1. 조건(삼항)연산자 : ===
let coffeeMenu = prompt('메뉴를 입력해주세요.','아메리카노');

// true / false 일 때 사용
// 비교구문 ? 참일때 : 거짓일때
coffeeMenu === '아메리카노' 
? console.log('주문하신 음료 나왔습니다.')
: console.log(`${coffeeMenu} 현재 대기시간 5분 있습니다.`);

// 조건이 하나일 때 : &&
coffeeMenu === '딸기라떼' && console.log('겨울 한정 메뉴입니다!');

// 2. if문
let num = Number(prompt('숫자를 입력해 주세요.'))
if(num > 10){
    console.log('10보다 큰 수입니다.');
}else{
    console.log('10보다 작은 수 입니다.');
}

 

🎈 반복문

어떤 조건을 만족할 때까지 같은 처리를 반복하여 실행하는 구문

 

// 반복문 : 어떤 조건을 만족할 때까지 같은 처리를 반복하여 실행하는 구문

// 1. while문
console.log('1-1. while문');
let num1 = 0;
while(num1<3){
    console.log(num1);
    num1++;
}

console.log('1-2. while문(true)');
let num2 = 3;
while(true){
    console.log(num2);
    num2++;

    if(num2===6) break;
}

// 2. do while문
console.log('2. do while문');
let num3 = 6;
do{
    console.log(num3);
    num3++;
}while(num3<9)

// ** while문 do while문 비교
let num4 = 9;
while(num4<9){
    console.log('while문', num4);
}

do{
    console.log('do while문', num4);
}while(num4<9)

// 3. for문
console.log('for문');
for(let num5 = 9 ; num5 < 12 ; num5++){
    console.log(num5);
}