JS-ES6 (자바스크립트 정리 2 )

제어문

프로그램의 흐름을 제어할 수 있도록 도와주는 실행문을 말한다. 즉, 제어문을 활용하면 목적에 맞게 필요한 조작을 할 수 있다.

조건문

조건에 따라 다른 문장을 실행하는 실행문을 의미한다.

• if switch

if 문

if 문은 조건에 따라 코드 블록을 실행하거나 건너뛸 때 사용된다. if 문은 주어진 조건이 참(true)이면 블록 내의 코드를 실행하고, 거짓(false)이면 블록 내의 코드를 실행하지 않는다.

만약 조건이 참이면 if 블록 내의 코드가 실행되고, 거짓이면 else 블록 내의 코드가 실행된다. else 블록은 선택적으로 사용할 수 있다.

사용자로부터 수학 점수를 입력 받은 뒤, 점수 별로 등급을 출력하는 if문을 실행해보자

const score = prompt('수학 점수를 입력해주세요');
console.log('score :', score);

if (score >= 90) {
  console.log('등급은 A 입니다');
} else if (score >= 80) {
  console.log('등급은 B 입니다');
} else if (score >= 70) {
  console.log('등급은 C 입니다');
} else if (score >= 60) {
  console.log('등급은 D 입니다.');
} else {
  console.log('등급은 F 입니다');
}

• 먼저, if (score >= 90)로 시작하여 90 이상인 경우 '등급은 A 입니다'를 출력하고, 그렇지 않고 80 이상인 경우 '등급은 B 입니다'를 출력하고, 이어서 70 이상인 경우 '등급은 C 입니다'를 출력한다. 이러한 패턴은 60 이상인 경우 '등급은 D 입니다'와, 그 이하인 경우 '등급은 F 입니다'를 출력하는 else 블록까지 계속된다.

여기서, 잠깐!!
if문은 참일 때, 실행하고 , 거짓일 때 실행하지 않는다.
그럼, 거짓일 때는 언제일까?

거짓 같은 값

• false - 거짓
• 0 - 숫자 zero
• -0 - 음수 zero
• 0n - BigInt zero
• "" - 빈 문자열
• null - 아무런 값도 없음
• undefined - 할당 되지 않은 빈값
• NaN - 숫자가 아님

switch 문

switch문의 표현식의 값을 case절에 일치할 경우에, 해당 case와 관련된 명령문을 수행한다.

간단하게 위에서 예시를 들었던 성적 코드를 switch문으로 다시 작성해보자!
const score = prompt('수학 점수를 입력해주세요');
console.log('score :', score);

const score = prompt('수학 점수를 입력하세요');
console.log('score :', score);

const value = Math.floor(score / 10);
console.log(value);
switch (value) {
  case 10:
  case 9:
    console.log('A');
    break;
  case 8:
  case 7:
    console.log('B');
    break;
  case 6:
  case 5:
    console.log('C');
    break;
  default:
    console.log('D');
}

• const value = Math.floor(score / 10) 은 입력된 점수를 10으로 나눈 후 소수점을 버린 결과를 value 변수에 저장한다. 이렇게 하면 점수를 10으로 나눈 몫이 value 변수에 할당된다. 예를 들어, 입력된 점수가 87이라면 Math.floor(87 / 10)은 8이 된다.
• switch (value) 문은 value 변수의 값에 따라 다른 case로 분기한다. 각 case는 등급을 출력하는 console.log 문으로 구성되어 있다. 이때, case 10:과 case 9:는 모두 'A' 등급을 출력하고, case 8:과 case 7:은 모두 'B' 등급을 출력한다.
• default:는 어떤 case에도 해당하지 않을 때 실행되는 부분으로, 기본적으로 'D' 등급을 출력한다.
  --> case절의 명령문을 수행한 후 break명령문을 만나면 switch문을 종료한다.

---

for loop

for 루프는 정해진 숫자만큼 반복하려 할 때 사용한다.

for 문

for 문의 괄호는 초기화 조건식 표현식 으로 구성 되어 있다.

for (let i = 0; i < 5; i++) {
	console.log(i);
}
// [출력]
// 0
// 1 
// 2 
// 3 
// 4 

1. let i = 0 으로 초기화
2. i < 5 조건식이 만족하면
3. console.log 명령문을 수행하고
4. i++ 표현식을 수행한다.
5. 그리고 다시 2번을 반복 수행을 하다가 조건식(i < 5)이 거짓(false)이면 for문이 종료된다.

for ... in

객체(object)에 있는 키 항목들을 반복적으로 반환한다. (ES6 에서 추가됨)

const person = {
	name : '이서연', 
	age : 25,
	job : '예비 개발자'
}

for(let key in person){
	console.log(key)
}

--> person 객체의 속성명인 'name', 'age', 'job'이 순서대로 출력된다.
만약, 여기서 key 값 뿐만 아니라, value도 출력하고 싶다면?

console.log(person[key]);

를 출력해보면 된다!

for ... of

반복 가능한 배열과 같은 객체에서 반복해서 값을 하나씩 반환한다. (ES6 에서 추가됨.)

const fruits = ['사과', '배', '딸기', '수박', '참외'];
for(let item of fruits){
console.log(item)
}

--> 배열 fruits의 각 요소를 순회하며 각 요소를 출력, 순서대로 '사과', '배', '딸기', '수박', '참외'가 각 줄에 출력된다.

while

반복 횟수를 알 수 없을 때 사용할 수 있는 반복문이다.

while 문

조건문이 참(true)일 때 실행되는 반복문이다. 조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.

let count = 0;
while (count < 5) {
	console.log(count + '번째 출력');
	count++;
}

count = 0으로 초기화 한 뒤, count가 5보다 작을 때 동안 반복하는 while문을 실행한다.
루프의 각 반복에서는 현재 count 값과 '번째 출력' 문자열을 조합하여 출력하고, count 값을 1씩 증가시킨다.
따라서 루프는 count가 0부터 4까지의 값을 가질 때까지 반복한다.

do...while

조건문이 참(true)일 때 실행되는 반복문이다. 단! 최초 한번은 무조건 수행한다.

let count = 0;
do {
	console.log(count + '번째 출력');
	count++;
} while (count < 5);

do-while 루프를 사용하여 반복문을 구성하고 있다. do-while 루프는 조건을 먼저 확인하지 않고 루프 내의 코드를 먼저 실행한 다음, 반복 조건을 확인 --> 무조건 최초 한번은 수행하게 된다.

continue

for문이나 while문의 코드블럭{} 안에서 continue 문장을 만난 순간 continue문 아래에 있는 실행해야 하는 문장들을 건너 뛰고, 다음 반복을 시작한다.

break

break는 현재 진행하고 있는 제어문(for, while, switch)의 흐름을 종료한다.

---

별찍기

내맘대로 별찍기
--> 내가 생각해낸 코드 그대로 별찍기를 진행해 보았다!
1 . 정사각형

   *****
   *****
   *****
   *****
   *****
  
  
  for (let i = 0; i < 5; i++) {
    document.write('*****');
    document.write('<br>');
  }

2 . 삼각형

 *
 **
 ***
 ****
 *****


for (let i = 0; i <= 5; i++) {
document.write('*'.repeat(i));
document.write('<br>');
}

3 . 삼각형 -reverse

 *****
 ****
 ***
 **
 *
 
for (let i = 5; i >= 0; i--) {
  document.write('*'.repeat(i));
  document.write('<br>');
}

4) 삼각형2

        *
       **
      ***
     ****
    *****

  for (let i = 4; i >= 0; i--) {
    let space = ' '.repeat(i);
    let stars = '*'.repeat(5 - i);
    document.write(space + stars + '<br>');
  }
 

5. 삼각형2-reverse

*****
 ****
  ***
   **
    *

for (let i = 0; i < 5; i++) {
  let space = ' '.repeat(i);
  let stars = '*'.repeat(5 - i);
  document.write(space + stars + '<br>');
}

6. 정삼각형

        *
       ***
      *****
     ******* 
    ********* 

  for (let i = 0; i < 5; i++) {
    let space = ' '.repeat(5 - i - 1);
    let stars = '*'.repeat(2 * i + 1);
    document.write(space + stars + '<br>');
  }

7. 정삼각형-reverse

 *********
  *******
   *****
    ***
     *

  for (let i = 4; i >= 0; i--) {
    let space = ' '.repeat(5 - i - 1);
    let stars = '*'.repeat(2 * i + 1);
    document.write(space + stars + '<br>');
  }

진짜 내 멋대로 한건 아닐까 싶지만
어찌저찌 출력이 되기 때문에 .. 😂😂😂😂😂😂
다른 방법이 있으면 댓글로 알려줘라!

---

연산자

어떠한 연산을 수행하는 기호이다.

문자열 병합

문자열은 +연산자를 사용하여 병합할 수 있다.

console.log('Hello ' + 'World!'); // "Hello World!" 출력
console.log('3' + 3);     // "33" 출력
console.log('3' + 5 + 8); // "358" 출력
console.log(3 + 5 + '8'); // "88" 출력

여기서 중요한 점은. '3' + 3과 같이 문자열 + 숫자열은 숫자열이 문자열로 치환되어서 문자열 33이 출력된다는 점이다.
또한 3 + 5 + '8'을 출력할 때, 3+5을 먼저 더한 후, 8 +'8'을 수행할 때, 문자열로 치환 후 '88'이 출력된다.

산술 연산자

연산자	설명	예제
x + y	덧셈(문자열 병합에도 쓰인다.)	3 + 2 = 5
x - y	뺄셈	3 - 1 = 1
x / y	나눗셈	3 / 2 = 1.5
x * y	곱셈	3 * 2 = 6
x % y	나머지	3 % 2 = 1

증감 연산자

연산자	설명	예제
++x	전위 증가	x에 1만큼 증가 시킨 후 현재 명령문 수행
x++	후위 증가	현재 명령문 수행 후 x에 1 증가
--x	전위 감소	x에 1만큼 감소 시킨 후 현재 명령문 수행
x--	후위 감소	현재 명령문 수행 후 x에 1 감소

++x와 같이 앞에 놓이면, 먼저 증감을 하고 코드 실행,
x++와 같이 뒤에 놓이면, 코드 실행 후, 증감

비교 연산자

비교 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 논리 값을 반환한다.

연산자	설명
a > b	a가 b보다 크다.
a >= b	a가 b보다 크거나 같다.
a < b	a가 b보다 작다.
a <= b	a가 b보다 작거나 같다.
a == b	a와 b는 같다.
a === b	a와 b는 같다.(데이터 타입 까지 비교)
a != b	a와 b는 같지않다.
a !== b	a와 b는 같지않다.(데이터 타입 까지 비교)

• 첫 번째 console.log(3 == '3');는 동등 연산자(==)를 사용하여 비교하는 것이므로 형 변환을 수행한다.숫자 3과 문자열 '3'을 비교할 때 '3'이 숫자로 변환된다. 따라서 값은 같으므로 true가 출력된다.

• 두 번째 console.log(3 === '3') 는 일치 연산자(===)를 사용하여 비교하는 것이므로 형 변환 없이 값과 데이터 타입을 엄격하게 비교한다. 숫자와 문자열은 다른 데이터 타입이므로 결과적으로 false가 출력된다.

--> 실무에서는 ===를 사용해서 엄격하게 타입까지 비교하는 것을 권장한다

할당 연산자

연산자	설명
x = 3	x에 숫자 3을 할당해라.
x += y	x = x + y와 같은 표현.
x -= y	x = x - y와 같은 표현.
x *= y	x = x * y와 같은 표현.
x /= y	x = x / y와 같은 표현.

//1부터 10까지 더하는 코드
let result = 0;
for (let i = 1; i <= 10; i++) {
  result += i;
  console.log(`${i}번째 result = ${result}`);
}
console.log(result); // 결과를 한 번만 출력

• for (let i = 1; i <= 10; i++) { : i를 1에서 시작하여 10까지 반복하는 for 루프를 설정한다. 이 루프는 1부터 10까지의 숫자를 차례로 가져와서 더할 것이다.
• result += i; : 각 순회에서 현재 result에 i 값을 더하여 누적합을 업데이트한다.

---

논리 연산자

논리 연산자는 불리언(boolean) 값만 다룰 수 있으며 불리언에는 false 와 true 두 가지 값밖에 없다.
수학에서 그리고 대부분의 프로그래밍 언어에서 논리 연산자는 불리언(boolean) 값에서만 동작하며 불리언 값만 반환한다. 반면 자바스크립트의 논리 연산자는 불리언이 아닌 값도 다룰 수 있고, 놀랍게도 불리언이 아닌 값을 반환하기도 한다.

연산자	설명
x && y (AND)	피연산자가 모두 true 일 때만 그 외에는 false
x // y (OR)	피연산자중 하나라도 true 이면 true, 둘 다 false일 때만 false
!x (NOT)	NOT(!) 연산자는 피연산자를 반대로 바꾼다.

AND(&&) 연산

피연산자가 모두 true일 경우에 true를 반환하고 나머지는 false를 반환한다.

거짓 같은 값은 false로 간주된다.
null, 0, NaN, 빈 문자열(""), undefined

OR(||) 연산

피연산자중 하나라도 true이면 true를 반환하고 나머지는 false를 반환한다.

NOT(!) 연산

true이면 false, false 일 경우 true를 반환한다.

간단하게 로그인하는 로직을 짜보며, 논리 연산자에 대해서 알아보자

이러한 로그인 창이 있다. 로그인을 할 때, 이메일과 비밀번호를 입력을 받아야 하는데
1. 이메일은 @를 포함하고 있어야 한다. (빈값도 안된다)
2. 비밀번호는 8자 이상 16자 이하여야 한다.

이러한 검증 로직을 통과한 이메일가 비밀번호만 로그인이 될 수 있도록 간단하게 로직을 짜보자!

const btn = document.querySelector('#btn');
const emailEl = document.querySelector('[name = email]');
const passwordEl = document.querySelector('[name = password]');

먼저 각각의 항복을 querySelector로 가져온다.

btn.addEventListener('click', () => {
  let email = emailEl.value;
  let password = passwordEl.value;

  if (email === '' || !email.includes('@')) {
    alert('이메일을 다시 입력해주세요');
  } else if (!password) {
    alert('비밀번호를 다시 입력해주세요');
  } else if (!(password.length >= 8 && password.length <= 16)) {
    alert('비밀번호는 8~16자 사이로 입력해주세요');
  } else {
    alert('로그인 성공');
  }
});

이후, 버튼에 addEventListener를 부여해서, 클릭 이벤트를 주었다.

• 먼저, .value로 사용자가 입력한 값을 email, password로 받아온다
• 받아온 값으로 검증 로직을 시작한다.
• 먼저, email이 빈 값이거나, @을 포함하고 있지 않다면, '이메일을 다시 입력해주세요'라는 경고창을 띄운다
• 이메일을 잘 입력했다면 다음 로직을 실행한다
• !password --> password에 값이 없다면, '비밀번호를 다시 입력해주세요' 경고창을 띄우고,
• 이메일의 값이 있다면, 다음 로직을 실행한다.
• 이메일 값이 8자 이상이거나, 16자 이하가 아니라면, '비밀번호는 8~ 16자 사이로 입력해주세요' 라는 경고창을 띄운다.
• 만약 이 로직들을 모두 통과한다면 (true)라면, 로그인 성공 alert창을 띄운다!

단축 평가

AND(&&) 연산은 피연산자 중 하나라도 false 이면, 나머지 피연산자는 평가할 필요도 없이 false이다. 마찬가지로 OR(||) 연산은 피연산자 중 하나라도 true 이면, 나머지 피연산자를 평가 할 필요도 없이 true이다.

즉, A && B 가 있을 때, A가 false라면, B는 실행하지 않고 바로 false가 출력된다.
만약, A의 로직이 길어진다면, 또는 복잡하다면, 실행하는데 시간이 오래 걸리지 않을 까?

고로, 앞에에는 뒤보다 비교적 간단한 연산자를 작성하면, 실행 시간을 줄일 수 있다!

삼향 연산자

조건식 ? 값1 : 값2 조건식이 true 이면 값1을 반환하고, false 이면 값2를 반환한다.

일반 if문을 사용해보면,

const number = 10;

if (number % 2 === 0) {
  console.log('짝수 입니다');
} else {
  console.log('홀수 입니다');
}

이렇게 작성할 수 있지만, 삼향 연산자로 작성하면 한 줄로 깔끔하게 작성할 수 있다.

const number = 10;
const message = number % 2 === 0 ? '짝수 입니다' : '홀수 입니다';
console.log(message);

if , else 문을 사용해서 4줄에 걸쳐서 작성한 코드를 한 줄에 작성할 수 있다.
number % 2 === 0 이 참이라면? '짝수 입니다'를 출력하고 아니라면, '홀수 입니다' 를 출력해~ 라는 의미이다.