연산자(Operator)

1. 산술 연산자

`+, -, *, /, %, **`

2. 비교 연산자

`>, <, >=, <=, ==, !=, ===, !==`
===: 두 식의 값이 같고, 타입까지 같아야 함
!==: 두 식의 값이 다르고 타입까지 달라야 함

예)

3 == 3 //true
3 == '3' //true
3 === '3' // false

3. 대입 연산자

=, +=, -=, *=, /=, %=, **=

4. 증감 연산자

하나의 수를 빼거나 더할 때 사용하는 연산자
+ 변수, --변수, 변수++, 변수--

예)

let num = 10
++num // 11 num = num + 1
--num // 10 num = num - 1

num++ // 11 num = num + 1
num-- // 10 num = num - 1

let num = 10
result = ++num // num=11, result=11
result = num++ // result=11, num=12

5. 논리 연산자

&&(and), ||(or), !(not)

6. 비트 연산자

&, |, !, ^, <<, >>

7. 삼항 연산자

변수 = 조건식 ? 반환값1 : 반환값2
	조건식의 결과가 true일 때 반환값1이 변수에 저장
    조건식의 결과가 false일 때 반환값2가 변수에 저장
    

---

제어문

조건문

1. if문

if(조건식){
	조건식의 결과가 true일 때 실행할 문장;
    ...
}

2. if ~ else문

if(조건식){
	조건식의 결과가 true일 때 실행할 문장;
    ...
}else{
	조건식의 결과가 false일 때 실행할 문장;
}

3. if ~ else if문

if(조건식1){
	조건식1의 결과가 true일 때 실행할 문장;
    ...
}else if(조건식2){
	조건식2의 결과가 true일 때 실행할 문장;
    ...
}else{
	모든 조건식의 결과가 false일 때 실행할 문장;
}

✔ 문제

prompt로 나이를 입력받아 아래와 같이 결과를 출력하는 문서를 만들어보자
20살 -> 성인입니다.
15살 -> 청소년입니다
7살 -> 어린이입니다
그 외 -> 유아입니다

const age = Number(prompt('나이를 입력하세요'))

if(age > 19){
 console.log(`${age}살 성인입니다.`);
}else if(age > 14){
 console.log(`${age}살 청소년입니다.`);
}else if(age > 6){
 console.log(`${age}살 어린이입니다.`);
}else{
 console.log(`${age}살 유아입니다.`);
}

4. swich 문

swich(변수 또는 값){
	case 값1:
    	변수와  값1이 같은 경우 실행할 문장;
        ...
        break
    case 값2:
     	변수와  값2이 같은 경우 실행할 문장;
        ...
        break
    case 값3:
     	변수와  값3이 같은 경우 실행할 문장;
        ...
        break
    case 값4:
     	변수와  값4이 같은 경우 실행할 문장;
        ...
        break
    default:
    	변수와 모든 값이 다를 경우 실행할 문장;
}

✔ 문제

달(month)을 입력받아 해당 달의 마지막 일이 몇일인지 출력하는 문서를 작성해보자.

        month = prompt('달을 입력해주세요')
switch(month){
	case '1': case'3': case'5': case'7': case'8': case'10': case'12':
      month += '월의 마지막 일자는 31일 입니다.'
      break
	case '4': case'6': case'9': case'11':
      month += '월의 마지막 일자는 30일 입니다.'
      break
	case '2' :
      month += '월의 마지막 일자는 28일 입니다.'
      break

    default:
      alert('입력값을 확인하세요.')
      month = '입력값 확인'
}
console.log(month);

---

반복문

1. while문

	while(조건식){
    	조건식의 결과가 true인 동안 반복할 문장;
        ...
    }
    do{
    	조건식의 결과가 true인 동안 반복할 문장;
    }while(조건식);

✔ do ~ while문은 조건식의 결과가 처음부터 false인 경우라도 1번은 {}에 문장을 실행함

2. for문

	for(초기값; 조건식; 증감식){
    	조건식의 결과가 true인 동안 반복할 문장;
        // 짝수로 돌리고싶으면 증감식을 i = i + 2 이런식으로 사용 가능
        ...
    }

✔ for문의 무한루프

	for(;;){
        ...
    }

break 문

switch문 또는 반복중인 루프 내에서 사용하여 해당 문장을 완전히 종료시키고 다음에 위치한 실행문으로 이동

	for(let i=0; i<10; i++){
    	if(i == 5) break
    }

continue 문

반복중인 루프 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고 다음 반복문의 판단으로 넘어감

	while(num <= 10){
    	console.log(num);
        num ++
        if(num == 5) continue; // num이 5일때 반복문의 첫부분으로 돌아간다.
        ...
    }

✔ 문제

원하는 숫자를 입력받아 해당 숫자의 구구단을 출력하는 물서를 만들어보자
단 while문 for문으로 각각 줄력해보기

for문

for(let i=1;i<10;i++){
	console.log(` ${num}단 ${num} * ${i} = ${num * i}`);
}

while문

let i = 1
const num = prompt('원하는 단을 입력하세요')
console.log(`${num}단 `);
while(i < 10){
	console.log(`${num} * ${i} = ${num * i} `);
	i ++
}

---

배열(Array)

• 이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조)
• 배열을 구성하는 각각의 값을 배열요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함

배열 선언

let 배열명;

배열 초기화

배열명 = [요소1, 요소2, 요소3, 요소4..];

배열 함수로 선언

const 배열명 = Array(요소1, 요소2, 요소3...)

배열의 접근

let arr = [100, 200, 300]

console.log(arr[0]) //100
console.log(arr[1]) //200
console.log(arr[2]) //300

배열의 특징

1. 배열 요소의 타입이 고정되어 있지 않음

let arr = [1, 1.5, '김사과', true];

2. 배열 요소의 인덱스가 연속적이지 않아도 된다

let arr;
arr[0] = 1;
arr[1] = 100;
arr[4] = 10;
// [2], [3] 은 undefined

Array 객체의 메서드

push(): 배열의 요소를 추가
pop(): 배열의 마지막 인덱스 번호에 있는 값을 제거
shift(): 배열의 첫번쨰 인덱스 번호에 있는 값을 제거
concat(): 두 배열을 합침
join(): 배열 요소 사이에 원하는 문자를 삽입
reverse(): 배열을 역순으로 재배치
sort(): 배열을 오름차순으로 정렬

const arr = ['a', 'z', 'c','f','r']
arr.sort();
console.log(arr); // 오름차순
arr.reverse();
console.log(arr); // 역순 -> 내림차순

자바스크립트는 내림차순 메서드가 따로 없어 오름차순 후 reverse() 메서드를 사용해줘야 한다.

배열을 이용한 반복

1. for in 문
   변수에 배열의 인덱스 또는 객체의 key가 저장되며 반복

const arr = [10, 20, 30];
const user = {userid:'apple',neme:'김사과',age:20};

for(변수 in 배열 또는 객체){
	배열의 요소 개수 또는 객체의 프러퍼티 개수만큼 반복할 문장
    ...
}
// 예)
// 배열을 넣을 경우 인덱스가 i에 들어간다
// 객체를 넣을 경우 키가 i에 들어간다
for(let i in arr){
	... 
    
}

2. for of 문
   변수에 배열의 value 또는 객체의 value가 저장되며 반복

for(변수 of 배열 또는 객체){
	배열의 요소 개수 또는 객체의 프러퍼티 개수만큼 반복할 문장
    ...
}

// 예)
// 배열을 넣을 경우 vlaue가 i에 들어간다
// 객체를 넣을 경우 vlaue가 i에 들어간다
for(let i in arr){
	...
    
}

3. forEach 문
   배열에서만 사용 가능하며, 요소의 개수만큼 반복

배열명.forEach(fuction(변수1, 변수2, 변수3){
	배열의 요소 개수만큼 반복할 문장;
    //변수1 = el(this) 변수1:10, 20, 30
    //변수2 = 인덱스 변수2: 0, 1, 2
    //변수3 = 배열 변수3: [0, 1, 2], [0, 1, 2], [0, 1, 2]
});

✔ 예시

const userArr = [1, 'apple', '김사과', 20, '서울 서초구']
const userObj = {userid:'apple', name:'김사과', age:20}

userArr.forEach(function(el, idx, arr){
	console.log(el, idx,  arr);
});

---

사용자 정의 함수(function)

• 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
• 필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있음
• 코드를 재활용

1. 함수 선언식

// 함수선언
function 함수명(매개변수1, 매개변수2...){
	함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}
// 함수호출
함수명(값1, 값2,...);

2. 함수 표현식

const 상수명 = function(매개변수1, 매개변수2...){
	함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}

// 함수호출
함수명(값1, 값2,...);

즉시실행함수

// 즉시실행함수
(function () {
	console.log('함수를 만들고 바로 호출하기!');
})()

디폴트 매개변수

• 매개변수의 값을 설정하는 것
• 매개변수의 값을 전하지 않으면 디폴트 매개변수가 들어감

// 함수선언
function 함수명(매개변수1=값1, 매개변수2=값2...){
	함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}
// 함수호출
함수명()
함수명(값1, 값2,...);

나머지 매개변수

생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있음

function 함수명(매개변수1, ...매개변수2){
	함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}

// 함수호출
함수명(값1, 값2, 값3, 값4, 값5);
//매개변수1 <- 값1
//매개변수2 <- 값2 ~ 값5