포스코DX X 비트교육센터 6기 - JS

var o2 = {};
var a2 = [];
var re2 = /^js$/gi;
var n = null;

console.log(o2 + ":" + typeof o2 + ":" + (o2 instanceof String));
console.log(a2 + ":" + typeof a2 + ":" + (a2 instanceof Boolean));
console.log(re2 + ":" + typeof re2 + ":" + (re2 instanceof Object));
console.log(n + ":" + typeof n + ":" + (n instanceof Date));

function f1(a, b) {
  return a + b;
}

var f2 = function (a, b) {
  return a + b;
};

var f3 = new Function("a", "b", "return a+b;");

console.log(f1(10, 20) + ":" + typeof f1 + ":" + (f1 instanceof Function));
console.log(f2(10, 20) + ":" + typeof f2 + ":" + (f2 instanceof Function));
console.log(f3(10, 20) + ":" + typeof f3 + ":" + (f3 instanceof Function));

/**
 * undefined와 null의 둥치(equals) 비교
 *
 */

// number, string, boolean이 들어갈 가능성 높음
var myVar1 = undefined; // 명시적으로 undefined 대입
var myVar2; // 암시적으로 undefined 대입

// object, function이 들어갈 가능성 높음
var myVar3 = null;

console.log(myVar1, myVar2, myVar3); // undefined undefined null

console.log(myVar1 == myVar3); // true: 값(의미) 비교
console.log(myVar1 === myVar3); // false: 타입비교 + 값비교

console.log("=========================");

// == : equality, 값의 동치성, 형변환
console.log("4" == 4); //true
console.log(false == 0); //true
console.log("abc" == new String("abc")); //true

console.log(true + 10); //11
console.log("abc" + new String("abc")); //abcabc
console.log(1 + "11"); //111
console.log("11" + 1); //111
console.log(parseInt("11") + 1); //12

// ===
// 1. 타입의 동일성
// 2. 타입이 같은 경우
//    1) primitive type: 값의 동일성
//    2) object type: 객체의 동일성

console.log("4" === 4); //false
console.log(true == 1); //true
console.log("abc" === new String("abc"));  //false
console.log(2 === 4);  //false
console.log(new Number(10) === new Number(10)); // false 다른 객체 생성으로  //false
console.log(new String(10) === new Number(10)); // false 다른 객체 생성으로  //false
console.log("hello" === "hello");  //false

/**
 * 변수의 범위(scope)
 *
 * 1. 자바스크립트는 기본적으로 코드에서 변수의 범위를 알 수 있다.(정적 스코프, Lexical Scope)
 * 2. 자바스크립트의 scope
 *    1) 전역 범위
 *    2) ES6 이전(<=ES5)
 *       - 자바와 같은 블록 범위({})를 지원하지 않았다.
 *       - 함수 범위만 지원
 *       - var 키워드를 사용해야 함수범위를 가진다.
 *       - 만일 사용하면 그 변수는 전역 범위를 가진다.(hoisting)
 *    3) ES6 이후(ES6 ~ ES2022)
 *       - 자바와 같은 블록 범위를 가진다.
 *       - let 키워드를 사용해서 블록 범위를 가지게 한다.
 *       - const 키워드는 블록 범위의 상수를 정의할 때 사용한다.
 *    4) 결론:  const, let만 사용하고 둘 중에 하나를 반드시 붙이자!!! (안붙히면 전역 범위를 만든다: 호이스팅 막기 위해)
 */

// 전역 범위

i = 10;
var f = function () {
  var i = 20; //f 함수의 스택에 들어감.

  j = 10; //호이스팅: var를 안 붙이면, i와 f와 같은 스택에 들어감.
  console.log(i); //20
  i = j - i;
};

f();
console.log(i); //10
console.log(j); //10

console.log("=== var 키워드는 함수 블록에서만 범위를 만든다");
if (90 + 10 === 100) {
  var k = 10;
}

console.log(k); //10

{
  let x = 1000;
  const PI = 3.14;

  x = 100;
  //PI = 0; const(불변객체,상수) assign error
}

// console.log(x); reference error
// console.log(PI); reference error

/**
 * 구문(statement)
 *
 * 1. 자바스크립트 실행 단위
 * 2. 구성 요소
 *    값, 연산식: 표현식
 *    예약어: var, if, for
 *    주석: 구문이지만 실행하지 않는다.
 * 3. 구문의 예
 *    if문, if~else문, switch문
 *    while문, do-while문, for문
 *    for~in문
 *
 *  cf) 표현식
 *      10       : 리터럴
 *      5 + 5    : 연산식
 *      ten      : 변수
 *      add(5,5) : 함수호출
 *
 * 4. 공백: 토큰 구분, 무시
 * 5. 세미콜론
 * 6. 개행(line breaker)
 *
 */

// ;(세미콜론)이 하는 역할은 표현식을 표현식 구문으로 만들어서 실행하는 역할
s = "Hello World"; i =10+10; console.log(i)
console.log(s);

// 개행의 역할
// 1. ;(세미콜론) 대체하는 역할
i = 10
console.log(i)

//2.
//하지만
//상황에 따라서는 토큰을 분리하는 역할

a
=
2
+
4;

console.log(a)

/**
 * 자바스크립트 객체1: object 타입
 * 1. 자바스크립트 객체는 function 타입과 object 타입 딱! 2가지가 있다.
 * 2. 보통, function 타입의 객체는 '함수'라고 부른다.
 * 3. 따라서 자바스크립트에서 객체라고 부르는 것은 object타입의 객체를 가리킨다.
 */

//생성방법1
//{} literal를 사용하는 방법
var o1 = new Object();
o1.name = "둘리";
o1.age = 10;
o1.another = new Object();
o1.another.name = "마이콜";
o1.another.age = 30;

console.log(o1);

//생성방법2
//1. Number, Object, String, ... 내장 객체(내장 생성자 함수)를 사용하는 방법
//2. 사용자 정의 생성자 함수를 사용하는 방법
var o2 = {};
o2.name = "둘리";
o2.age = 10;
o2.another = new Object();
o2.another.name = "마이콜";
o2.another.age = 30;

console.log(o2);

//생성방법3
//JSON(JavaScriptObjectNotation)
var o3 = {
  name: "둘리",
  age: 10,
  another: {
    name: "마이콜",
    age: 30,
  },
};

console.log(o3);

//XmlHttpRequest, fetch
// const response = fetch("/mysite07/api/user/1", {});
response = '{"no":1, "age":10, "name": "둘리", "email": "dooly@gmail.com"}';
var user = JSON.parse(response);
console.log(user.name, user.email); // 둘리 dooly@gmail.com

/**
 * 자바스크립트 객체3: 확장
 */

var o = {
  name: "둘리",
  age: 10,
};

var f = function () {
  console.log("hello world");
};

console.log.apply("===확장(object 타입)===");
o.another = {
  name: "마이콜",
  age: 30,
  print: function () {
    console.log(this.name, this.age);
  },
};

console.log(o);
o.another.print();

console.log("===확장(function 타입)===");

f.another = {
  name: "마이콜",
  age: 30,
  print: function () {
    console.log(this.name, this.age);
  },
};

console.log(f);
f.another.print();

console.log("=== 확장(기본타입은 확장되지 않는다.) ======");
var i1 = 10;
var i2 = new Number(10);

console.log(i1, i2, i1 + i2);

i2.another = {
    name: '마이콜',
    age: 30
};

console.log(i2);

i1.another = {};            // 유사객체로 변환된다: new Number(i1).another = {};
console.log(i1.another);    // 유사객체로 변환된다: console.log(new Number(i1).another)

/**
 * 자바스크립트 객체4: prototype 기반의 상속과 오버라이딩: 자바스크립트 객체 지향 프로그래밍
 */

var MyObject = function (name, age) {
  this.name = name;
  this.age = age;
};

MyObject.prototype.school = "bitacademy";
MyObject.prototype.course = "java fullstack";
MyObject.prototype.info = function () {
  console.log(this.name, this.age, this.school, this.course);
};

//MyObject 인스턴스 생성
var o1 = new MyObject("마이콜", 20);
o1.info();
o1.school = "poscodx"; //오버라이딩 같은 거
o1.info();

// MyObject 인스턴스 생성2
var o2 = new MyObject("둘리", 10);
o2.info = function () {  //오버라이드 같은 거
  console.log("안 알려줌!");
};
o2.info();

/**
 * 배열(Array)
 *
 */

console.log("===배열생성1: 내장객체(생성자 함수를 사용하는 방법)===");

var a1 = new Array();
console.log(typeof a1, a1 instanceof Array, a1.length);

// 생성자 함수의 파라미터가 하나인 경우는 배열의 크기
var a2 = new Array(10);
console.log(typeof a2, a2 instanceof Array, a2.length); //가변길이

// 배열의 크기를 지정하는 것은 아무런 의미가 없다. 동적으로 배열은 늘어 난다.
a2[0] = 0;
a2[5] = 5;
a2[10] = 10;
console.log(a2, a2.length);

//생성자 함수의 파라미터가 2개 이상인 경우: 초기값 저장
var a3 = new Array(0, 2, 4, 6, 8);
console.log(a3, a3.length);

console.log("===배열생성2: 리터럴을 사용하는 방법===");