[JS] 기본적인 개념 1

/코딩앙마님의 "자바스크립트 기초 강좌: 100분 완성" 듣는 중//

 

 

​

냅다 강의 듣고, 만드는 것부터 해서 놓친 것 있을 까봐 정리 중

아니나 다를까 많이 놓침..ㅎ

---

[변수]

• let, const => 일단, 다 const로 만들고, 필요하면 let으로 변경해서 사용.
• let: 변경 가능하며, 바꿀 땐 아래는 let 생략.

let grade = "F";
grade = "A";

 

• const: 변경 x. const 임을 알려주고자 대문자와 _사용해서 변수 명 생성.
• 문자, 숫자, $,_만 사용
• 첫글자는 숫자 x, 예약어 x, 가급적 상수는 대문자로 알려줄 것, 변수명은 읽고 이해하기 쉽게 선언

​

​

[자료형] => typeof 로 확인 가능

​

<문자형 string>

• "",'', ``
• 문자 중간에 "I'am a boy" 같이 '써야 하면 ""로 감싸면 됌. 2개가 큰 차이가 없음
• 아니면, 'I\'am a boy' --> 역슬래시 넣으면 특수문자로 인식함.
• `My name is ${name}` --> 문자열 안에 변수를 넣을 때 사용
• `My age is ${20+9}` --> 표현식을 바로 넣을 수도 있음.

​

<숫자형 number>

• +, -, *, / , %(나머지)
• 이상한 짓 하면 NaN(Not a Number) 뜸. 확인하면서 할 것.

​

<논리자료형 boolean>

• true, false

​

<null, undefined>

• null: 존재하지 않는 값 => typeof로는 object(객체형)로 뜸
• -> but, 객체가 아닌데, 초기 버전의 오류임. 이미 너무 배포되서 초기 버전 수정 x
• undefined: 할당되지 않은 값

​

=> 숫자와 문자형을 더 할 수도 있는데 그러면 숫자가 string으로 바뀌는 것을 염두할 것.

​

​

[alert, prompt, confirm]

• alert() : 상호작용 보다는 알려주는 용도. 확인 누르면 닫힘
• prompt(): 입력 받음. 입력 필드에 디폴트 값도 넣을 수 있음.

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


const name = prompt("예약일을 입력해주세요.", "2020-10-")
//(위에 메세지, 디폴트 값)

 

• confirm(): 확인 받음. alert은 확인만 있지만, confirm은 취소와 확인이 둘 다 있음

const isAdult = confirm("결제 하시겠습니까?")
// 취소는 false, 확인은 true로 뜸

 

=> 단점: 스크립트 일시 정지, 스타일링 x, 브라우저마다 모양이 다름. 디자이너가 싫어해서 만들어서 쓰는 modal 창도 사용.

​

​

[형변환 Type Conversion]

​

• 다른 자료형끼리 합하면 문제가 발생할 수 있기 때문에 형변환이 필요

• String()

const mathScore = prompt("수학 몇 점?"); // prompt 출력값이 무조건 string
const engScore = prompt("영어 몇 점?");
const result = (mathScore + engScore) / 2; //단순히 두 값을 붙여서 / 2

console.log(result);

• 숫자 계산은 문자형도 숫자형으로 바꿔서 계산 함 => 자동 형변환; Number("3" + "2"); // 5
• 문제가 생길 수 있게 명시적 형변환으로 의도를 갖고 바꿔줄 것.

• Number()

Number(2344 + "dad") // NaN 문자들어가면 안됌. 

Number(true) // 1
Number(false) // 0

• Boolean()
• 0, '', null, undefined, NaN => false
• 이외는 true
• 주의 사항 외울 것

Number(null) // 0
Number(undefined) // NaN

Boolean(0) //false
Boolean('0') // true
Boolean('') // false
Boolean(' ') // true

 

[기본 연산자]

​

<나머지 % 용도>

• 홀짝 구분 가능: x % 2= 1 (홀), y % 2 =0 (짝)
• 최대 값 지정: x % 5 = 0 ~4 사이의 값만 반환

​

<거듭제곱>

• ** : 2**3 // 8

• 우선 순위: *, / > +, - --> 괄호 쓸 것

​

<연산자 줄여서 쓰는 법>

let num = 10;
// num = num + 5;
num += 5; //이전 값의 5를 계속 더하는 것 의미 (사칙연산 다 가능함)

 

<증가, 감소 연산자>

let num = 10;
num++ ; // 11
num-- ; // 9

let result = ++num // 앞에다가 넣어야 증가 또는 감소함.

 

[비교 연산자]

• <, >, <=, >=, ==, !=
• = 하나는 변수를 넣어 줄 때 쓰기 때문에 같은 가 여부는 == 2개 써줌.
• != 다르다는 뜻으로 반환자는 // true of false
• == : 동등 연산자; 간혹 이상하게 반응할 때 있음.
• so, === : 일치 연산자; 3개 쓰면 type 까지 비교하니깐, 이걸 사용할 것.

const a = 1;
const b = "1";

a==b; // true
a===b; // false