[TIL]내배캠 6일차 (자바스크립트 문법 모르는 부분 기록)

오늘은 코드 작성을 하며 문제가 된 부분은 없었다. 따라서 내가 몰랐던 자바스크립트 코드를 올려놓겠다.

그렇다. 코드만 딸랑 올려놓겠다.

let num = 2.5e5;    // 2.5 * 10^5

// 문자열 자름
string.substr(start index, length of string)
string.slice(start index, end index)

// 문자열 검색
string.search(string)   // returns start index of string

// 문자열 대체
string.replace(string1, string2);

// 문자열 분할
let str = "apple, banana, kiwi";
let result = str.split(",");

// 이게 된다고?
console.log(1 - '2');
console.log('2' * '3');

// 명시적 형 변환
Boolean(0);
Boolean('');
Boolean(null);
Boolean(undefined);
Boolean(NaN);
// 위에 내용들 다 false(falshy함)
Boolean("false");   // true
Boolean({});        // true

// 문자열
String(123);
String(true);
String(false);
String(null);
String(undefined);
// console.log로 결과도 확인해보기

// 1 + '1'은 11 나오는데 왜 1 - '2'는 -1이 나오는데?
// '2' * 3은 6 나오네
// 나누기랑 곱셈이랑 비슷한듯

// 혹시 몰라 삼항 연산자 남김
condition ? true_state : false_state;

// 함수 선언

function name(param) {
    return;
}

let variable_name = function (param) {
    return;
}

// 화살표 함수(ES6)
let add = (a, b) => {
    return a + b;
};

let add = (a, b) => a + b;

// 이게 된다고?
if (condition) {
    console.log();
}
// 위의 동작과 일치함
condition && console.log(); // and조건(&&) 단축평가

// or조건(||)
// 삼항 연산자와 단축평가
let y;
let z = y || 20;
console.log(z);

// 객체(key-value)
let person = {
    name: "name",
    age: 20,
    gender: "gender",
    do: function () {}
}
// value 값으로 함수도 올 수 있음

// 생성자 함수를 이용한 객체 생성 방법
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let perosn = new Person("홍길동", 30, "남자");

// 객체 메소드
Object.keys(object);
Object.values(object);
Object.entries(object); // returns [[key, value], [key, value], ...]

let newPerson = {};
Object.assign(newPerson, object);   // Object.assign(target, source)
Object.assign(newPerson, object, {property_of_object:30}); // 이런 것도 가능

let person1 = {
    name: "a",
    age: 30,
    gender: "a",
};

let person2 = {
    name: "a",
    age: 30,
    gender: "a",
};

console.log(person1 === person2); // false

// 내용 비교할 때
console.log(JSON.stringify(person1) === JSON.stringify(person2));

// 객체 병합
let person1 = {
    name: "a",
    age: 30,
};

let person2 = {
    gender: 'a',
};

// ... 명령어 : spread operator (ES6)
let perfectMan = {...person1, ...person2};

// 배열 크기 지정 생성
let number = new Array(size);

// push, pop
Array.prototype.push(item);
Array.prototype.pop();

let temp = ['a', 'b', 'c'];
console.log(temp); // ['a', 'b', 'c']
temp.shift();
console.log(temp); // ['b', 'c']
temp.unshift('d');
console.log(temp); // ['d', 'b', 'c']

let temp = [1, 2, 3, 4, 5, 6, 7];
// Array.splice(begin index, number of to remove, number to push to array)
temp.splice(1, 3, 10); // temp 결과 : [1, 10, 5, 6, 7]

let temp = [1, 2, 3, 4, 5];
temp.slice(1, 3); // [2, 3]  Array.slice(begin, end)

// forEach
let numbers = [1, 2, 3, 4, 5];

numbers.forEach((item) => {
    console.log(item);
}); // 1, 2, 3, 4, 5 출력

// map : map은 기존 배열을 가공하여 새로운 배열을 생성함. 원본만큼의 배열 길이가 반환됨
let temp = numbers.map((item) => {
    return item * 2;    // return이 없을 경우 undefined로 채워짐
}) // temp : [2, 4, 6, 8, 10]


let nubmers = [1, 3, 5, 3, 1, 1];
let filteredNumbers = numbers.filter((item) => {
    return item === 1;
}); // filteredNumbers : [1, 1, 1];

let result = numbers.find((item) => {
    return item > 2;
}) // 결과 : 3     다른 큰 숫자들도 있지만 가장 처음에 나오는 숫자만 반환하는 모양이다.


let person = {
    name: 'a',
    age: 10,
    gender: 'a'
}

for (let key in person) {
    console.log(key + ': ' + person[key]);
}

// destructuring assignment
let user = {
    name: 'a',
    age: 10
};

let {name: newName, age: newAge } = user;
console.log(newName);
console.log(newAge);

// 단축 속성명 : property shorthand
const obj = {
    name,           // name: name의 경우 왼쪽처럼 하나만 나타내도 됨
    age: newAge
}

마지막 단축 속성명이라 되어있는 것은 진짜 충격이다. 이런걸 왜 만들었는지... 이건 다른 프로그래밍 언어를 쓰다가 보면 충분히 모를 수 있는 부분이기 때문에 주의 해야겠다.