Javascript - 기본, 응용(배열 내장 함수, Truthy & Falsy, 삼항 연산자, 단락회로 평가, 조건문 업그레이드, 비 구조화 할당, Spread 연산자) +a

- 함수

// 콜백 함수 사용
function checkMood(mood, goodCallback, badCallback) {
// 함수 파라미터로 함수를 사용할 수 있다.
  if(mood === "good"){
    // 기분 좋을 때 하는 동작
    goodCallback();
  } else {
    // 기분 안 좋을 때 하는 동작
    badCallback();
  }
}

function cry() {
  console.log("ACTION :: CRY");
}

function sing() {
  console.log("ACTION :: SING");
}

function dance() {
  console.log("ACTION :: DANCE");
}

checkMood("sad", sing, cry);

let person = {
  name: "백인수",
  age: 25,
  say: function () {
    console.log(`안녕 나는 ${this.name}`);
    // ``백틱을 사용하면 문자열 안에 ${}를 사용하여 변수를 넣을 수 있다.
  }
};

console.log(person.say());
console.log(person.gender);
console.log(`name : ${"name" in person}`);
console.log(`gender : ${"gender" in person}`)

---

- 객체

let person = {
  name: "백인수",
  age: 10,
  tall: 100
};

const personKeys = Object.keys(person);
const personValues = Object.values(person);

console.log(personKeys);
console.log(personValues);

---

- 배열 내장 함수

- forEach, indexOf, findIndex, find, filter, slice, concat, compare, join

 

- forEach, indexOf

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

let number = 3;
arr.forEach((elm) => {
	if (elm === number) { 
            console.log(true);
       }});
console.log(arr.indexOf(number));

 

- findIndex

const arr = [
{color : "red"},
{color : "black"},
{color : "blue"},
{color : "green"}
];

console.log(arr.findIndex((elm) => elm.color === "green"))

 

- find

const arr = [
{color : "red"},
{color : "black"},
{color : "blue"},
{color : "green"}
];

const element = arr.find((elm) => elm.color === "blue");'
console.log(element);

 

- filter

const arr = [
{num: 1, color : "red"},
{num: 2, color : "black"},
{num: 3, color : "blue"},
{num: 4, color : "green"},
{num: 5, color : "blue"}
];

console.log(arr.filter((elm) => elm.color === "blue"));

 

- slice

const arr = [
{num: 1, color : "red"},
{num: 2, color : "black"},
{num: 3, color : "blue"},
{num: 4, color : "green"},
{num: 5, color : "blue"}
];

console.log(arr.slice(0,2));

 

- concat

const arr1 = [
{num: 1, color : "red"},
{num: 2, color : "black"},
];

const arr2 = [ {num: 3, color : "blue"}, {num: 4, color : "green"}, {num: 5, color : "blue"}];
console.log(arr1.concat(arr2));

 

- compare

let numbers = [0,1,6,2,8,10,22];

const compare = (a,b) =>{
	//1. 크다 
	if(a>b) { return 1; } 
	//2. 작다 
	if(a<b) { return -1; } 
	//3. 같다 
    return 0;};
    
numbers.sort(compare);
console.log(numbers);

 

- join

const arr = ["백인수", "님","안녕하세요"];

console.log(arr.join());

console.log(arr.join(" "));

---

- Truthy & Falsy

- true : {}, [], Infinity ...
- false : null, undefined, 0, -0, Nan, "" ...

- 예외 처리 할 때 정상적인 값이 아니면 전부 false로 반환되는 성질을 이용하면 편하다.

const getName = (person) => {
	if (!person){
		return "객체가 아닙니다.";
	}
		return person.name;
	};

let personconst name = getName(person);console.log(name);

---

- 삼항 연산자

let a = 3;
a >= 0 ? console.log("양수") : console.log("음수");

let b = [];
b.length === 0 ? console.log("빈 배열") : console.log("안 빈 배열");
const arrayStatus = b.length === 0 ? "빈 배열" : "안 빈 배열";
console.log(arrayStatus);

let c;
const result = c ? true : false;console.log(result);

let score = 40;
score >= 90 ? console.log("A") : score >= 50 ? console.log("B") : console.log("F")

---

- 단락회로 평가

const getName = (person) => {
const name = person && person.name;
return name || "객체가 아닙니다";
};

let person = {name : "백인수"};
//let person = null;
const name = getName(person);
console.log(name);

---

- 조건문 업그레이드

const meal = {
한식: "불고기",
중식: "멘보샤",
일식: "초밥",
양식: "스테이크",
인도식: "카레"
};

const getMeal = (mealType) => { return meal[mealType] || "굶기";};
console.log(getMeal("한식"));

---

- 비 구조화 할당

let arr = ["one", "two", "three"]
let one = arr[0];
let two = arr[1];
let three = arr[2];

let [one, two, three] = arr;

let [one, two, three] = ["one", "two", "three"]

console.log(one, two, three);

//-----

let a = 10;
let b = 20;
[a,b]=[b,a];

console.log(a,b)

//-----

// let object = {one:"one", two:"two", three:"three", name:"백인수"};
// let {name, one, two, three} = object;
let {name:myName, one, two, three} = object;

console.log(one,two,three,name);console.log(myName, one, two, three);

---

- Spread

const cookie = {
base: "cookie",
madeIn: "korea"
};

const chocoCookie = { ...cookie, toping: "choco"};
const bananaCookie = { ...cookie, toping: "banana"}
console.log(cookie);console.log(chocoCookie);

const noTopingCookies = ["촉촉한쿠키", "안촉촉한쿠키"];
const topingCookies = ["바나나쿠키", "블루베리쿠키", "초코쿠키"]
const allCookies = [...noTopingCookies,"함정쿠키", ...topingCookies]
console.log(allCookies)

---

- `` 백틱을 사용하면 {`문자열 + ${}`}과 같이 변수를 넣을 수 있다.

 

- ?? null 병합 연산자로 a ?? b 가 있으면 둘 중에 null이 아닌 값을 대입한다.

 

- 함수 표현식과 함수 선언식은 서로 비슷한 형식을 가지고 있다.

- 함수 선언식

function 함수명() {
	구현 로직
    };

- 함수 표현식

var 함수명 = function() {
	구현 로직
    };

- 함수 선언식과 표현식의 차이점

=> 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

 

- 콜백 함수란 함수의 파라미터로 함수를 넘기는 것이다.

 

- 가로 표기법을 사용하면 좋은 상황은, 동적인 파라미터를 받아올 때 사용하면 좋다.

 

- Object.keys / Objects.values는 객체의 속성들을 배열로 반환하는 메서드이다.