사수님 추천강좌. 추천받은날 바로 시작!
기초 강좌지만 들어보니 새로 알게된게 많다고 추천해주셨다. 나도 기초부터 탄탄히 조진다.

영상의 목차를 기반으로 듣다 궁금한것들 찾아가며 정리해본다.

자바스크립트 기초 강좌 : 100분 완성

1.변수 선언방식 (var / let / const)

name = "jaehoon";
age = 25;

자바스크립트에서 변수는 선언 예약어 없이도 사용 가능하긴 하다.

변수 선언 예약어 var, let, const의 차이를 알아보자

var

var name = "jaehoon";
console.log(name);    // jaehoon

var name = "kimjaehoon";
console.log(name);    // kimjaehoon

var 로 선언한 변수는 유연한 변수로 재선언이 가능하다. 간단한 테스트를 하기에는 좋을 수 있어도 코드가 복잡해지면 어떻게 사용되는지 파악하기 힘들고 의도치 않게 값이 바뀔 우려가 있다.

let

let name = "jaehoon";
console.log(name);    // jaehoon

let name = "kimjaehoon";
console.log(name);    // Uncaught SyntaxError: Identifier 'name' has already been declared

name = "kimjaehoon";
console.log(name);    // kimjaehoon;

let 으로 선언한 변수는 재선언 되지 않지만 재할당이 가능하다.

const

const name = "jaehoon";
console.log(name);    // jaehoon

const name = "kimjaehoon";
console.log(name);    // Uncaught SyntaxError: Identifier 'name' has already been declared

name = "kimjaehoon";
console.log(name);    // Uncaught TypeError: Assignment to constant variable.

const 로 선언한 변수는 재선언과 재할당 모두 불가능하다. 따라서 절대 바뀌지 않는 상수, 수정하지 않을 값을 선언할 때 사용한다. 변수명은 대문자로 작성하여 다른 변수들과 구분할 수 있도록 하는것이 좋다. (다른 개발자들에게 상수라는것을 알릴 수 있다.)

✨tip

→ 변수를 선언할 때 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언

→ 처음에 모든 변수를 const로 선언하고 변할 여지가 있는 변수만 let으로 바꾸면 편함.

2. 자료형

문자형

const name = 'jaehoon';    // jaehoon

const message1 = "I'm 25 years old";    // I'm 25 years old
const message2 = 'I\'m 25 years old';    // I'm 25 years old
const message3 = `${name} is ${20+5} years old`;    // jaehoon is 25 years old

문자형 변수에는 작은따옴표, 큰따옴표, 백틱을 사용한다.

작은따옴표가 변수에 담을 문자열 안에 들어갈경우 큰따옴표로 감싼다.(반대의 경우도 동일)

백틱을 사용할경우 ${} 로 감싸 변수를 가져오거나 연산식을 사용할 수 있다.

숫자형

const age = 25;
const PI = 3.14;

숫자형 변수는 따옴표로 감싸지 않아도 되며 소수도 담을 수 있다.

// 숫자를 0으로 나누면? 
const x = 25/0;
console.log(x);    // Infinity

// 문자를 숫자로 나누면?
const name ="jaehoon";
const y = name/2;
console.log(y);    // NaN : Not a Number. 숫자가 아니다.

boolean

논리적인 요소를 나타내며 true,false 두가지가 있음.

const a = true;
const b = false;

const name = "jaehoon";
const age = 25;

console.log(name == "jaehoon");    // true
console.log(age < 20);    // false

null 과 undefined

null 은 값이 존재하지 않는것을 의미하고 undefined 는 값이 할당되지 않았음을 존재한다.

let name;
let age = null;

console.log(name);    // undefined
console.log(age);    // null

typeof 연산자

typeof 연산자를 사용해 변수의 자료형을 확인할 수 있다.

변수를 선언한 개발자가 사용할 일은 없지만 다른 개발자가 작성한 변수의 타입을 알아야 할 때, api통신 등을 통해 받아온 데이터를 타입에 따라 달리 사용해야할때 편리하다.

console.log(typeof 3);    // "number"
console.log(typeof name);    // "string"
console.log(typeof true);    // "boolean"
console.log(typeof "aaa");    //"string"
console.log(typeof null);    //"object"
console.log(typeof undefined);    //"undefined"

✨tip

• 문자열에 변수명을 넣어 사용할 때 백틱이 아닌 일반 따옴표를 사용하면 문자 그대로 출력되니 주의할것.
• string 타입 변수끼리 더하면 문자열끼리 연결되어 출력됨.
• string 타입과 number 타입끼리 더하기 연산을 하면 숫자형이 문자형으로 변환됨.

3. alert, prompt, confirm

alert()

함수가 실행되면 메세지를 띄워 알려줌. 사용자가 alert 창을 끌때까지 유지됨.

prompt()

사용자에게 값을 입력받을때 사용됨.

const name = prompt("이름을 입력하세요.");
alert("환영합니다,"+name+"님");
alert(`환영합니다 ${name} 님`);

prompt 안의 메세지와 함께 입력란이 뜨고, 입력한 값이 name에 들어감.

취소를 누르면 null값을 받는다.

prompt()의 default값

const date = prompt("오늘 날짜를 입력하세요","2021-11-")

prompt 함수는 인자를 두개 줘서 default 값을 입력할 수 있다.

첫번째 인자는 안내문으로 출력되고, 두번째 인자는 입력칸 안에 기본값으로 들어간다.

confirm()

confirm()은 사용자에게 받은 true, false 값을 입력받는다. 이 결과값을 사용해 이후 작업을 진행할 수 있다.

const isAdult = confirm("당신은 성인입니까?");
console.log(isAdult);

삭제하시겠습니까? 결제하시겠습니까? 처럼 사용자의 의사를 확인할때 사용할 수 있다.

단점

1. 스크립트 일시 정지
2. 스타일링 불가능. 디자인이나 위치 설정을 할 수 없음.

4. 형변환

1. String() : 문자형으로 변환
2. Number() : 숫자형으로 변환
3. Boolean() : 불린형으로 변환

연산을 할 때 자료형이 다르면 의도치않은 결과가 발생할 수 있기때문에 형변환이 필요하다.

const math = prompt("수학 몇점?");  //90
const eng = prompt("영어 몇점?");  //80
const result = (math + eng)/2  //4540

prompt()로 입력받은 값은 문자열이다. 따라서 문자열 + 연산을 하여 두 값을 더하면 9080이 된다.

문자열 / 2 를 했을때 나누기 연산이 된것은 9080이 자동형변환으로 숫자형이 되었기 때문이다.

자동형변환은 편리하지만 의도치 않은 결과를 얻게될 수 있으므로 명시적 형변환을 해주는것이 좋다.

String()

괄호 안의 내용을 문자형으로 변환한다.

Number()

Number(1234)   // 1234
Number(qwrwef)   //NaN
Number(true)   //1
Number(false)  // 0
**Number(null)  // 0
Number(undefined)  //NaN**

숫자가 아닌 문자열을 Number()로 형변환하면 NaN이 나온다.

boolean형은 예외적으로 1,0이 나온다. (true : 1 / false : 0)

Boolean()

boolean 형의 변환은 false일 경우만 기억하면 된다.

• 숫자 0
• 빈 문자열
• null
• undefined
• Nan

위 다섯가지 경우 false로 변환된다. 이외의 경우는 모두 true로 변환된다.

✨tip

prompt()로 사용자의 나이를 입력받는다.
→ 취소를 누르면 null 값을 받는다.
→ Number(null) 값은 0 이 된다.

✨tip

Boolean(0) // false
Boolean("0") // true
Boolean("") // false
Boolean(" ") // true

5. 연산자

거듭제곱 **

const num = 2 ** 3;
console.log(num);  // 8

줄여쓰기

let num = 10;

num += 5;
num -= 5;
num *= 5;
num /= 5;
num %= 5;  

증가연산자, 감소연산자

let num = 10;
let result1 = num++;   // 10 : 증가시키기 전의 값을 result에 넣음
let result2 = ++num;   // 11 : 증가시킨 값을 result에 넣음
let result3 = num--;   // 10
let result4 = --num;   // 9

비교연산자

비교연산자의 결과값은 항상 boolean 형이다.

> < >= <= == !=

일치연산자 ===

비교 대상의 자료형까지 비교할 수 있다.

비교연산자 == 를 사용해 타입이 다른 값을 비교하면 이상한 값이 나올때가 있다.

이런 경우 일치연산자 === 를 사용하면 자료형까지 비교할 수 있다.

const a = 1;
const b = '1';

console.log(a == b);   // true
console.log(a === b);  // false

논리연산자

OR ||

• 조건 중 하나만 충족하면 true
• 여러 조건이 있을 때 첫번째 true를 발견하면 평가를 멈춤.

AND &&

• 두 조건 모두 충족해야 true
• 여러 조건 중 첫번째 false를 발견하면 평가를 멈춤.

NOT !

!a

a가 false 면 true

a가 true 면 false

비교연산자 우선순위

AND > OR

const gender = 'F';
const name = " Jane";
const isAdult = true;

if(gender === 'M' && name === 'Mike' || isAdult){  //아래와 같은 코드
//if((gender === 'M' && name === 'Mike') || isAdult){
	console.log("통과");
} else {
	console.log("저리가주세요");
}

6. 반복문

do.. while

let i = 0;

do{
	//code
	i++
} while ( i<10)

code를 실행한 뒤 조건을 확인한다. while문과 비슷하지만 적어도 한번 코드를 실행한다.

break, continue

break : 멈추고 빠져나옴

while(true){
	let answer = confirm("계속 할까요?);
	if(!answer){
		break;
	}
}

if()문 안의 조건이 true일때 == confirm 창에서 아니요를 눌렀을 때, break;로 반복문 wile()을 빠져나온다.

continue : 멈추고 다음 반복으로 진행

for(let i = 0; i < 10; i++){
	if(i%2){ 
		continue;
	}
console.log(i);
}

if() 안의 값이 true이면 == i%2 가 1이면, continue; 를 만나 이후 코드를 진행하지 않고 다음 반복을 진행한다.