JavaScript 기본 문법 - 2

조건문 

if ~ else if ~ else

타 언어와 마찬가지로 조건 분기를 위한 if ~ else if ~ else 블록을 사용할 수 있다
- 문법 구조는 C 계열의 언어 조건문과 유사

let num = 3;
if (num > 0) {
	console.log("양수입니다.");
} else if (num < 0) {
	console.log("음수입니다.");
} else {
	console.log("0입다.");
}

switch

- 타 언어와 마찬가지로 조건 분기를 위한 switch 문을 사용할 수 있다

let grade = "C";
switch (grade) {
  case "A":
  case "B":
  case "C":
  case "D":
    console.log("Pass");
    break;
  case "F":
    console.log("Fail");
    break
  default:
    console.log("?");
  }

 

반복문

반복을 위한 for, while, do ~ while 문도 C 계열 언어와 거의 유사

for (let i = 0; i < 10; i++) {
	if (i % 2 == 0) console.log(i);
}

for … in, for … of

for … in: 객체들의 속성(property)을 반복하여 탐색
- JavaScript의 모든 객체에서 사용 가능

let obj = {
    name: "홍길동",
    age: 28,
    job: "도적",
    gender: "남"
};

for (let key in obj) {
    //for .. in은 객체의 속성을 순회한다.
    console.log(key, "->", obj[key]);
}

// for ...of는 순회객체(배열 등)에서만 사용.
// for (let value of obj){
//     console.log(value)
// } --> error : obj는 순회객체가 아님

const arr = [5, 1, 4, 3, 2, 9, 8, 0];
for (let key in arr) {
    console.log(key);
}

for (let value of arr) {
    // for ..of : 반복 가능 객체에서 요소를 하나씩
    console.log(value);
}

함수

특정 실행 코드의 묶음을 프로그램 상의 다른 영역에서도 재호출 할 수 있도록 그룹화한 기능 객체
- 함수의 선언 : 함수 선언식(Function Declaration)

function sum(a, b) { // 선언
  return a + b;
}
console.log(sum(3, 7)); // 사용

함수도 객체로 간주함 : 함수 표현식(Function Expression)

const sum = function(a, b) {
return a + b;
}
console.log(typeof sum, sum(3, 7)); // function 10

함수로 전달된 모든 매개변수는 함수 내부에서 arguments 객체로 참조할 수 있다
- 가변 인수처럼 활용할 수 있음

function getNumberTotal() {
  let result = 0;
    for (let i = 0; i < arguments.length; i++) {
      if (typeof arguments[i] == "number") {
        result += arguments[i];
      }
    }
  return result;
}
console.log(getNumberTotal(1, 2, 3, 4));
console.log(getNumberTotal(1, 2, "3", 4));

JavaScript의 함수는 전혀 별개의 문법적 기능이 아니라 Number, String 등과 동등한 객체이다.
- 함수에 Number, String 등을 전달할 수 있는 것처럼 매개변수로 함수 자체도 전달할 수 있다

function sandBox(val1, val2, func) {
  if (typeof func == "function")
 	 func(val1, val2);
}
sandBox(3, 4, function(v1, v2) {
  console.log(v1 + v2);
});

다른 코드의 인수로 넘겨주는 실행 가능한 코드를 콜백(Callback)이라 함

 

JavaScript의 객체

객체 : 정보를 관리하기 위해 의미를 부여하고 분류하는 논리적 단위
- 객체는 속성(attributes)을 가지고 있으며 속성은 다음과 같이 분류된다
     - Property : 객체가 관리하는 정보
     - Method : 객체가 수행할 수 있는 기능 (객체가 가지고 있는 함수)
- 객체의 생성

// 객체의 생성
const person = new Object(); // 빈 객체
// 필요할 때 동적으로 속성 추가.
person.name = "Jamein"; // 문자열
person.age = 30;
person.showinfo = function () {
    // 메서드
    let message = `name : ${this.name} , Age : ${this.age}`
    console.log(message);

}
person.showinfo();  // 속성에 접근시 . 으로 구분

JSON을 이용한 객체의 생성

JSON(JavaScript Object Notation)

- JavaScript에서 객체를 표기하기 위한 표기법
- 어떤 객체이던 표기할 수 있고 바로 생성 가능

// JSON(JavaScript Object Notation) !! 중요 !!
// 키 : 값
// 속성은 , 로 구분
const person2 = {
    name: "jason",
    age: 30,
    showinfo: function () {
        console.log(`name : ${this.name} , Age : ${this.age}`)
    }
}

person2.showinfo();

prototype 기반 상속

JavaScript는 객체 지향이 아니라 객체 기반 언어
- prototype 기반의 상속을 이용, 객체지향의 특성을 구현할 수 있다(속성 공유)

const Member = function(name, position) {
  this.name = name;
  this.position = position;
};
Member.prototype.team = "상북";
Member.prototype.introduce = function() {
  console.log("Name:" + this.name);
  console.log("Position:" + this.position);
}
const m1 = new Member("강백호", "PF");
const m2 = new Member("서태웅", "SF");
m1.introduce();
m2.introduce();

객체의 constructor로 어떤 객체가 사용되고 있는지 확인해 봅시다

console.log(m1.constructor);
console.log(Member.prototype);

prototype 기반 상속