HighLight in your life~

인수 전달

function showName(name) {
  console.log(name);
}

showName('Mike');
showName('Mike', 'Tom');

showName();

--------------------------------------------------------------------------------

arguments
- 함수로 넘어 온 모든 인수에 접근
- 함수 내에서 이용 가능한 지역변수
- length / index
- Array 형태의 객체
- 배열의 내장 메서드 없음
  (forEach, map)

function showName(name) {
  console.log(arguments.length);
  console.log(arguments[0]);
  console.log(arguments[1]);
}

showName('Mike', 'Tom');

--------------------------------------------------------------------------------

나머지 매개변수(Rest parameters)

function showName(...names) {
  console.log(names);
}

showName();
showName('Mike');
showName('Mike', 'Tom');

--------------------------------------------------------------------------------

/***************************************************
나머지 매개변수
전달 받은 모든 수를 더해야함
***************************************************/

function add(...numbers) {
  let result = 0;
  numbers.forEach((num) => (result += num));
  console.log(result);
}

add(1, 2, 3);
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

--------------------------------------------------------------------------------

/***************************************************
나머지 매개변수
user 객체를 만들어 주는 생성자 함수를 만든다.
***************************************************/

function User(name, age, ...skills) {
  this.name = name;
  this.age = age;
  this.skills = skills;
}

const user1 = new User("Mike", 30, "html", "css");
const user2 = new User("Tom", 20, "JS", "React");
const user3 = new User("Jane", 25, "Korean");

console.log(user1);
console.log(user2);
console.log(user3);

--------------------------------------------------------------------------------

전개 구문(Spread syntax) : 배열

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = [...arr1, ...arr2];

console.log(result);

--------------------------------------------------------------------------------

전개 구문(Spread syntax) : 배열

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let result = [0, ...arr1, ...arr2, 7, 8, 9, 10];

console.log(result);

--arr.push() / arr.splice() / arr.concat() ...

--------------------------------------------------------------------------------

전개 구문(Spread syntax) : 객체

let user = {name: 'Mike'};
let mike = {...user, age: 30};

console.log(mike);

--------------------------------------------------------------------------------

전개 구문(Spread syntax) : 복제

let arr = [1, 2, 3];
let arr2 = [...arr];

let user = {name: 'Mike', age: 30};
let user2 = {...user};

user2.name = "Tom";

console.log(user.name);
console.log(user2.name);

--------------------------------------------------------------------------------

/***************************************************
전개 구문
arr1 을 [4, 5, 6, 1, 2, 3] 으로
***************************************************/

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

arr2.forEach((num) => {
  arr1.unshift(num);
});

console.log(arr1);

--------------------------------------------------------------------------------

/***************************************************
전개 구문
arr1 을 [4, 5, 6, 1, 2, 3] 으로
***************************************************/

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// arr2.forEach((num) => {
//   arr1.unshift(num);
// });

arr1 = [...arr2, ...arr1];

console.log(arr1);

--------------------------------------------------------------------------------

let user = { name: "Mike" };
let info = { age: 20};
let fe = ["Javascript", "React"];
let lang = ["Korean", "English"];

user = Object.assign({}, user, info, {
  skills: [],
});

fe.forEach((item) => {
  user.skills.push(item);
});


lang.forEach((item) => {
  user.skills.push(item);
});

console.log(user);

--------------------------------------------------------------------------------

let user = { name: "Mike" };
let info = { age: 20};
let fe = ["Javascript", "React"];
let lang = ["Korean", "English"];

user = {
  ...user,
  ...info,
  skills: [...fe, ...lang],
};

console.log(user);

구조 분해 할당(Destructuring assignment)
=> 구조 분해 할당은 배열이나 객체의 속성을 분해해서 
그 값을 변수에 담을 수 있게 하는 표현식

------------------------------------------------------------

배열 구조 분해

let [x, y] = [1, 2];

console.log(x);
console.log(y);

------------------------------------------------------------

배열 구조 분해

let users = ['Mike', 'Tom', 'Jane'];

let [user1, user2, user3] = users;

console.log(user1);
console.log(user2);
console.log(user3);

------------------------------------------------------------

배열 구조 분해

let str = "Mike-Tom-Jane";

let [user1, user2, user3] = str.split('-');

console.log(user1);
console.log(user2);
console.log(user3);

------------------------------------------------------------

배열 구조 분해 : 기본값

let [a, b, c] = [1, 2];

console.log(a);
console.log(b);
console.log(c);

let [a=3, b=4, c=5] = [1, 2];

console.log(a);
console.log(b);
console.log(c);

arr.sort()

배열 재정렬
배열 자체가 변경되니 주의

/*****************************************************************
arr.sort()
배열 재정렬
주의! 배열 자첵 변경됨
인수로 정렬 로직을 담은 함수를 받음
*****************************************************************/

let arr = [1, 5, 4, 2, 3];

arr.sort();

console.log(arr);

------------------------------------------------------------

let arr2 = ["a", "c", "d", "e", "b"];

arr2.sort();

console.log(arr2);

------------------------------------------------------------

let arr = [27, 8, 5, 13];

arr.sort();

console.log(arr);

------------------------------------------------------------

let arr = [27, 8, 5, 13];

function fn(a, b) {
  return a - b;
}

arr.sort(fn);

console.log(arr);

------------------------------------------------------------

let arr = [27, 8, 5, 13];

arr.sort((a, b) => {
  console.log(a, b);
  return a - b;
});

console.log(arr);

------------------------------------------------------------

Lodash

_.sortBy(arr);

https://lodash.com/

------------------------------------------------------------

/*****************************************
arr.reduce();
인수로 함수를 받음
(누적 계산값, 현재 값) => { return 계산값 };
*****************************************/

// 배열의 모든 수 합치기

let arr = [1, 2, 3, 4, 5];

// for, for of, forEach

let result = 0;
arr.forEach((num) => {
  result += num;
});

console.log(result);

------------------------------------------------------------

// 배열의 모든 수 합치기

let arr = [1, 2, 3, 4, 5];

// for, for of, forEach

const result = arr.reduce((prev, cur) => {
  return prev + cur;
}, 100);

console.log(result);

------------------------------------------------------------

let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 10 },
  { name: "Jane", age: 27 },
  { name: "Sue", age: 26 },
  { name: "Harry", age: 42 },
  { name: "Steve", age: 60 },
];

let result = userList.reduce((prev, cur) => {
  if (cur.age > 19) {
    prev.push(cur.name);
  }
  return prev;
}, []);

console.log(result);

------------------------------------------------------------

let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 10 },
  { name: "Jane", age: 27 },
  { name: "Sue", age: 26 },
  { name: "Harry", age: 42 },
  { name: "Steve", age: 60 },
];

let result = userList.reduce((prev, cur) => {
  return (prev += cur.age);
}, 0);

console.log(result);

------------------------------------------------------------

let userList = [
  { name: "Mike", age: 30 },
  { name: "Tom", age: 10 },
  { name: "Jane", age: 27 },
  { name: "Sue", age: 26 },
  { name: "Harry", age: 42 },
  { name: "Steve", age: 60 },
];

let result = userList.reduce((prev, cur) => {
  if (cur.name.length === 3) {
    prev.push(cur.name);
  }
  return prev;
}, []);

console.log(result);

1. 자바스크립트 - 배열 메소드(Array methods)

push() : 뒤에 삽입
pop() : 뒤에 삭제
unshift() : 앞에 삽입
shift() : 앞에 삭제

------------------------------------------------------------

2. arr.splice(n, m) : 특정 요소 지움

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2);

console.log(arr);

arr.splice(n, m, x) : 특정 요소 지우고 추가

let arr = [1, 2, 3, 4, 5];

arr.splice(1, 3, 100, 200);

console.log(arr);

arr.splice(n, m, x)  : 특정 요소 지우고 추가
- m: 두번째 인수의 0을 넣으면 아무것도 지우지 않고 중간에 새로운 요소를 추가

let arr = ["나는", "제이슨", "입니다."];

arr.splice(1, 0, "대한민국", "경찰관");

console.log(arr);

------------------------------------------------------------

3. arr.splice() :  삭제된 요소 반환

let arr = [ 1, 2, 3, 4, 5];

let result = arr.splice(1, 2);

console.log(arr);
console.log(result);

------------------------------------------------------------

4. arr.slice(n, m) : n부터 m까지 반환

let arr = [ 1, 2, 3, 4, 5];
arr.slice(1, 4);

let arr2 = arr.slice();
console.log(arr2);

------------------------------------------------------------

5. arr.concat(arr2, arr3, ...) : 합쳐서 새배열 반환

let arr = [1, 2];
arr.concat([3,4]);

arr.concat([3,4],[5,6]);
arr.concat([3,4],5,6);

------------------------------------------------------------

6. arr.forEach(fn) : 배열 반복
- 첫번째는 해당 요소이고 두번째는 인덱스임
  세번째는 해당 배열 자체를 의미

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item, index, arr) => {
//
});

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((name, index) => {
  console.log(name);
});

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((name, index) => {
  console.log(`${index+1}. ${name}`);
});

------------------------------------------------------------

7. arr.indexOf / arr.lastIndexOf

let arr = [1, 2, 3, 4, 5, 1, 2, 3];

arr.indexOf(3);
arr.indexOf(3, 3);
arr.lastIndexOf(3);

------------------------------------------------------------

8. arr.includes() : 포함하는지 확인

let arr = [1, 2, 3];

arr.includes(2);
arr.includes(8);

------------------------------------------------------------

9. arr.find(fn) / arr.findIndex(fn)

첫번째 true값만 반환하고 끝. 만약 없으면 undefined를 반환

let arr = [1, 2, 3, 4, 5];

const result = arr.find((item) => {
  return item % 2 === 0;
});

console.log(result);

// find / findIndex

let userList = [
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10},
];

const result = userList.find((user) => {
  if (user.age < 18) {
    return true;
  }
  return false;
});

console.log(result);

------------------------------------------------------------

10. arr.filter(fn) : 만족하는 모든 요소를 배열로 반환

const arr = [1, 2, 3, 4, 5, 6];

const result = arr.filter((item) => {
  return item % 2 === 0;
});

console.log(result);

------------------------------------------------------------

11. arr.reverse() : 역순으로 재정렬

let arr = [1, 2, 3, 4, 5];

arr.reverse();

------------------------------------------------------------

12. arr.map(fn)

함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

// arr.map()

let userList = [
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10},
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    isAdult: user.age > 18,
  });
});

console.log(newUserList);

// arr.map()

let userList = [
  { name: "Mike", age: 30},
  { name: "Jane", age: 27},
  { name: "Tom", age: 10},
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id: index + 1,
    isAdult: user.age > 18,
  });
});

console.log(newUserList);
console.log(userList);

------------------------------------------------------------

// join, split

let arr = ["안녕", "나는", "제임스야"];

let result = arr.join();

console.log(result);

------------------------------------------------------------

let arr = ["안녕", "나는", "제임스야"];

let result = arr.join("   ");

console.log(result);

------------------------------------------------------------

// split

const users = "Mike, Jane, Tom, Tony";

const result = users.split(",");

console.log(result);

------------------------------------------------------------

// split

let str = "Hello, My name is Mike.";
const result = str.split("");

console.log(result);

------------------------------------------------------------

// Array.isArray()

let user = {
  name : "Mike",
  age: 30,
};

let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user);
console.log(typeof userList);

console.log(Array.isArray(user));
console.log(Array.isArray(userList));

1. toString() : 10 진수 -> 2진수/16진수

let num = 10;

num.toString();
num.toString(2);

let num2 = 100;

num2.toString(16);

------------------------------------------------------------

2. Math.ceil() : 올림

let num1 = 2.1;
let num2 = 2.5;

Math.ceil(num1);
Math.ceil(num2);

------------------------------------------------------------

3. Math.floor() : 내림

let num1 = 2.1;
let num2 = 2.5;

Math.floor(num1);
Math.floor(num2);

------------------------------------------------------------

4. Math.round() : 반올림

let num1 = 2.1;
let num2 = 2.5;

Math.round(num1);
Math.round(num2);

------------------------------------------------------------

5. 소숫점 자릿수
- 요구사항 : 소수점 둘째자리 까지 표현(셋째 자리에서 반올림)

let userRate = 10.12345;

Math.round(userRate * 100) / 100

------------------------------------------------------------

6. 소숫점 자릿수 : toFixed()
- 요구사항 : 소수점 둘째자리 까지 표현(셋째 자리에서 반올림)

let userRate = 10.12345;
userRate.toFixed(2);
userRate.toFixed(0);
userRate.toFixed(6);

let userRate = 10.12345;
userRate.toFixed(2);
Number(userRate.toFixed(2));

------------------------------------------------------------

7. isNaN()

let x = Number('x');

x == NaN;
x === NaN;
NaN == NaN;

isNaN(x);
isNaN(1);

------------------------------------------------------------

8. parseInt()

let margin = '10px';
parseInt(margin);
Number(margin);

let redColor = 'f3';
parseInt(redColor);
parseInt(redColor, 16);
parseInt('10', 2);

------------------------------------------------------------

9. parseFloat()

let padding = "10.5%";
parseInt(padding);
parseFloat(padding);

------------------------------------------------------------

10. Math.random() : 0 ~ 1 사이 무작위 숫자 생성

Math.random();
Math.random();
Math.random();

1 ~ 100 사이 임의의 숫자를 뽑고 싶다면?
Math.floor(Math.random()*100) + 1

------------------------------------------------------------

11. Math.max() / Math.min()

Math.max(1, 4, -2, 5, 11, 9, 6, 2.1);
Math.min(1, 4, -2, 5, 11, 9, 6, 2.1);

------------------------------------------------------------

12. Math.abs() : 절대값

Math.abs(-1)

------------------------------------------------------------

13. Math.pow(n, m) : 제곱

Math.pow(2, 10);

------------------------------------------------------------

14. Math.sqrt() : 제곱근

Math.sqrt(16);

"0" == false; // true -- 헐
false == 0; // true -- 헐
false == ""; // true -- 헐
false == []; // true -- 헐
"" == 0; // true -- 헐
"" == []; // true -- 헐
0 == []; // true -- 헐

----------------------------------------------------------------------------------------------------

10 == "11";
"test" == 10;
"true" == true;

10 == "10";
"foo" == [ "foo"];

"0" == null;
"0" == undefined;
"0" == false; // true -- 헐
"0" == NaN;
"0" == "0";
"0" == "";

false == null;
false == undefined;
false == NaN;
false == 0; // true -- 헐
false == ""; // true -- 헐
false == []; // true -- 헐
false == {};

"" == null;
"" == undefined;
"" == NaN;
"" == 0; // true -- 헐
"" == []; // true -- 헐
"" == {};

0 == null;
0 == undefined;
0 == NaN;
0 == []; // true -- 헐
0 == {};

" "와  NaN은 전혀 동등할 만한 값들이 아니며 실제로도 느슨한 동등 비교 시 강제변환되지 않는다. 한편, "0"과 0은 느슨한 동등 비교 시 강제변환된다.

" "과 0은 분명히 다른 값이며 같은 값으로 취급할 경우 또한 거의 없기 때문에 강제변환은 문제가 있다.

null와 undefined는 객체 래퍼가 따로 없으므로 박싱할 수 없다. 그래서 Object(null)는 Object()로 해석되어 그냥 일반 객체가 만들어 진다.

NaN은 해당 객체 래퍼인 Number로 박싱되지만, == 를 만나 언박싱되면 결국 조건식은 NaN == NaN 이 되어 (NaN은 자기 자신과도 같지 않으므로) 결과는 false다.