JavaScript1 (~조건문과 반복문)

1. JavaScript란 무엇인가?

JavaScript의 탄생 배경

• HTML, CSS를 프로그래밍적으로 제어할 수 있다

• 웹브라우저가 해석해서 실행할 수 있는 유일한 프로그래밍언어(였던 것. 몇년전 웹어셈블리가 새롭게 등장)

• 요즘은 브라우저가 아닌 환경에서도 자바스크립트를 실행 할 수 있게 되면서 게임 프로그래밍, 서버프로그래밍 등 다양한 분야에서 쓰이고 있다. (node.js 만만세)

• 표준 명칭 : ECMAScript

동적인 웹을 위해 자바스크립트가 할 수 있는 것들

1. 데이터를 저장하다
   1. 저장 공간 : var, let, const
   2. 저장할 값의 형태: 숫자, 문자열, 빈 값(null, undefined), boolean(true, false), 배열, 객체
   3. 코드의 뭉치: 함수

2. 값을 계산하다
   1. 사칙연산
   2. 논리연산
   3. 조건문
   4. 반복문
   5. 자료형의 내장함수

3. 결과를 반영하다
   1. DOM & BOM API

4. 다른 컴퓨터와 통신하다
   1. Ajax

2. 변수

변수선언

• var : 초기화가 필요 없고, 재할당/생략 가능 하지만 엄격모드(strict mode)에서 에러가 발생되므로 권장하지 않음
  • 유일하게 변수 호이스팅이 적용된다 (좋은거 아님!)

• let : 재할당이 가능한 변수를 선언할 때 사용

• const : 재할당이 불가능한 상수를 선언할 때 사용
  • let, const : 블록-레벨 선언, 선언된 코드블록 밖에서 접근할 수 없으며 재정의가 불가능.
  • 입력값을 받아서 변수에 저장하는 방법

  const age = prompt("나이를 입력해주세요!");

3. 함수

함수 구조

function 함수이름(parameter1, parameter2...) { // 함수의 선언
    // 실행코드...
    return 반환값
}

함수이름(argument1, argument2...) // 함수의 호출

반환값 : 반환되는 함수의 결과값

함수의 활용

• 매개변수와 전달인자

용어	번역	의미
Parameter	매개변수	함수와 메서드에 입력 변수 이름
Argument	전달인자, 인자, 인수	함수와 메서드에 실제 입력되는 값

함수 사용 이유?

1. 재사용성이 높아진다.

2. 유지보수가 용이하다.

3. 구조 파악이 용이하다.

// 필요 이상의 아규먼트를 넣었을 때
함수1(10, 20, 30, 40) // Error를 뿜지 않습니다. 60

// 필요 이하의 아규먼트를 넣었을 때
함수1(10, 20)
/*
function 함수1 (a, b, c){
    return a + b + String(c)
}
함수1(10, 20) // '30undefined'
*/

함수를 선언하는 방법

1. 함수 선언문과 함수 표현식

// 함수 선언문
function sum(x, y){
  return x + y;
}

// 함수 표현식
let sumXY = function(x, y){
  return x + y;
};
console.log(sum(10, 20));
console.log(sumXY(10, 20));

2. 람다식

• 선언시 제목을 정할수 X
  • 표현식으로 사용해야 한다.

// 읽어볼만한 문헌 : https://ko.javascript.info/arrow-functions-basics

function 함수1(x, y) {
    return x + y
}
// 위 함수를 화살표 함수로 작성하면 아래와 같습니다.
let 함수1 = (x, y) => x + y

// 만악 함수 실행시 전달하는 인자가 한 개라면 소괄호를 생략할 수 있습니다.
let 함수2 = x => x + 10

// 화살표 함수 내부에서 한 줄 표현식만 반환한다면 return 키워드를 생략해도 됩니다.
let 함수3 = x => x + 10

let 결과 = 함수3(2);

console.log(결과);

3. 즉시실행함수 (IIFE, Immediately Invoked Function Expression)

• 함수를 정의함과 동시에 즉시 실행하는 방법

• 코드를 캡슐화 하여 모듈화된 코드를 작성할 수 있다.

(function() {
  console.log('이 함수는 만들어지자마자 바로 실행됩니다!');
})();


(function() {
	document.querySelector(".btn").addEventListener("click", function(){ 
	console.log('click!')
	});
})();

4. 조건문과 반복문

조건문

1. if문

조건에 따라 실행되는 코드. 조건이 참(Truthy)인 값이나 거짓(Falsy)인 값을 반환하는지에 따라 코드 수행여부를 판단

• 연습문제

  const age = parseInt(prompt("나이를 입력해주세요!"));
  function 야너몇살이야(age) {
      if (age >= 18) {
          console.log("안녕하세요!");
      } else if (age >= 10) {
          console.log("안녕! 반가워 꼬마친구!");
      } else {
          console.log("부럽다...");
      }
  }
  
  야너몇살이야(20);

2. 삼항연산자

• if 문의 표현식
  • 코드를 실행하고, 값으로도 사용가능

조건식 ? 조건식이 참일 때 실행될 코드 : 조건식이 거짓일 때 실행될 코드

let item = true ? console.log('true') : console.log('false');
console.log(item);

const grade = parseInt(prompt("성적을 입력해주세요!"));
    let score = (grade >= 90) ? "A" : (grade >= 80) ? "B" : (grade >= 70) ? "C" : (grade >= 60) ? "D" : "강해져서 돌아와라";
    console.log(score);

3. switch문

switch (표현식) {
  case 값1:
    // 값1에 대한 실행 코드
    break;
  case 값2:
    // 값2에 대한 실행 코드
    break;
  ...
  default:
    // 모든 case에 해당하지 않을 때 실행될 코드
    break;
}

switch (new Date().getDay()) {
  case 1:
    document.write('월요일입니다.');
    break;
  case 2:
    document.write('화요일입니다.');
    break;
  case 3:
    document.write('수요일입니다.');
    break;
  case 4:
    document.write('목요일입니다.');
    break;
  case 5:
    document.write('금요일입니다.');
    break;
  default:
    document.write('금금요일입니다. 주말이 뭐죠?');
    break;
}

• case 마다 break를 써줘야 한다.
  • 써주지 않으면 결과를 구한 뒤에 switch문을 탈출하지 않고 모든 코드를 순서대로 실행시킨다.

반복문

• 단순한 작업을 여러번 반복해야 할때 사용

1. for :
   1. 초기화식 : 변수를 선언
   2. 조건식 : 실행문의 실행 여부를 판단
   3. 증감식 : 실행문 이후 변수의 증감

• 구성요소들은 모두 선택적으로 사용 (생략 가능)
  • but 조건식은 생략되면 무조건 true로 평가되기 때문에 코드를 무한히 반복
  • 식들 사이의 세미콜론( ; )은 생략 불가

for(초기화식; 조건식; 증감식) {
	실행문;
}

let text = "";
    for (let i = 1; i < 6; i++) {
        for (let j = 1; j < 10; j++) {
            text += (`${i} * ${j}  = ${i * j}<br>`);
        }
    }
    document.body.innerHTML = text;

2. while : 주어진 조건식이 참일 때 반복적으로 실행되는 반복문
   1. 조건식 : Truthy 또는 Falsy값을 반환하는 표현식

   while (조건식) {
     // 조건식이 참일 때 실행될 코드
   }

3. do-while : 조건식이 거짓이더라도 반복문이 최소한 한 번은 실행되어야 할 때 사용

   let num = 0;
   
   do {
     document.write(num, '<br>');
     num += 1;
   } while (num < 11);

break : 조건에 따른 종료 이전에 사용자의 개입으로 바로 종료

continue : 실행을 중단하고 조건문으로 돌아간다.

기타

• 주의할 용어들

  • 함수: 특정 작업을 수행하는 코드조각 (독립적)

  • 메소드(클래스 함수): 클래스, 구조체, 열거형에 포함되어 있는 함수

  • 클래스: 객체를 생성하기위한 일종의 설계도

  • 객체: 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고, 다른 것과 식별 가능한 것

  • 인스턴스: 클래스를 설계도라고 볼 때, 클래스로 만들어진 객체 하나하나를 해당 클래스의 인스턴스라고 한다
    • 현실의 객체를 소프트웨어 내에서 구현한 실체
    • 객체와 혼용해서 사용

  • 호이스팅 : JS에서 변수 및 함수 선언이 스코프의 최상단으로 끌어올려지는 동작.
    • 코드 실행전에 변수 및 함수가 메모리에 할당되어 있어 선언이 최상단에 있는 것처럼 동작
    • let, const로 선언된 변수들은 호이스팅이 일어나지 않는다.
      • 이를 이용해 함수 표현식으로 함수의 호이스팅을 방지할 수 있다.

추가 내용

• BOM (Browser Object Model) :
  • DOM과 달리 W3C의 표준모델은 아니다.
  • 자바스크립트를 통해 브라우저의 기본 기능들을 제어 가능
  • Browser 객체

  window	모든 객체가 소속된 객체이며, 브라우저 창을 의미
  document	현재 문서에 대한 정보를 갖고 있는 객체
  history	현재 브라우저가 접근했던 URL history를 제어 가능
  location	문서의 주소와 관련된 객체로 window 객체의 프로퍼티인 동시에 document의 프로퍼티이다 이 객체를 이용해 윈도우의 문서 url을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.
  screen	사용자의 디스플레이 화면에 대한 다양한 정보를 갖고있는 객체
  navigator	실행중인 애플리케이션에대한 정보를 알 수 있다. 크로스 브라우징 이슈를 해결할 때 사용

• 템플릿 리터럴 : 파이썬의 f-string처럼 문자열을 출력할 때 가운데에 변수 사용을 가능하게 해주는 방법
  • 백틱사이에 원하는 변수를 넣어 사용한다.
  • ` ${변수} `

오늘의 소감 / 떠오르는 생각