자바스크립트 기본(복습)

자바스크립트는?
HTML, CSS와 더불어 웹을 개발하는 세 가지 언어 중 하나.

HTML은 요소들의 배치와 내용을 기술하는 언어

• 리스트나 제목 배치
• 색이나 크기 등의 디자인 수행X

CSS는 색 크기 애니메이션 등을 정의하는 스타일링을 위한 언어

• 요소들 크기와 애니메이션 정의가 가능하다.

Javascript는 웹사이트를 실질적으로 움직이게 하는 언어

자바스크립트는 자바스크립트 엔진이 실행한다.
엔진은 웹 브라우저(크롭, 엣지, 사파리, 오페라)에 포함되어 있다.

console.log => 괄호안의 값을 출력하는 역할

변수

let age = 25;
consoel.log(age);

-------
25

주의사항

• 변수명에는 숫자를 앞에 사용X
• 변수명에 기호 사용 X
• 변수명에 자바스크립트 키워드는 사용 X

var와 let 차이

var age =25;
console.log(age);

let age = 30;
console.log(age);

---------------
25
30


만약 
var age = 25;

var age = 30;

=> 변수 중복 허용을 하기 때문에 프로그래머에게 혼동 줄 수 있어서
	되도록 사용 X

상수

const age =30;

age = 35;

--------
에러 발생 => const는 읽기 전용이기 때문에 선언 이후 값을 바꿀 수 없다.

자료형

Primitive Type : 원시 타입 = 한번에 하나의 값만 가질 수 있다. 하나의 고정된 저장 공간만 이용이 가능하다.

Non-Primitive Type : 한번에 여러 개의 값을 가질 수 있다. 여러 개의 고정되지 않은 동적 공간을 사용할 수 있다.

String type

let name2 = "이정환";
let name3 = `winterlood ${name2}`; 백틱사용 => 변수 값을 중간에 집어넣을 수 있다. template literal이라고 부른다.
console.log(name3);

-------
winterlood 이정환

Boolean type

let isSwitchOff = false;

Null type

let a;
console.log(a);

a = null;
console.log(a);
---------
undefined
null

Undefined type

let variable;
console.log(variable);
------
undefined ( 존재하지 않는다 )

형변환

let numberA = 12;
let numberB = 2;
console.log(numberA * numberB);
----------
24

만약 
numberB = "2";
console.log(numberA * numberB);
-------
24 => 문자 2를 자동으로 숫자 2로 인식(자동 형변환) => 묵시적형변환

console.log(numberA + numberB);
-------
122 => 숫자를 문자열로 바꿔서 더해버렸음;; 

숫자로 변환해서 계산하고 싶으면?
console.log(numberA + parseInt(numberB));
-------
14 => 문자열에서 숫자로 의도적으로 변환 => 명시적형변환

연산자

let a = 1; => 대입연산자
let b = 2;

console.log(a+b); => 사칙연산자

let a = "1"
let b = "2";

console.log(a+b); => 연결연산자

let a =5;

a= a + 10;
=> a += 10; -> 복합연산자(산술연산자 + 대입연산자)

let a = 10;

a++; => a+=1 

console.log(a);
----------
11 

console.log(a++);
--------
10 => 증감연산자는 변수의 앞 뒤에 붙힐수있다. 앞에 붙히면 변화가 있고 뒤에 붙히면 변화가 없다.
===> 변수 뒤에 쓰면 라인이 끝나고 값이 올라감 앞에 붙히면 그 라인에서 바로 적용이된다. 

console.log(!true); => not true;
-----------
false

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

console.log(true || false);
-------
true

let compareA = 1 == "1"; => 자바스크립트==은 값만 비교해서 true가 나온다.
-------
true

let compareA = 1 ==="1"; => 자바스크립트 ===은 자료형까지 비교해서 false가 나온다.
------
false

보통 안전한 비교를 위하여 ===이나 !==을 사용하는 걸 추천한다. 

let compareA = 1;
compareA ="1"; 

이래도 상관이없다. => 동적타입언어

console.log(typeof compareA);
-------
string

let a;

a = a ?? 10; => null병합 연산자

console.log(a);
-----
10

조건문

let a = 3;

if(a>=5){
	console.log("5이상입니다.");
} else {
	console.log("5이하입니다.");
}
---------
5이하입니다.

let country = "ko";

switch(country){
	case 'ko':
    	console.log("한국");
        break;
    case 'cn':
    	console.log("중국");
        break;
    case 'jp':
    	console.log("일본");
        break;
    case 'uk':
    	console.log("영국");
        break;
    default:
    	console.log("미분류");
        break;
}

함수

let width1 = 10;
let height1 = 20;

let area1 = width1 * height1;
console.log(area1);

let width2 = 30;
let height2 = 15;

let area2 = width2 * height2;
console.log(area2);
------
200
450

function getArea(){
	let width = 10;
	let height = 20;
    
    let area = width * height;
    console.log(area);
}	// 함수 선언식

getArea();
console.log("함수 실행 완료");


====== 함수의 매개변수를 이용하는 방법 ===
function getArea(width, height){
	let area = width * height;
    console.log(area);
}
getArea(100,200);


====== 함수의 return 사용하는 방법 ===
function getArea(width, height){
	let area = width * height;
    return area;
}

let area1 = getArea(100,200);
console.log(area1);

함수표현식 & 화살표 함수

console.log(helloB()); => 아래에 선언한 걸 위에서 쓰는데 정상적으로 잘 수행이 된다. hoisting -> 함수선언식(helloB)으로 만든 식은 최상단으로 끌어올려진다. 

console.log(helloA()); => 함수표현식은 hoising에 해당하지 않는다. 직접적으로 선언되기 전에는 사용할 수 없다. 순서에 맞춰서 사용해야 한다. 

let helloA = function() {
	return "안녕하세요 여러분";
}; => 함수표현식

function helloB(){
	return "안녕하세요 여러분";
}; => 함수 선언식

let helloC = () =>{
	return "안녕하세요 여러분";
} => 화살표 함수 = 간결하게 만들어주는 문법



const helloTest = hello();

console.log(helloTest);


-------
안녕하세요 여러분

콜백 함수 ( 다른 함수에 매개변수로 함수를 넘겨준 것 )

function checkMood(mood, goodCallback, badCallback){
	if(mood == "good"){
    	// 기분 좋을 때 하는 동작
        goodCallback();
    } else{
    	// 기분 안 좋을 때 하는 동작
        badCallback();
    }
}
function cry(){
	console.log("Action :: CRY");
}

function sing(){
	console.log("Action :: SING");
}

function dance(){
	console.log("Action :: DANCE");
}

checkMood("sad", sing, cry);

객체

let person = new Object(); // 객체 생성법 1

let person = {}; // 객체 생성법 2 : 객체 리터럴 방식(주로 이거 씀)

person = {
	key : "value", // 프로퍼티(속성) or 객체 프로퍼티 
    key1 : "value1"
}; // 객체는 프로퍼티로 이뤄진다. 

console.log(person);
----------
{key: "value", key1 : "value1"}

console.log(person.key1);
---------
value1

const person = {
	name: "이정환",
    age : 25
};

person.name = null; -> null을 이용한 삭제를 사용하면 사용하는 메모리까지 없앨 수 있어서 추천하는 방법

console.log(`name : ${"name" in person}`); => 프로퍼티가 객체에 존재하는가?를 물어보는 식

배열

let arr = []; // 배열 리터럴
arr = [1,"2",true,null, undefined,{},[]]; // 배열안에 어떤 자료형이 들어가도 상관X
console.log(arr);

arr.push({key:"value"});//가장 마지막에 추가된다. 

console.log(arr.length); // 프로퍼티나 함수를 객체처랑 저장이 되어서 프로퍼티인 length를 꺼내오면 현재 길이 보여준다. 

반복문

for(let i=1; i<=100; i++){
	// 반복 수행할 명령
    console.log("winterlood");
}

const personKeys = Object.keys(person);
console.log(personKeys);

배열내장함수

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

const newArr = [];

const newArr1 = arr.map((elm) => {
  return elm * 2;
});
// map은 배열의 모든 요소에 접근함

let number = 3;

arr.forEach((elm) => newArr.push(elm * 2));
console.log(newArr);
console.log(newArr1);
arr.forEach((elm) => {
  if (elm === number) {
    console.log(elm);
  }
});

const colors = [
  { num: 1, color: "red" },
  { num: 2, color: "blue" },
  { num: 3, color: "black" },
  { num: 4, color: "green" }
];

console.log(arr.includes(number));
console.log(arr.indexOf(number));
// 주어진 값과 배열 안에 일치하는 값이 없으면 -1 반환

const idx = colors.findIndex((elm) => {
  return elm.color === "blue";
});

console.log(arr[idx]);

console.log(arr.slice(0,2));

console.log(arr.concat(colors));

let numbers = [0,1,3,2,7,6,10];

console.log(numbers.sort());

const compare = (a,b) =>{
  if(a>b){
    return 1; // 양수가 나오면 a가 뒤로
  }
  if (a<b){
    return -1; // 음수가 나오면 a가 앞으로
  }
  return 0;
}

numbers.sort(compare);
console.log(numbers);

const arrHi = ["이정환님","안녕하세요"];
console.log(arrHi.join(" "));