자바스크립트 기초

서현우·2022년 11월 9일
0

JavaScript

목록 보기
11/11

1. 변수 선언

  • let - 변할 수 있는 값
  • const - 변하지 않는 값
  • Tip - 모든 변수를 const로 선언하고, 값이 변경될 변수만 let으로 변경.
let name = "Mike";
const color = "red";

변수 선언 규칙

1) 변수는 문자와 숫자, $와 _만 사용
2) 첫글자는 숫자 불가
3) 예약어 사용 불가
4) 가급적 상수는 대문자로
5) 변수명은 읽기 쉽고 이해할 수 있게 선언(카멜 케이스로)

2. 자료형

const name = `Mike`;

const message = "I'm a boy"; //리터럴에 '를 쓰고싶으면 "로 감싸기

const message2 = 'I\'m a boy'; //리터럴에 '가 있을 때 '로 감싸고 싶으면 역슬래시 사용(특수문자로 인식함)

const message3 = `My name is ${name}`; //백틱은 문자열 내부에 변수를 표현해 줄 때 사용하면 편리

3. 숫자형

const age = 30;
const PI = 3.14;

console.log(1+2); //더하기
console.log(10-3); //빼기
console.log(3*2); //곱하기
console.log(6/3); //나누기
console.log(6%4); //나머지

const x = 1/0; //0으로 나누면 무한대
const y = name/2; //문자열을 숫자로 나누면 NaN(Not a Number) - 타입에 주의

4. 논리형

const a = true;
const b = false;

const name = "Mike";
const age = 30;

console.log(name == 'Mike');
console.log(age>40);

5. null과 undefined

  • null - 존재하지 않는 값을 의미
  • undefined - 값이 할당되지 않았음을 의미
let age;
console.log(age) //undefined

let user = null; //user는 존재하지 않는다는 의미

6. typeof 연산자

  • 변수의 타입을 알 수 있음
const name = "Mike";

console.log(typeof 3); //number
console.log(typeof name); //string
console.log(typeof true); //boolean
console.log(typeof "xxx"); //string
console.log(typeof null); //object(객체형) But null은 객체 타입이 아님(JS의 오류)
console.log(typeof undefined); //undefined
const name = "Mike";

const a = "나는";
const b = " 입니다.";

console.log(a + name + b); //나는 Mike 입니다.

const age = 30;
console.log(a + age + "살"); //나는 30살

7. alert, prompt, confirm

  • alert - 알려줌
    • 메세지를 보여줌. '확인'버튼을 누르면 닫힘.
  • prompt - 입력 받음
    • 사용자에게 메세지를 보여주고 어떤 값을 입력받을 수 있는 필드를 제공.
    • 취소를 누르면 null을 반환.
    • 두번째 값을 입력하면 default값을 제공.
  • confirm - 확인 받음
    • 확인 - true 반환
    • 취소 - false 반환
  • 장단점
  1. 창이 떠 있는 동안 스크립트 일시 정지(동작에 제한)
  2. 스타일링(위치와 모양) 커스텀 불가 - 디자이너가 싫어하므로 모달창으로 많이 사용. But 빠르고 간단한 기본 메서드라는 장점.
const name = prompt("이름을 입력하세요.");
alert("환영합니다, " + name + "님");
const name = prompt("이름을 입력하세요.");
alert(`안녕하세요, ${name}님. 환영합니다.`); //이 때 입력하지않으면 console.log(name)은 null이 나옴
const name = prompt("예약일을 입력해주세요.", "2020-10-"); //두번째 값을 입력받을 default값으로 할 수 있다
const isAdult = confirm("당신은 성인 입니까?");
console.log(idAdult); //true or false

형변환

  • String() - 문자형으로 변환
  • Number() - 숫자형으로 변환
  • Boolean() - 논리형으로 변환

형변환이 필요한 이유

"100" + 200 = ??
만약 타입이 다르면 의도치 않은 동작이 발생할 수 있다

  • 아래 둘 다 자동 형변환이 된다.
    "9080" / 2 = = 4540
    "6" / "2" = 3
    의도치 않은 결과를 방지하기 위해 "명시적 형변환"이 필요!
const mathScore = prompt("수학 몇점?");
const endScore = prompt("영어 몇점?");
const result = (mathScore + engScore) / 2;
console.log(result); //예상과 다른 값 - prompt로 입력받은 값은 무조건 "문자형"!
  • String() - 문자형으로 변환
console.log(
	String(3),
	String(true),
	String(false),
	String(null),
	String(undefined)
) //전부 문자형으로 출력
  • Number()
    • 숫자형으로 변환
    • 만약 문자가 있으면 NaN 출력.
    • true는 1, false는 0 출력.
    • Number(null)은 0 출력.
    • Number(undefined)는 NaN 출력.
    • Number(0)은 false, Number('0')은 true
    • Number('')은 false, Number(' ')은 true
console.log(
	Number("1234")
)

  • Boolean - 논리형으로 변환

    • 숫자 0, 빈 문자열 "", null, undefined, NaN은 false를 반환.
    • 나머지는 true를 반환.

    8. 기본 연산자

  • 거듭제곱 **

  • 증가 연산자, 감소 연산자

    9. 비교 연산자, 조건문

  • ==는 값만 비교

  • ===는 값과 타입 둘 다 비교

  • if/else/else if는 자바와 동일. But ===과 ==을 생각해서 사용.

    10. 논리 연산자

  • &&, ||, !

  • 실행 순서를 고려해서 문장을 배치

    11. 반복문

    for(let i = 0;i<10;i++) {
 //반복할 코드
}
    let i = 0;

while(i<10) {
	console.log(i);
	i++;
 }

  • do while - 한번은 무조건 실행

  • break, continue

    12. switch

    let fruit = prompt('무슨 과일을 사고 싶나요?');

switch(fruit) {
	case '사과' :
   	console.log('100원 입니다.);
       break;
   case '수박' :
   case '멜론' :
   	console.log('500원 입니다.);
       break;
   default :
   	console.log('없는 과일입니다.');
}

    13. 함수

  • 한번에 한작업에 집중

  • 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍

    function showError() {
	alert('에러가 발생했습니다. 다시 시도해 주세요.');
}

showError();
    function sayHello(name) {
	const msg = `Hello, ${name}`;
   console.log(msg);
}

sayHello('Mike');
    function add(num1, num2) {
	return num1 + num2;
}

const result = add(2,3);
console.log(result);

    14. 함수 선언문 vs 함수 표현식

  • 함수 선언문 - 어디서든 호출 가능

  • 함수 표현식 - 코드에 도달하면 생성

  • 화살표 함수

    //함수 표현식 - 아래는 실행 X
showError();

let showError = function() {
	console.log('error');
}
    //함수 선언문 - 실행
showError();

function showError() {
	console.log('error');
}

    15. 객체

    const superman = {
	name : 'clark',
   age : 33,
}

console.log(superman.name);
console.log(superman['age']);

superman.hairColor = 'black';
superman['hobby'] = 'soccer';

delete superman.age;
console.log(superman);
    function makeObject(name, age) {
	return {
   	name : name,
       age : age,
       hobby : 'football'
   };
}

const Mike = makeObject('Mike', 30);
console.log(Mike);

console.log('age in Mike);
console.log('birthday' in Mike);
    function isAdult(user) {
	if(!('age' in user) || user.age < 20) {
   	return false;
   } 
   return true;
}

const Mike = {
	name : 'Mike';
   age : 30;
}

const Jane = {
	name : 'Jane';
};

console.log(isAdult(Jane));
    //for ... in
const Mike = {
	name : 'Mike',
   age : 30
};

for(x in Mike) {
	console.log(Mike[x]);
}
profile
서현우
안녕하세요!!
이전 포스트

JavaScript 함수 기초

0개의 댓글