조건문

조건문은 프로그램의 흐름을 변경할 때 사용합니다. 조건문을 사용하면 조건에 따라 코드를 실행할 수도 있고 실행하지 않을 수도 있습니다. 이처럼 코드가 실행되는 흐름을 변경하는 것을 조건 분기라고 합니다.

if 조건문 , if else 조건문, if else if 조건문, switch 조건문, 조건부 연산자

if 조건문

자바스크립트에서 가장 일반적인 조건문은 if 조건문입니다.
불 표현식이 true면 중괄호 안의 문장을 실행합니다.

if (불 표현식) {
  true이면 실행할 문장
}

예제 (오전 & 오후 )

const date = new Date();
const hour = date.getHour();

if (hour < 12) {
  alert ('오전입니다.');
}

if (hour >=12) {
  alert ('오후입니다.');
}

if else 조건문

true와 false가 확연히 나눠지는 상황 같은 경우는 if 조건문을 두 번을 쓰기보다는 if else 조건문을 쓰는 게 편리합니다.

if (불 표현식) {
  true이면 실행할 문장
} else {
  false이면 실행할 문장
}

예제 (오전 & 오후)

const date = new Date();
const hour = date.getHour();

if (hour<12) {
  alert('오전입니다.');
} else {
  alert('오후입니다.');
}

중첩 조건문

조건문 안에 조건문을 중첩해 사용하는 것을 중첩 조건문이라고 합니다. 조건식이 여러 개로 나눠질 경우 사용하면 됩니다.

if else if 조건문

중첩 조건문처럼 조건식이 여러 개일 경우 if else if 조건문을 사용하면 됩니다.
개인적으로 중첩 조건문보다 이 조건문이 더 편리하다고 느낍니다.

if (조건식) {
  statement
} else if (조건식) {
  statement
} else {
  statement
}

예제 (정수의 구분)

const a = Number(prompt('숫자를 입력하세요.', ''))

if (a>0) {
  alert(`${a}는 양수입니다.`);
} else if (a===0) {
  alert(`${a}는 0입니다.`);
} else {
  alert(`${a}는 음수입니다.`);
}

switch 조건문

switch 조건문은 값에 따라서 조건 분기를 걸어주는 조건문입니다. 이 조건문은 앞에 봤던 조건문과 달리 불 표현식이 아니라 한 자료에 대한 조건에 대해 실행되는 조건문입니다.

switch (자료) {
  case 조건A: statement
  break
    
  case 조건B: statement
  break
    
  default: statement
  break
}

여기서 default는 생략할 수 있습니다.

이 조건문을 외울 때는 switch, 자료, case, break 이렇게 네 개의 단어로 외우면 좋지 않을까 싶네요.

예제 (짝수 & 홀수)

const input= Number(prompt('숫자를 입력하세요.',''))

switch (input%2) {
  case 0: 
    alert('짝수입니다.')
    break
  case 1: 
    alert('홀수입니다.')
    break
  default:
    alert('숫자가 아닙니다.')
    break
}

switch문을 흐름도를 통해서 살펴보면, 이때 입력한 값을 기준으로 특정 코드를 실행합니다. 만약 입력한 표현식과 case 키워드 옆의 표현식이 같다면 case 키워드 바로 다음에 오는 문장을 실행합니다.

조건부 연산자

자바스크립트에서 조건문과 비슷한 역할을 하는 연산자가 있습니다. 바로 조건부 연산자입니다.

불 표현식 ? true일 때의 결과 : false일 때의 결과

자바스크립트에서 항을 3개 갖는 연산자는 조건부 연산자가 유일해서 삼항 연산자라고 부르기도 합니다.

const input = Number(prompt('숫자를 입력하세요.', ''))

const result = (input >=0) ? '0 이상의 숫자입니다.' : '0보다 작은 숫자입니다.'
alert (result)

배열

여러 개의 자료를 저장하려면 변수를 여러 개 선언해야 하는 불편함이 있습니다. 이러한 불편함을 해결하기 위해 나온 것이 배열입니다.

배열은 여러 자료를 묶어서 활용할 수 있는 특수한 자료입니다.
배열은 대괄호([ ])를 사용하며, 그 안에는 요소가 들어가고 쉼표( , )로 구분을 합니다.

배열 = [ 요소1, 요소2, . . . ,요소n]

이제 배열을 사용하는 방법을 알아보도록 하죠.

• 배열 만들기
• 배열 접근하기
• 요소 개수 세기
• 요소 추가하기
• 요소 제거하기

속성

• Array.prototype.find() , array1.find(), array1.findIndex()

const array1 = [5, 12, 8, 15];

const found = array1.find(x => x>10); // 화살표 함수 사용
console.log(found); // 12 (주어진 함수에 맞는 요소 중에서 첫 번째 인덱스를 출력한다.)

• array1.length

• .concat() : 이어붙이기

const numbers = [1, 2, 3, 4];
const fruits= ['Apple', 'Banana'];

console.log(numbers.concat(fruits)); // [1, 2, 3, 4, 'Apple', 'Banana']
//원본 데이터 보존

• array1.forEach() : 배열 아이템의 개수만큼 특정한 콜백함수를 사용하는 목적

const fruits = ['Apple', 'Banana'];

fruits.forEach(function (element, index)); // Apple 0  Banana 1

• array1.map() : 배열 아이템의 개수만큼 특정한 콜백함수를 사용하고 반환해준다.
  (forEach와 차이점)

const fruits = ['Apple', 'Banana'];

const a = fruits.map(function (element, index));
	return {
       id: index,
       name: fruit
    } 

console.log(a);  // 0: "Apple", 1:"Banana"

• array1.filter: 조건에 맞는 값을 그대로 반환해준다.

const numbers = [1, 2, 3, 4];

const a = numbers.map(number => {
  return number < 3
});
console.log(a); //[true, true, false, false]

const b = numbers.filter(number => {
  return number < 3
});
console.log(b); //[1, 2]

• array1.includes (): 포함이 되어져있나요? (true/ false)

const numbers = [1, 2 ,3 ,4];

const a = numbers.includes(3);
console.log(a); // true

• array1.push(), array1.unshift() : 뒤에 요소 추가, 앞에 요소 추가

const numbers = [1, 2 ,3 ,4];

numbers.push(5);
console.log(numbers); // [1, 2 ,3 ,4,5]

numbers.unshift(0);
console.log(numbers); // [0, 1, 2 ,3 ,4, 5]

• array1.reverse() : 역순으로 만들기

• array1.splice(x, y), array1.splice(x, y, z) : 자르기(원본에서 삭제하기), 대체하기

배열 만들기

배열은 상수와 비슷하게 선언과 할당의 방식을 사용합니다.

const array = [273, 'String', false, {...}]
                                      
> array
(4) [273, 'String', false, {...}] // 요소의 개수와 배열이 나옵니다.

배열 접근하기

배열 안에 특정 요소를 접근하고 싶을 때, 요소의 순서인 인덱스를 사용합니다.

배열[인덱스]

const Numbers = [1997, 3, 8]

> Numbers[2]
8
> Numbers[0]
1997

인덱스는 0부터 시작하니 유의하여야 합니다.
그리고 인덱스 안에 연산을 하여도 상관없습니다. (ex. Numbers[9+9])

배열 요소 개수 세기

배열 요소 개수를 세기 위해서는 .length을 사용하면 됩니다.

배열.length

배열 요소 추가하기

배열 뒷부분에 요소를 추가할 때는 push() 메소드를 사용합니다.

배열.push(추가할 요소)

const todos = ['washing', 'studying', 'eating']
               
todos.push('exercising')

> todos
(4) ['washing', 'studying', 'eating','exercising']

배열 요소 제거하기

• 인덱스 기반으로 제거하는 경우
• 값을 기반으로 제거하는 경우

인덱스로 요소 제거

배열의 특정 인덱스에 있는 요소를 제거할 때는 splice() 메소드를 사용합니다.

배열.splice(인덱스, 제거할 요소의 개수)

값으로 요소 제거

값을 기반으로 요소를 제거할 때는 배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해서 값의 위치를 추출한 뒤에 splice() 메소드를 사용해 제거합니다.

const 인덱스 = 배열.indexOf(특정 요소)
배열.splice(인덱스, 1)