Javascript 기초(2) - 기본 문법 및 예시 코드 정리

1) Javascript 기본 문법

   1-1) 변수

   1-2) 데이터 타입

   1-3) 연산자

   1-4) prompt - I/O

   1-5) 조건문 - if문

   1-6) 반복문 - for문

2) 코드 실습

 

 

 

1) Javascript 기본 문법

1-1) 변수

// Javascript 변수

/*
	예약어
	var - hoisting
	let
	const
*/

var num = 1;

let num2 = 2;
num2 = 4;
// let: 재선언 불가능, 재할당 가능
// 재선언하고 나서 에러 메시지 확인하기

const num3 = 3;
// const: 재선언 불가능, 재할당 불가능
// 재선언과 재할당 시 에러 메시지 각각 확인하기

/*
	예약어로 변수명을 만들 수 없음!!(ex. const로 변수명을 할 수 없음)
*/

 

 

1-2) 데이터 타입

/*
	문자형(string)을 표현하는 방법
	1. ''
	2. ""
	3. `` >> ES6 문법
*/


const str = "Hello Javascript";

console.log(1 + 1);
console.log(str + 1);


/*
	데이터 타입
	1) 원시 타입
    	- number(숫자형)
    	- string(문자형)
    	- boolean
    	- undefined: 선언 후 암묵적으로 할당되는 값
    	- null: 의도적으로 값이 없다라는 것을 명시할 때 사용하는 값
    	- symbol: ES6에서 새로 생긴 데이터 타입

	2) 객체 타입
    	- 배열
    	- 객체
    	- 함수
    	...
*/

// 선언을 한 경우, default 값은 "undefined"이다!!(선언만 한 경우에는 변수 출력 시 "undefined"가 출력됨)
// let num;
// console.log(num);


// 하나의 변수에 여러 데이터를 넣고 싶을 경우 사용하는 것 >> 배열, 객체
let a = 10;
let b = "hello";

console.log(b + a); // hello10

let c = [10, "hello"]; // 배열
// 인덱스는 "0"부터 시작함
console.log(c);
console.log(c[0]); // 10
console.log(c[1]); // hello

console.log(c[1] + c[0]); // hello10

console.log(c.length); // length: 해당 배열의 총 요소의 개수 출력
// 배열은 기본적으로 같은 성향의 데이터를 한 곳에 모아 관리하기 용이하기 위한 목적으로 사용함!!

let d = [1, 2, 2, 3, 4, 4, 6];

console.log(d[2]);
console.log(d[5]);

console.log(d[1] + d[6]);

 

 

1-3) 연산자

 /*
	연산자: +, -, *, /, %, ==, ===, =
	단항 산술 연산자: ++, --
*/

let num4 = 5;

console.log(++num4);
console.log(++num4);
console.log(num4++);
console.log(num4++);
console.log(++num4);
console.log(num4);


/*
	비교 연산자: ==, ===, !=, !==, >, <, >=, <=
	데이터 타입: boolean
*/

/*
	논리 연산자: &&(and), ||(or)
*/

// 1 ~ 10까지의 숫자를 출력할 시 5의 배수만 'hello world!'를 찍어라!
for (let i = 1; i <= 10; i++) {
   if (i === 5 || i === 10) {
     console.log("hello world!");
   } else {
     console.log(i);
   }
 }

/*
	||(or) 연산자 둘 중 하나라도 참이면 참
	true || true   >> true
	true || false   >> true
	false || true   >> true
	false || false   >> false

	&&(and) 둘 다 참이어야지 참
	true && true   >> true
	true && false   >> false
	false && true   >> false
	false && false   >> false

	!true  >> false
	!false  >> true
*/


/*
	console.log(true || true);
	console.log(true || false);
	console.log(false || true);
	console.log(false || false);

	console.log(true && true);
	console.log(true && false);
	console.log(false && true);
	console.log(false && false);

	console.log(!true);
	console.log(!false);
*/


let a = 1;
let b = 2;
let c = 1;
let d = 1;
console.log(a === b || c === d);

 

 

1-4) prompt - I/O

prompt("값을 입력해주세요!!");
console.log("hello");
// prompt: 팝업창을 띄워서 값을 입력할 수 있도록 입력폼을 생성해 줌!!

/*
(매우 중요!!)
Input / Output
X 값을 입력 시 Y 값을 출력하겠다. >> 프로그래밍의 기초
*/

// 입력한 값에 대해 새로운 변수를 선언하여 할당한 뒤 이를 출력하는 코드
let input = prompt("값을 입력해주세요!!");
console.log(input);


// prompt 값을 2가지를 받을 예정
// 10 숫자와 20 숫자를 받을 예정

let input1 = prompt("첫번째 숫자를 입력해주세요.");
let input2 = prompt("두번째 숫자를 입력해주세요.");

console.log(input1); // 10
console.log(input2); // 20
console.log(input1 + input2); // 1020 >> 컴퓨터는 입력을 받았을 때 기본적으로 모든 입력값들을 string 형태로 인식함!!

// 형 변환(데이터 타입을 바꾸는 행위)
console.log(Number(input1) + Number(input2)); // 30
console.log(parseInt(input1) + parseInt(input2)); // 30


/*
	알고리즘 기본 로직
	1. 입력 받기(input)
	2. 로직 구현(문제해결)
	3. 출력(output)
*/

※ 컴퓨터는 입력을 받았을 때 기본적으로 모든 입력값들을 string 형태로 인식함!!

>> 따라서 "prompt"를 통해 입력받은 값들은 모두 string 데이터 타입을 가지기에 만일 숫자 연산이 필요한 경우에는

number로 형변환 후 계산해야 함!!

 

 

1-5) 조건문 - if문

/*
// 조건문 if
//  if 예약어

// 조건에는 비교 연산자를 사용하면 좋음!!
if (조건) {
  // true일 경우, 여기를 실행함
} else {
  // false일 경우, 여기를 실행함
}
*/


/*
	code block 안에서 선언된 변수
	중괄호(code block) 안에서 선언된 변수는 중괄호 안에서만 사용 가능하다!!
	지역 변수: code block 안에서 선언한 변수
	전역 변수: code block 밖에서 선언한 변수

// 아래 a가 let 예약어를 사용했음에도 불구하고 재선언된 것처럼 보이지만 지역변수와 전역변수는 저장공간을 다르게 사용하기 때문에 유효함!!
let a = 0; // 전역 변수
{
  let a = 0; // 지역 변수
}
console.log(a);

// 그래서 많이 쓰는 기법 >> 전역변수에서 선언만 한 뒤 값을 code block에서 할당한 뒤 출력함!!
let a;
{
  a = 0;
}
console.log(a);
*/


/*
	각각 숫자를 받는 input을 만듦
	입력받은 값을 a, b라는 변수에 담음
	a > b, "A가 큽니다." 텍스트 출력
	a < b, "B가 큽니다." 텍스트 출력
*/

let a = prompt("첫번째 숫자를 입력해주세요.");
let b = prompt("두번째 숫자를 입력해주세요.");

// 기존의 string 데이터 타입인 입력값을 number 타입으로 형 변환 후 각 변수에 재할당함!!
a = parseInt(a);
b = parseInt(b);

if (a > b) {
  console.log("A가 큽니다.");
} else {
  if (a < b) {
    console.log("B가 큽니다.");
  } else {
    console.log("A와 B가 같습니다.");
  }
}

// 위의 조건문을 else if 문을 사용하여 좀 더 보기 좋게 만든 코드
// string 조작
// A = 20, B = 10으로 A가 큽니다.
// A = 10, B = 20으로 B가 큽니다.
// A = 20, B = 20으로 둘이 같습니다.
if (a > b) {
  console.log("A는 " + a + ", B는 " + b + "으로 A가 큽니다.");
} else if (a < b) {
  console.log("B는 " + b + ", A는 " + a + "으로 B가 큽니다.");
} else {
  console.log("A는 " + a + ", B는 " + b + "으로 같습니다.");
}


// 형 변환을 써야 하는 이유: 자바스크립트는 타입을 별도로 지정하지 않기 때문에 추후 코드 에러 발생 시 에러 발견이 어렵다는 문제가 있기 때문임!!
let x = "10";
let y = "20";
let z = "30";
console.log(x * y + z); // '(10 * 20)' + '30' = 20030

※ code block 내부에서 선언되고 할당된 변수는 code block 영역 밖에서는 사용할 수 없는 반면,

code block 영역 밖에서 선언된 변수는 code block 내부에서 재할당이 가능하며, 해당 변수를 code block 내부에서

자유롭게 사용 가능함!!

 

 

1-6) 반복문 - for문

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// arr에 있는 변수를 하나씩 다 출력하세요.
// 0 ~ 8번째 까지의 요소를 출력하는 반복문
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}


// 구구단 출력(2단)
// for 문 내의 i 변수 역시 지역변수에 해당함!!
for (let i = 0; i < arr.length; i++) {
  console.log("2 * " + arr[i] + " = " + 2 * arr[i]);
}


// 2중 for 문
// menu와 submenu 출력
for (let i = 1; i < 5; i++) {
  console.log("menu" + i);
  for (let j = 1; j < 5; j++) {
    console.log("  submenu" + i + "-" + j);
  }
}

let arr2 = [2, 3, 4, 5, 6, 7, 8, 9];

// 구구단 출력(2단 ~ 9단)
for (let i = 0; i < arr2.length; i++) {
  console.log(arr2[i]);
  for (let j = 1; j < 10; j++) {
    console.log(arr2[i] + " * " + j + " = " + arr2[i] * j);
  }
}

// 별찍기
for (let i = 0; i < 6; i++) {
  for (let j = 0; j < i + 1; j++) {
    document.write("*");
  }
  document.write("<br>");
}

 

 

 

2) 코드 실습

// 과목 평균에 따른 학점 등급 메기기
let kor = prompt("국어 점수를 입력해주세요.");
let math = prompt("수학 점수를 입력해주세요.");
let eng = prompt("영어 점수를 입력해주세요.");
let sci = prompt("과학 점수를 입력해주세요.");

kor = Number(kor);
math = Number(math);
eng = Number(eng);
sci = Number(sci);

if ((kor + math + eng + sci) / 4 >= 90) {
  console.log("과목평균: " + (kor + math + eng + sci) / 4);
  console.log("당신의 학점은 A입니다.");
} else if ((kor + math + eng + sci) / 4 >= 80) {
  console.log("과목평균: " + (kor + math + eng + sci) / 4);
  console.log("당신의 학점은 B입니다.");
} else if ((kor + math + eng + sci) / 4 >= 70) {
  console.log("과목평균: " + (kor + math + eng + sci) / 4);
  console.log("당신의 학점은 C입니다.");
} else {
  console.log("과목평균: " + (kor + math + eng + sci) / 4);
  console.log("당신의 학점은 D입니다.");
}


// 1 ~ 100까지의 합 구하기
let i = 0;
for (let j = 1; j < 101; j++) {
  //   i = i + j;
  i += j;
}
console.log(i);


// 숫자 정렬하기(sort 메서드 사용 안하고 정렬하기)
let arr = [3, 6, 9, 3, 2, 5];
let temp;
for (let i = 0; i < arr.length; i++) {
  for (let j = i + 1; j < arr.length; j++) {
    if (arr[i] - arr[j] > 0) {
      temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }
  }
}

console.log(arr);