섹션2. JavaScript 기본

# 1.5 자료형 

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

let inf = Infinity;
let mInf = -Infinity;

let nan = NaN;

// 2. String Type
let myName = "이정환";
let myLocation = "목동";
let introduce = myName + myLocation;

let introduceText = `${myName}은 ${myLocation}에 거주합니다`; // 백틱

// 3. Boolean Type
let isSwitchOn = true;
let isEmpty = false;

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

// 5. Undefined Type
let none;
console.log(none);

 

 

# 1.6 형변환

 

// 1. 묵시적 형 변환
// -> 자바스크립트 엔진이 알아서 형 변환 하는것

let num = 10;
let str = "20";

const result = num + str; // String으로 변환됨.

// 2. 명시적 형 변환
// -> 프로그래머 내장함수 등을 이용해서 직접 형 변환을 명시
// -> 문자열 -> 숫자
let str1 = "10";
let strToNum1 = Number(str1);

let str2 = "10개";
let strToNum2 = parseInt(str2); // 결과: 10 (문자가 앞에있으면 변환오류)

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

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

 

# 1.7 연산자 1

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

// 2. 산술 연산자
let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;

let num6 = (1 + 2) * 10;

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

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

// 5. 논리 연산자
let or = true || false; // 결과 : true

let and = true && false; // 결과 : false

let not = !true; // 결과 : false

// 6. 비교 연산자
let comp1 = 1 === "1"; // 결과 : false (==는 값만 비교, ===는 자료형까지도 비교 (권장))
let comp2 = 1 !== 2; // 결과 : true

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

let comp5 = 2 >= 2;
let comp6 = 2 <= 2;

 

# 1.8 연산자 2

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

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

let var4 = var1 ?? var2; // 결과: 10 (null, undefined가 아닌 값을 찾아내는 연산자)
let var5 = var1 ?? var3; // 결과: 20
let var6 = var3 ?? var2; // 결과: 20 (둘다 아닌경우 앞의 값 출력)

let userName;
let userNickName = "Winterlood";

let displayName = userName ?? userNickName; // 결과 : Winterlood

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

let var7 = 1;
var7 = "hello";
var7 = true;

let t1 = typeof var7;
console.log(t1); // 결과: boolean

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

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

 

# 1.9 조건문

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

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

// 2. Switch 문
// -> if문과 기능 자체는 동일
// -> 다수의 조건을 처리할 때 if보다 더 직관적이다.

let animal = "owl";

switch (animal) {
  case "cat": {
    console.log("고양이");
    break; // 필수!!!
  }
  case "dog": {
    console.log("강아지");
    break;
  }
  case "bear": {
    console.log("곰");
    break;
  }
  case "snake": {
    console.log("뱀");
    break;
  }
  case "tiger": {
    console.log("호랑이");
    break;
  }
  default: {
    console.log("그런 동물은 전 모릅니다");
  }
}

 

# 1.10 반복문

for (let idx = 1; idx <= 10; idx++) { // 초기식,조건식,증감식
  if (idx % 2 === 0) {
    continue; // 다음 반복회차로 이동 
  }
  console.log(idx);

  if (idx >= 5) {
    break; // 반복문 종료
  }
}

 

# 1.11 함수

// 함수
let area1 = getArea(10, 20); // 인수
console.log(area1);

let area2 = getArea(30, 20);
console.log(area2);

getArea(120, 200);

// 호이스팅
// -> 끌어올리다 라는 뜻
function getArea(width, height) { // 매개변수
  function another() {
    // 중첩 함수
    console.log("another");
  }

  another();
  let area = width * height;

  return area;
}

 

# 1.12) 함수 표현식과 화살표 함수

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

let varA = funcA; // 함수를 변수에 담을 수 있음.
varA();

let varB = function () { // 익명함수 -> 호이스팅안됨.
  //   console.log("funcB");
};

varB(); // 호출

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

console.log(varC(10));

 

1.13) 콜백함수

// 1. 콜백함수 : 나중에 실행되는!!
function main(value) {
  value();
}

main(() => {
  //   console.log("i am sub");
});

// 2. 콜백함수의 활용
function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

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

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

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

 

1.14) 스코프 (범위)

// 스코프
// -> 전역(전체 영역) 스코프 / 지역(특정 영역) 스코프
// -> 전역 스코프 : 전체 영역에서 접근 가능
// -> 지역 스코프 : 특정 영역에서만 접근 가능

let a = 1; // 전역 스코프

function funcA() {
  let b = 2; // 지역 스코프
  console.log(a);
}

funcA();

if (true) {
  let c = 1;
}

for (let i = 0; i < 10; i++) {
  let d = 1;
}

funcB();

 

1.15) 객체 1

// 1. 객체 생성
let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴 (대부분 사용)

// 2. 객체 프로퍼티 (객체 속성)
let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
  job: "FE Developer",
  extra: {},
  10: 20,
  "like cat": true,
};

// 3. 객체 프로퍼티를 다루는 방법
// 3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법) !!!
let name = person.name;
let age = person["age2"];

let property = "hobby";
let hobby = person[property];

// 3.2 새로운 프로퍼티를 추가하는 방법
person.job = "fe developer";
person["favoriteFood"] = "떡볶이";

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

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

// 3.5 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person;
let result2 = "cat" in person;
console.log(result2);

 

1.16) 객체 2

// 1. 상수 객체 : 숫자가 아니고 바꿀 수 없는 객체라는 뜻!!!
const animal = {
  type: "고양이",
  name: "나비",
  color: "black",
};

animal.age = 2; // 추가 (가능)
animal.name = "까망이"; // 수정 (가능)
delete animal.color; // 삭제 (가능)
// 위처럼 객체의 프로퍼티를 바꾸는것은 가능, 객체자체를 다른 값으로 바꾸는것은 불가능!!!

// 2. 메서드
// -> 값이 함수인 프로퍼티를 말함

const person = {
  name: "이정환",
  // 메서드 선언
  sayHi() {
    console.log("안녕!");
  },
};

person.sayHi();
person["sayHi"]();

 

1.17) 배열

// 1. 배열 생성
let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴 (대부분 사용)

let arrC = [
  1,
  2,
  3,
  true,
  "hello",
  null,
  undefined,
  () => {},
  {},
  [],
];

// 2. 배열 요소 접근
let item1 = arrC[0];
let item2 = arrC[1];

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