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());

 

---

콜백함수

 

어떤한 함수를 다른 함수의 인수로 전달해서 나중에 호출시키도록 하는 것

왜 '콜백'이라고 부르는 거임?

  -> 당장 실행되는게 아니라 나중에 실행되는 함수

  -> main함수의 인수(sub)로 전달이 되어서 나중에 실행하게 된다고 해서 콜백함수

// 1.콜백함수
function main(value){
    console.log(1);
    console.log(2)
    console.log(value)
}

function sub() {
    console.log("i am sub");
}

main(sub);

// 함수 표현식으로 쓰면?
main(function sub() {
    console.log("i am sub");
})

// 함수 표현식에서는 익명함수로 써도 ㄱㅊ
// 방법 1
main(function () {
    console.log("i am sub");
})

// 방법 2. 조금 더 단축
main(() => {
    console.log("i am sub");
})


// 2. 콜백함수의  활용

// ## 콜백함수 활용 X
function repeat(count) {
    for (let idx = 1; idx <= count; idx++) {
        console.log(idx);
    }
}

function repeatDouble(count) {
    for (let idx = 1; idx <= count; idx++) {
        console.log(idx * 2);
    }
}

repeat(5);
repeatDouble(5)
// => 콜백함수를 이용하면 굳이 이렇게 함수를 겹치게 사용할 필요가 없다


// ## 콜백함수 사용 O
function repeat(count, callback) {
    for (let idx = 1; idx <= count; idx++) {
        callback(idx);
    }
}

repeat(5, function (idx) {
    console.log(idx);
});

repeat(5, function (idx) {
    console.log(idx *2);
});
// 콜백함수를 이용하여 함수 활용이 다양해지고 코드가 더 간결해진다.


// 더 간단하게 표현!
repeat(5, (idx) => {
    console.log(idx);
});

repeat(5, (idx) => {
    console.log(idx *2);
});

 

 

---

 

객체1

 

// 1. 객체 생성
let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴(더 간결하기 때문에 대부분 사용)

// 2. 객체 프로퍼티 (객체 속성)
let person = {
  name: "이정한", // 객체 프로퍼티 (객체 속성)
  age: 27,
  hobby: "테니스",
  extra: {},
  10: 20,
  "like cat": true, // 띄어쓰기가 필요한 key값은 "" 사용
  // key: value 형식
  // key와 value에 타입은 자유롭게 넣을 수 있다.
};

// 3. 객체 프로퍼티를 다루는 방법
// 3.1 특정 프로퍼티에 접근
// # 방법1:점 표기법, 괄호 표기법
let name = person.name; // "이정한"
let name2 = person.name2; // 존재하지 않는 프로퍼티를 가져오게 되면 undefined가 뜸

// # 방법2: 괄호 표기법
let age = person["age"]; // 대괄호를 사용할 때는 ""를 꼭 사용
console.log(age);
// 활용(동적으로 가져와야할 때 사용)
let property = "hobby";
let hobby = person[property]; // "hobby"값인 "테니스"가 나옴
console.log(hobby);

// 3.2 새로운 프로퍼티 추가하는 방법
person.job = "fe developer"; // #방법1: 점 표기법 활용
person["favoriteFood"] = "떡볶이"; // #방법2: 괄호 표기법 활용

console.log(person);

// 3.3 프로퍼티를 수정하는 방법
person.job = "educator";
person["favoriteFood"] = "초콜릿";

console.log(person);

// 3.4 프로퍼티 삭제하는 방법
delete person.job;
delete person["favoriteFood"];
console.log(person);

// 3.5 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person; // person 객체안에 name프로퍼티가 들어 있는가 => 존재한다면, true
console.log(result1);
let result2 = "cat" in person; // 존재하지 않는다면 => false

 

 

 

객체 2

// 1. 상수 객체
const animal = {
  type: "고양이",
  name: "나비",
  color: "black",
};

// 다른 객체를 생성해서 할당하는 건 오류남..
animal = { a: 1 }; // 상수객체는 다시 바꿀 수 없음 => 고로 이건 오류남..

// 하지만, 이건 가능함
animal.age = 2; // 추가
animal.name = "까망이"; // 수정
delete animal.color; // 삭제

console.log(animal);

// 왜? 사수라는건 새로운 값을 할당하지 못하는 변수임..
// 아예 새로운 값을 할당하는 것은 문제가 되지만,..
// 저장되어 있는 값에 프로퍼티를 추가하는 방식은 문제가 안됨..

// 2. 메서드
// -> 값이 함수인 프로퍼티
const person = {
  name: "이정한",
  sayHi: function () {
    console.log("안녕");
  },

  // 익명함수
  function() {
    console.log("안녕");
  },

  // 화살표 함수
  sayHi1: () => {
    console.log("안녕");
  },

  // 메서드 선언
  sayHi1() {
    console.log("안녕");
  },
};

// 함수 호출
person.sayHi(); // 점 표기법으로 함수 호출
person["sayHi"]; // 괄호 표기법으로 함수 호출

 

 

---

 

배열

 

 

// 1. 배열 생성
let arrA = new Array(); // 방법1 : 배열 생성자
let arrB = []; // 방법2: 배열 리터럴 (더 간결하기 때문에 대부분 사용)

let arrC = [1, 2, 3, true, "hello", null, undefined, () => {}, {}, []];
console.log(arrC);
// 배열에는 타입 상관없이 넣을 수 있다.

// 2. 배열 요소 접근
let item1 = arrC[0]; // 숫자(인덱스)로 접근

arrC[0] = "hello"; // 수정
console.log(arrC);