[22-23 동계 모각코] 2회차 목표 및 결과

목표

2회차: 23/01/30 16:00 ~ 20:00
계획: Javascript 기본 문법 정리 (2)
목적: React 사용을 위함
방향: 기존의 프로그래밍 언어의 개념(e.g. 변수, 함수, 조건문, 반복문 등)이 Javascript에서는 어떻게 사용되는지 코드로 간단하게 확인

결과

객체

let ironman = {         // Property(속성)
  name: 'Tony',         // key - value
  age: 35,
  'born year': 1988,
  isMan: true,
  movie: {              // nested
    title: 'Avengers',
    isHero: true
  }
}
console.log(ironman);
console.log(typeof ironman);
console.log(ironman.name);
console.log(ironman['born year']);
console.log(ironman.movie.title);
console.log(ironman.machine);       // undefined
ironman.name = 'Stark';             // property 변경
ironman.weapon = 'missile';         // property 추가
delete ironman.isMan;               // property 삭제
console.log('name' in ironman);     // key 값 존재 확인

메소드

/**
 * 메소드
 */
let greetings = {
  sayHello: function(name) {
    console.log(`Hello! ${name}!`);
  },
  sayBye: function() {
    console.log('Bye!');
  }
}
greetings.sayHello('Mark');
greetings['sayHello']('Mark');
let triangle = {
  width: 15,
  height: 40,
  getArea: function() {
    return triangle.width * triangle.height / 2;
  }
}

FOR IN

for (let key in ironman) {
  console.log(key);
}
for (let key in triangle) {
  console.log(key);
}

• key에 접근
• key값이 int일 때는 오름차순으로 접근

DATE

let myDate = new Date();
console.log(myDate);
console.log(new Date());
console.log(new Date(1000));                    // millisec
console.log(new Date('2017-02-10'));
console.log(new Date('2017-02-10T19:11:14'));
console.log(new Date(2018, 4));                 // year, month까지 필수
console.log(new Date(2018, 4, 18, 19, 11, 16)); // 4 -> May
console.log(myDate.getTime());
myDate = new Date(2018, 3, 24, 19, 10, 11);
console.log(myDate.getFullYear());
console.log(myDate.getMonth());             // 0 ~ 11
console.log(myDate.getDate());
console.log(myDate.getDay());               // 0 ~ 6
console.log(myDate.getHours());
console.log(myDate.getMinutes());
console.log(myDate.getSeconds());
myDate.setFullYear(2002);
myDate.setMonth(6);
myDate.setDate(20);
myDate.setHours(11);
myDate.setMinutes(20);
myDate.setSeconds(30);
// 사용자 브라우저에 설정된 국가의 표기에 맞춘 날짜와 시간
myDate = new Date();
console.log(myDate.toLocaleDateString());
console.log(myDate.toLocaleTimeString());
console.log(myDate.toLocaleString());
// 현재 시간 (getTime)
console.log(Date.now());
// 연산 가능
console.log(typeof myDate);
console.log(String(myDate));
console.log(Number(myDate));
console.log(new Date(2017, 4, 19) - new Date(2017,4, 18));  // millisec

• time stamp: 1970.01.01 00:00:00으로부터 얼마나 지났는지(milisecond)

배열

let arr = [1, 2, 3, 4];
console.log(arr[0]);
console.log(typeof(arr));   // type : object
console.log(arr.length);
console.log(arr['length']);
console.log(arr[4]);    // Undefined
arr[4] = 5;   // 추가 -> 중간을 비우고 추가할 수도 있음
console.log(arr[4]);
arr[4] = 6;   // 수정
console.log(arr[4]);
delete arr[4];    // 삭제 -> 완벽한 삭제는 아님 -> empty 존재
console.log(arr);
arr = [[1, 2], [3, 4]];   // 2차원 배열
console.log(arr);

SPLICE

arr.splice(4);
console.log(arr);
arr.splice(1);
console.log(arr);
arr = [1, 2, 3, 4];
arr.splice(1, 2);   // 1번 인덱스부터 2개 삭제
console.log(arr);
arr = [1, 2, 3, 4];
arr.splice(1, 2, 5);    // 1번 인덱스부터 2개 삭제하고 5로 대체
console.log(arr);
arr = [1, 2, 3, 4];
arr.splice(1, 0, 5);    // 원하는 위치에 추가
console.log(arr);
arr = [1, 2, 3, 4];   // 홀수인 것만 삭제
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 1) {
    arr.splice(i, 1);
    i--;
  }
}
console.log(arr);

• splice(start, count, item) 형태
• 완벽한 삭제

SHIFT

arr = [1, 2, 3, 4];
arr.shift();
console.log(arr);

• 배열의 첫 요소를 삭제

POP

arr = [1, 2, 3, 4];
arr.pop();
console.log(arr);

• 배열의 마지막 요소를 삭제

UNSHIFT

arr = [1, 2, 3, 4];
arr.unshift(0);
console.log(arr);

• 첫 요소로 값을 추가

PUSH

arr = [1, 2, 3, 4];
arr.push(5);
console.log(arr);

• 마지막 요소로 값을 추가

INDEXOF, LASTINDEXOF

arr = [1, 2, 3, 4, 3];
console.log(arr.indexOf(3));
console.log(arr.lastIndexOf(3));
console.log(arr.indexOf(5));    // 없으면 -1

• index 리턴

INCLUDES

arr = [1, 2, 3, 4];
console.log(arr.includes(3));
console.log(arr.includes(0));

• 특정 값이 있는지 확인
• true or false 리턴

REVERSE

arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr);

• 배열 뒤집기

FOR OF

arr = [1, 2, 3, 4];
for (let item of arr) {
  console.log(item);
}
for (let s of "abcd") {   // string에도 적용 가능
  console.log(s);
}

• 요소 자체에 접근(for in 과의 차이)
• 파이썬에서의 for item in lst 느낌

지수 및 진수 표기법

console.log(25e5);    // 25 * 10^5
console.log(-6.1e8);    // -6.1 * 10^8
console.log(16e-5);   // 16 * e^(-5)
console.log(0xFF);
console.log(0o377);
console.log(0b11111111);    // 255

• aen 형태 -> a * 10^n
• 0x...(16), 0o...(8), 0b...(2)

toFixed(n)

console.log(0.3591.toFixed(3));   // 0.359
console.log(0.3591.toFixed(5));   // 0.35910
console.log(typeof(0.3591.toFixed(3)));   // string 형태로
console.log(typeof(Number(0.3591.toFixed(3))));   // 형 변환 필요
console.log(typeof(+0.3591.toFixed(3)));   // +로 대체 가능

• 소수점 아래 n자리수까지 표기
• 숫자도 객체로 취급
• 초과하면 0으로 채움
• 주의: 리턴값은 string

toString(n)

let n = 255;
console.log(n.toString(2));
console.log(typeof(n));
console.log(255..toString(2));
console.log((255).toString(2));

• 이름에서 유추할 수 있듯이 문자열로 변환하는 것 외에
• 십진수를 n진법 수의 string 형을 리턴하기도 함

MATH

console.log(Math.abs(-10));   // 10
console.log(Math.max(1, 2, 3));   // 3
console.log(Math.min(1, 2, 3));   // 1
console.log(Math.pow(2, 3));    // 2 ^ 3 = 8
console.log(Math.sqrt(25));   // 제곱 -> 5
console.log(Math.round(2.5));   // 반올림 -> 3
console.log(Math.floor(2.9));   // 버림 -> 2
console.log(Math.ceil(2.1));    // 올림 -> 3
console.log(Math.random());   // 0 ~ 1 중 난수

문자열 관련 메소드

let s = " abcDEfabc  ";
console.log(s.length);
console.log(s[3]);
console.log(s.charAt(3));
console.log(s.indexOf('a'));
console.log(s.indexOf('g'));
console.log(s.lastIndexOf('a'));
console.log(s.indexOf("abc"));    // 1
console.log(s.toLowerCase());
console.log(s.toUpperCase());
console.log(s.trim());
console.log(s.slice(1));
console.log(s.slice(2, 4));

• length
• charAt: index로 접근
• indexOf, lastIndexOf: 없으면 -1
• toUpperCase, toLowerCase
• trim: 공백 제거 (파이썬의 strip 느낌)
• slice(start, end) -> slicing

기본형(Primitive Type)

let x = 1;
let y = x;
console.log(x, y);
y = 2;
console.log(x, y);

• 변수에 값을 저장
• Number, String, Boolean

참조형(Reference Type)

let car_1 = {
  name : 'abc'
}
let car_2 = car_1
console.log(car_1, car_2);
car_2.engine = 'def';
console.log(car_1, car_2);

• 변수에 주소를 저장
• Object, Array

Reference Type Copy

let arr1 = [1, 2, 3];
let arr2 = arr1.slice();    // copy
arr2.push(4);
console.log(arr1, arr2);
let obj1 = {
  name : "Jake"
};
let obj2 = Object.assign({}, obj1);   // copy
obj2.age = 25;
console.log(obj1, obj2);

• Object.assign 이용