변수
: 어떠한 정보에 이름을 붙여서 저장 시 사용
name ="mike"; (변수명 = "변수의 값" 한 줄이 끝이라는 의미)
age = 30;
변수 특징
1) 문자와 숫자, $와 _만 사용
2) 첫글자는 숫자가 될 수 없음
3) 예약어 사용 금지
4) 가급적 상수는 대문자로 알려주기
5) 변수명은읽기 쉽고 이해할 수 있게 선언
변수 접근하기
1) alert()
경고창을 띄우는 함수
2) console.log()
로그을 찍는 함수
변수 선언
1) let
변수를 다른 값으로 바꿀 수 있음
let age =30;
2) const
절대로 바꿀 수 없는 상수
ex) 파이, 최댓값, 생일
const PI = 3.14; ( 변수명은 대문자로 쓰는 게 좋음)
* 처음에 const 사용하고 나중에 바뀔 수 있는 것들은 const 사용
자료형
1 ) 문자형
// 문자형 종류
const name1 = "mike";
const name2 = 'mike';
const name3 = `mike`;
// 작음 따음표랑 큰 따음표 차이가 없음
// 중간에 '를 사용하고 싶을 때 큰따음표를 이용하거나 \' 를 사용하면 된다.
const message = "I'm a boy";
const message = 'I\'m a boy';
// 변수 이름 가지고 오기
const message3 = 'My name is $(name)';
console.log(message3);
// 값 : My name is mike
// 연산 사용할 수 있음
const message4 ='나는 $(30+1)살 입니다.';
console.log(message4);
// 값 : 나는 31살 입니다.
// 주의 $() 사용할 때""을 사용하면 $() 그대로 출력됨2) 숫자형
const age =30l // 숫자형 Number
const PI = 3.14;
console.log(1+2); // + 더하기
console.log(10-3); // - 뺄기
console.log(3*2); // * 곱하기
console.log(6/3); // / 나누기
console.log(6%4); // % 나머지
// 결과값 3 7 6 2 2
// 1 나누기 0은?
const x = 1/0;
console.log(x);
// 결과값 Infinity
// 무한대로 값을 받을 수 있음
// 문자형 나누기 숫자는?
const name = "mike";
consty = name/2;
console.log(y)
// null
// 숫자가 아니다.
const age = 30;
const name ="sjh;
const str1= "나는";
const str2= "입니다.";
console,log( str1+ age +str2);
// 결과 값:나는 30입니다. ( 숫자형은 문자형으로 변함)
console,log( str1+ name +str2);
// 결과 값: 나는 sjh 입니다.
// 참과 거짓 찾기
const a = true; // 참
const b = false; // 거짓
const name = "Mike";
const age = 30;
console.log(name == "Mike");
console.log(age>40);
// 값 true false3) null괴 underfiend
//nnull 존재하지않는 값
int user = null;
//undefiend 값이 할당되지 않음
let age;
condile.log(age)4) typeof
: 다른 개발자가 만든 타입을 알아야 할 때
: API 통신을 통해 받아온 데이터들 타입에 따라 다른 방식으로 사용할 때 사용
// 타입을 알려줌
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 객체형(null는 객체가 아님)
console.log(typeof undefined);// undefined
대화상자
- 단점: 스크립트 일시 정지
스타일링 불가능
1) alert()
메세지를 띄우고 확인 버튼을 누르기 전까지 안 없어짐
일반적으로 알리는 용도
2) prompt
사용자에게 어떤 값을 입력받을 때 사용
취소하면 null 값이 나옴
디폴트 값 입력 가능
3) confirm
확인 받을 때 사용
확인 클릭 시 true 취소 클릭 시 false
형변환(Type Conversion)
1) String()
문자형으로 변환
2) Number()
숫자형으로 변환
3) Boolean()
불린형으로 변환
false
- 숫자 0
- 빈 문자열"
- null
- underfined
- NaN
true
- false 빼고 다
// 문자형
concole.log(
String(3),
String(true),
String(false),
String(null),
String(undefined)
)
//결과값: "3" "true" "false" "null" "undefined"
// 숫자형
concole.log(
Numder(3),
Numder(3sadasd),
Numder("안녕"),
Numder(true),
Numder(false),
Numder(null),
Numder(undefined),
Numder(0),
Numder('0'),
Numder(''),
Numder(' ')
)
//결과값: 3 NaN NaN 1 0 0 NaN false true false true
//불린형
//trus
concole.log(
Boolean(1),
Boolean(123),
Boolean("javascript),
)
//결과값: true true true
//false
concole.log(
Boolean(0),
Boolean(""),
Boolean(null),
Boolean(undefined),
Boolean(NcN),
)
//결과값: false false false false false
const mathScore = prompt("수학 몇점?");
const engScore = prompt("영어 몇점?");
const recult = (mathScore + engScore) / 2 ;
console.log(result)
// 수학 90 영어 80 결과값: 4540;
// 문자형으로 인식함
// 명시적 형변환 "9080" / 2 = 4540(자동 형변환)
const mathScore = 90;
const engScore = 80;
const recult = (mathScore + engScore) / 2 ;
console.log(result)
// 결과값: 85;
const mathScore = prompt("수학 몇점?");
const engScore = prompt("영어 몇점?");
const recult = Number(mathScore + engScore) / 2 ;
console.log(result)
// 결과값: 85;
연산자(Operators)
1) + 더하기 +=
2) - 빼기 -=
3) / 나누기 /=
4) * 곱하기 *=
5) % 나머지 %=
6) ** 거듭제곱 **=
우선순위
* / > +-
증감 연산자
변수 ++;
++ 변수;
감소연산자;
변수--;
--변수;
비교 연산자
true, false
1) < 작다
2) > 크다
3) <= 작거나 같다
4) >= 큰 거나 같다
5) == 같다
6) != 같지 않다
// 동등 연산자
const a =1;
xonst b = "1";
console.log( a == b);
// 결과값 true
// 잎치연산자
const a =1;
xonst b = "1";
console.log( a === b);
// 결과값 false
조건문
: 조건에 따라 행동이 달라지게 함
1) if문
// age기 19보다 크면 환영합니다 출력
if(age > 19){
console.log("환영합니다");
}2) if else문
// age기 19보다 크면 환영합니다 작으면 안녕히가세요 출력
if(age > 19){
console.log("환영합니다");
}
else{
console.log("안녕히 가세요");
}
논리연산자
1) || (or)
- 여러 개 중 하나라도 true 면 true
즉, 모든 값이 false 일 때만 false
2) && (and)
- 모든 값이 true면 true
즉 하나라도 false면 false를 반환
3) ! (not)
- true면 false
- false면 true
반복문 loop
: 동일한 작업을 여러 번 반복
1) for
- 조건이 있을 때 반복문으로 쓰면 좋음
for( 초기값; 조건; 코드 실행 후 작업){
// 반복할 코드
}
for(let i = 0; i <10; i++){
// 반복할 코드
|
2) while
조건식이 참이면 무한 반복
변수 초기화;
while(조건){
//코드
}
let i = 0;
// i가 10보다 작으면 i는 증가
while(i<10){
i++;
}
3) do..while
조건식이 참이면 do의 코드를 실행
while랑 큰 차이점은 코드를 먼저 실행
변수 초기화
do{
//코드
i++;
}while(조건식)
ㅣlet i = 0;
do{
//코드
}
i++;
}while(i<10)
4) break
: 멈추고 빠져나옴
while(true){ // 무한 반복
let answer = confirm("계속 할까요?");
if(!answer){
break; // 빠져나옴
}
5) coutunue
: 멈추고 다음 반복으로 진행
got(let i = 0; i < 10; i++){
if(i%2){
contiue;// 참일때 코드를 나가지 않고 다시 반복
}
console.log(i);
}
6) switch
if else와 비슷하지만 케이스가 다양할 경우 간결하게 사용 가능
switch(평가){
case A:
// A일때 코드
case B:
// B일때 코드
}
//예
// 사과 : 100원
// 바나나 : 100원
// 키위 : 100원
// 멜론 : 100원
// 수박 : 100원
// 사고 싳은 과일을 뭉러보고 가격 알려주기
let fruit = prompt('무슨 과일을 사고 싶나요?"');
swutch(Fruit){
case '시괴':
console.log('100원입니다.'):
break;
case '바나나':
console.log('200원입니다.'):
break;
case '키위':
console.log('300원입니다.'):
break;
case '멜론':
console.log('400원입니다.'):
break;
case '수박':
console.log('500원입니다.'):
else:
console.log('없습니다.'):
break;
}
함수(function)
유지 보수가 쉬움
간결하다
한 번에 한 작업에 집중
읽기 쉽고 어떤 동작인지 알 수 있게 네이밍
1) showError // 에러를 보여줌
2) getName // 이름을 얻어옴
3) createUserData // 유저데이터 생성
4) checkLogin // 로드인 여부 확인
함수 선언문
: 어디서든 호출 가능
// 함수 함수명 매개변수(여러 개 일수도 있다)
function sayHello(name){
console.log('Hello, ${name}');
}
sayHello('Mike');
// 함수
function showError(){
aler('에러가 발생했습니다. 다시 시도해 주세요');
}
showError();
// 매개변수 있는 함수
function sayHello(name){
const msg ='Hello, ${name}';
condole.log(msg);
}
sayHello('mike');
// 매개변수 있는 함수, 이름이 처음 입력하는 경우
function sayHello(name){
let msg ='Hello';
if{name}{
msg += ', $(name}';
}
condole.log(msg);
}
sayHello();
sayHello('mike');
//결과값 "Hello" "Hello, mike"
// 전역 변수와 지역 변수
let name - "Mike";
function sayHello(name){
console.log(name);
}
sayHello();
sayHello('jane');
// 결과값 undefined "jane"
//OR
function sayHello(name){
let newName = name || 'firend';
console.log(msg);
}
sayHello();
sayHello('jane');
// 결과값 "Hello, friend" "Hello, jane"
// default value 기본값 설정
function sayHello(name = 'friend'){
let msg = 'Hello, ${name}';
console.log(msg);
}
sayHello();
sayHello('jane');
// 결과값 "Hello, friend" "Hello, jane"
//return 으로 값 반환
function add(num1, num2){
return num1+ num2;
}
const result = add(2,3);
console.log(result);
//결과값 5
//return 값이 없을 때는 undefied
//1)
function showError(){
alert("에러 발생");
}
const result = showError();
console.log(result);
//결과값 undefined
// 첫 번쟤 실행 후 undefined
function showError(){
alert("에러 발생");
return;
}
const result = showError();
console.log(result);
//결과값 undefined
함수 표현식
: 코드에 도달하면 생성
let sayHello = function(){
console.log('Hello');
}
sayHello();
화살표 함수(arrow function)
let add = (num1, num2) => (
return num1 + num2;
)
// return문이 한중이면 한줄로 표현 가능
let add = (num1, num2) => num1 + num2;
)
// 인수가 하나라면 가로 생략 가능
let sayHello = name => 'Hello, ${name}';
// 인수가 없으면 한 줄 안됨
let showError = () => {
alert('error!');
}// 함수 선언문
showError();
function showError(){
console.log("error");
}
// 화살표 선언문
const add =(num1, num2) => num1+num2;
객체(Object)
const superman ={
name : 'clark'; // 키(key) : 값(value)
age : 33;
}
// 접근
superman.name // 'clark
superman['ago'] //33
//추가
superman.gender = 'male';
superman['hairColor'] = 'black';
//삭제
delete superman.hairColor;
const name ='claek';
const age = 33;
// object- 단축 프로퍼티
const superman = {
name,
age,
gender:'male',
}
//프로퍼티 존재여부 확인
superman.brithDay; //undefined
'birthDay' in superman; //false
'age; in superman; //true
//for ...in 반복문
for(let key in superman){
console.log(key);
consile,log(superman[key]);
}
function makeObject(name, age){
return{
name,
age,
hobby:"football"
};
}
const mike = makeObject("mike", 30);
condole.log(mike);
condole.log('age' in mike); //true
condole.log('brithday' in mike); //false
//객체 in
function isAdult(user){
if (!(user.age < 20) || user.age < 20) {
retrun false;
}
return true;
}
const Mike ={
name:" mike",
age:30
};
const jane ={
name: "jane"
};
console.log(isAdult(mike)); //true
console.log(isAdult(jane)); //false
//객체 for ...in
const Mike ={
name:" mike",
age:30
};
for(x in mike){
console.log(mike[x]); m// mike['age'];
}
let boy= {
name:'mike';
sayHello,
}
let girl= {
name:'jane';
sayHello,
}
boy.sayHello();
girl.sayHello();
sayHello : function(){
console.log('Hello, i'm ${this.name}');
}
* 화살표 함구는 일반 함수와 달리 자신만의 this를 가지지 않음
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴
배열 (Array)
문자 뿐만 아니라 숫자, 객체, 함수 등도 포함할 수 있음
let students = ['철수' , '영희' , ... '영수'];
cosole.log(students[0]; // 철수
cosole.log(students[1]; // 영희
cosole.log(students[29]; // 영수
students[0] = '민정';
console.log(students) //['민정', '영희' ...
// length: 배열의 길이
students.length //30
// push(): 배열의 끝에 추가
let days v= ['월', '화','수'];
day.push('목')
console.log(days) // ['월', '화','수','목'];
// pop() 배열의 끝 요소 제거
let days v= ['월', '화','수'];
day.pop()
console.log(days) // ['월', '화'];
// shift,unshift 배열 앞에 제거/ 추가
// 추가
days.unshift('일');
console.log(days) // [''일', 월', '화','수','목'];
// 제거
days.shift();
console.log(days) // [ 월', '화','수'];
for 배열 사용
let days = ['월','화','수'];
for(let index = 0; index < days.length; index++){
console.log(days[index]);
}
for .. of 배열 사용
let days = ['월','화','수'];
for(let day of days){
console.log(day);
}