JavaScript

 

변수와 상수

// 1. 변수
//  반드시 초기화해야하는 것은 아님..
let age = 27;
console.log(age);

age = 30;
console.log(age);


// 2. 상수
// 한 번 선언되면 값을 바꿀 수 없기 때문에, 선언과 동시에 초기 값을 할당해야 한다.
// 반드시 초기화가 되어야 함..
// 
const birth = "1996.01.01";


// 3. 변수 명명규칙(네이밍 규칙)
// 3-1. $,_ 제외한 기호는 사용할 수 없다.
let $_name;

// 3-2. 변수의 이름은 숫자로 시작할 수 없다.
let name1;
let _2name;

// 3-3. 예약어를 사용할 수 없다.
// 자바스크립트가 이미 쓰고 있는 것.
// let let

// 4. 변수 명명 가이드
let a = 1; // 이런건 좋지 않다.
let b = 1;
let c = a - b;
// 누가봐도 알 수 있는 변수명으로 명명으로 하는 것이 좋다.

 

---

 

자료형(Type) = 집합

동일한 속성이나 특징을 가진 원소들을 묶은 것

 

 

// 1. Numbe Type
let num1 = 27;
let num2 = 1.5;
let num3 = -20;

let inf = Infinity; // 양의 무한값
let mInf = -Infinity; // 음의 무한값 

let nan = NaN; // 불가능한 값

console.log(1 * "hello"); // Nan이 나옴

// 2. String Type
let myName = "ddd";
let myLoncation = "위치";
let introduce = myName + myLoncation;

let introduceText = `${myName}은 ${myLoncation}에 거주합니다.`;
console.log(introduceText);
// 이런걸 템플릿 리터럴 문법이라고 부른다.

// 3. Boolean Type
let isSwitchOn = true;

// 4. Null Type (아무것도 없다)
let empty = null;

// 5. Undefined Type
// 어떠한 값도 넣지 않았을 때
let none;
console.log(none);

// null vs. undefined Type
// null은 의도적으로 빈값을 넣을 때
// undefied는 진짜 값이 없을 때

 

 

 

---

 

 

 

 

 

// 1. 묵시적 형변환
// 자바스크립트 엔진이 알아서 형변환
let num = 10;
let str = "20";

const result = num + str;
// console.log(result); // "1020" 문자열로 형변환


// 2. 명시적 형병환
// 프로그래머 내장 함수 등을 이용해서 직접 형 변환을 명시

// 문자열 -> 숫자
let str1 = "10";
let strToNum = Number(str1);

let str2 = "10개";
let strToNum2_1 = Number(str2)
let strToNum2_2 = parseInt(str2); // 문자열 포함된 숫자를 숫자로 형변환 할 때..숫자가 앞으로 나와있는 값이 앞에 있는게 좋음
console.log(strToNum2_1);
console.log(strToNum2_2);


// 숫자 -> 문자
let num1 = 20;
let numToStr1 = String(num1);

console.log(numToStr1 + "입니다");

 

 

---

연산자

// 1. 대입 연산자
let var1 = 1;

// 2. 산술 연산자
let num1 = 3 + 2;

// 3. 복합 대입 연산자
// 복합 = 대입 + 산술
let num7 = 10;
num7 += 20;
num7 -= 20;
num7 *= 20;
num7 /= 20;
num7 %= 20;

// 4. 증감 연산자
let num8 = 10;
++num8;
num8++;

console.log(--num8); // 전위 연산 : 이 연산 전에 수행됨..그래서 결과값이 바로 적용되어서 보임
console.log(num8--); // 후위 연산 : 이 연산이 끝나고 나서 수행됨..그래서 결과값이 다음에 적용 됨
console.log(num8);

// 5. 논리 연산자
let or = true || false;
let and = true && false;
let not = !true;

console.log(or, and, not);


// 6. 비교 연산자
let comp1 = 1 === 2; // === 는 타입까지 비교함.. ==는 타입은 비교안함
let comp2 = 1 !== 2;
console.log(comp1, comp2);

let comp3 = 2 > 1;
let comp4 = 2 >= 1;

 

// 1. null 병합 연산자
// -> 존재하는 값을 추려내는 기능
// -> null, undefined가 아닌 값을 찾아낸는 연산자

let var1;
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2; // var2
let var5 = var1 ?? var3; // var3
let var6 = var3 ?? var2; // var3, 값이 둘다 있는 경우는 먼저 앞에 있는 값을 줌..


let userName = "유저이름";
let userNickName = '닉네임'
// 상황1. 유저네임이 없는 경우에 닉네임으로 저장
let displayName = userName ?? userNickName;


// 2. typeof 연산자
// -> 값의 타입을 문자열로 반환하는 기능을 하는 연산자

let var7 = 1;
var7 = "hello";

let t1 = typeof var7;
console.log(t1);


// 3. 삼항 연산자
// -> 항을 3개 사용하는 연산자
// -> 조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환
let var8 = 10;

// 요구사항 : 변수 res에 var8의 값이 짝수 -> 짝수 ->"짝", 홀수 -> "홀"
let res = var8 % 2 === 0 ? "짝수" : "홀수";
console.log(res);

 

---

 

// 1. if 조건문 (if문)
let num  = 10;

if (num >=10) {
    console.log("num은 10이상합니다.")
    console.log("조건이 참입니다.")
}
else if (num >= 3) {
    console.log("조건이 3이상 입니다.")
}
else {
    console.log("조건이 거짓입니다.")
}


// 2. Switch 문
// -> if문과 기능 자체는 동일
// -> 다수의 조건을 처리할 때 if보다 더 직관적이다.
switch (animal) {
    case "cat": {
        console.log("고양이");
        break;
    }
    case "dog" : {
        console.log("개");
        break;
    }
    case "bare" : {
        console.log("곰");
        break;
    }
    default: {
        console.log("그런 동물은 모릅니다.")
    }
}

 

 

---

 

반복문

 

for (초기식 ; 조건식; 증감식) {
    console.log("반복");
}

 

for (let idx = 1; idx <=10; idx++) {
    console.log(idx);
    
    // {조건식 바꾸는거 말고) 5이상이면 for문 나가고 싶을 때
    if (idx >=5) {
        break;
    }
}

 

 

---

 

함수

 

 

// 함수
function getArea(width, height) {
    function another() { // 중첩함수도 가능함
        console.log("another");
    }

    another();
    let area = width + height;

    return area;
    console.log("여긴 안나옴") // return에서 끝나기 때문에 여기는 안나온다..
}

let area1 = getArea(10, 20);
let area2 = agetArea(20, 30);

// 호이스팅 -> 끌어올리다라는 뜻
// 호출되는 곳보다 선언이 뒤에 있어도 '호이스팅'되기 때문에 상관없음..

 

 

---

 

함수 표현식과 화살표 함수

// 1. 함수 표현식
function funcA() {
    console.log("funcA")
}

let varA = funcA; // 함수를 변수에 담을 수 있음
varA() // 그럼 이렇게 변수를 함수처럼 부를 수 있음

//--------------------------------------------------

// # 간단하게, 변수를 선언하면서 함수를 바로 담아버릴 수도 있음
let varB = function funcB() {
    console.log("funcB")
}

varB();
// funcB(); // 이런 함수는 함수처럼 불러서 사용할 수 없기 때문에 -> 함수명(funcB)이 없어도 됨(익명함수)

//---------------------------------------------------

// # 함수 표현식으로 만들 함수들은 값으로써 취급이 되기 때문에 '호이스팅'이 되지 않는다.
varB_2() // 이건 안불러와 짐..


// # 익명함수 예시
let varB_2 = function () { // 익명함수
    console.log("funcB")
}


// 2. 화살표 함수
let varC = (value) => {
    console.log(value);
    return value + 1;
};

console.log(varC());

 

---

콜백함수