Js 기초 2

삼항연산자

• const adult = age >= 20 ? "성년" : "미성년";
  • 위의 내용 중 age >= 20 이 true 일 경우 "성년", false 일 경우 "미성년"이 adult의 값으로 주입된다

truthy 와 falsy

• js 에선 boolean 이 아닌 값의 경우 truthy(참으로 평가되는 값), 또는 falsy(거짓으로 평가되는 값)으로 구분한다
• 조건문이나 반복문 같은 제어문의 조건식에서는 boolean값으로 평가되는 문맥을 사용해야 하는데, 이 때 truthy값은 true로, falsy 값은 false로 암묵적 형 변환이 일어난다.
• falsy값 이외의 모든 값들은 true 기 때문에 경우의 수가 적은 falsy만 알아두면 좋다
  • fasly의 종류
    • false
    • null
    • undefined
    • 0
    • NaN
    • '' (공백)

console.log("0 == false : " + (0 == false)); // "0 == false : true"

=== 는 엄격하게 비교합니다.
console.log("0 === false : " + (0 === false)); // "0 === false : false"

console.log("0 == '' : " + (0 == '')); // "0 == '' : true"

console.log("0 == null : " + (0 == null)); // "0 == null : false"

console.log("undefined == null : " + (undefined == null)); // "undefined == null : true"

console.log("NaN == false : " + (NaN == false)); // "NaN == false : false"

console.log("NaN == null : " + (NaN == null)); // "NaN == null : false"

"== undefined test =="

let a;
console.log("a == undefined : " + (a == undefined));  // "a == undefined : true"

"== NaN test =="

console.log("10 * 'a' : " + (10 * 'a')); // "10 * 'a' : NaN"

 

 

배열 전개연산자

• 새로운 배열을 선언할 때 해당 배열 내에 기존의 배열을 주입할 수 있다.
  • const arr = [10, 20, 30];
  • const arr2 = [0, ...arr, 40, 50];
    • arr2 = [0, 10, 20, 30, 40, 50];

배열 구조분해할당

• 변수의 우항 값으로 배열을 넣고 좌항 값으로 [변수1, 변수2, ...변수들] 의 형식으로 넣어줄 경우 구조분해할당이 이루어진다
  • const [num1, num2, ...extra] = arr2;
    • num1 = 0
    • num2 = 10
    • extra = [20, 30, 40, 50]
• 쉼표 사이를 공백으로 두고 사용함으로써 특정 값을 건너뛴다
  • const [num1, , num3, ...extra] = arr2;
    • num1 = 0
    • num3 = 20
    • extra = [30, 40, 50]

배열 구조분해할당, 함수

• 함수를 선언할 경우 정해진 수의 인자를 받아 함수를 실행한다

function fun1(a, b, c) {
	console.log(a, b, c);
}

• fun1(a, b, c); 의 형식으로 위의 함수를 호출할 경우 a, b, c의 값이 출력된다.
• fun1(...arr); 와 같이 구조분해할당을 활용할 수도 있다.
• fun1(...arr2); 와 같이 함수의 인자 수를 넘어가는 경우 첫번째부터 최대인자수, 위의 경우 첫번째부터 세번째까지의 배열값이 활용된다. ( 0, 10, 20)

객체 전개연산자

• 아래와 같은 객체가 있다고 했을 경우

const obj = {
    age: 12,
    name: "Paul",
    gender: "남성"
};

• 아래와 같은 방식으로 객체 전개연산자를 활용할 수 있다

const obj2 = {
    ...obj,
    age: 13,
    hobby: "수영"
};

 

객체 구조분해할당

• 아래와 같은 방법으로 객체 구조분해할당이 가능하다
  • 각각 obj2 객체 내에 있는 gender, name, age 라는 키값과 연동하며, 변수명으로 키값이, 변수값으로 value값이 들어간다
  • 선언할 때 키값에 : 를 붙이면 원하는 변수명으로 조정이 가능하다

const {
    gender,
    name,
    age:나이
} = obj2;

 

객체 구조분해할당 없이 변수 선언 + 함수를 활용하여 변수 주입이 가능하다

function fun2(i) {
    console.log("gender : " + i.gender);
    console.log("name : " + i.name);
    console.log("age : " + i['age']);
} // 함수 선언

fun2(obj2);
// 출력값
"gender : 남성"
"name : Paul"
"age : 13"

 

객체 구조분해할당 + 함수 를 활용한 변수 주입

function fun2_2({gender, name, age:나이}) {
    console.log("gender : " + gender);
    console.log("name : " + name);
    console.log("나이 : " + 나이);
} 
fun2(obj2);

// 출력값
"gender : 남성"
"name : Paul"
"age : 13"