자바스크립트 JS 공부 #6 삼항연산자, Truthy Falsy, 비구조할당, 단축 논리연산자

알아두면 좋은 js 문법

삼항 연산자 - ? - : -

조건문 ? true일때 실행 : false일때 실행

const arr =[1,2];

let text = arr.length === 0 
 ? '배열이 비어있습니다' 
 : '배열이 비어있지 않습니다.' ;
 
 console.log(text);
 
 //-----
 
 const condition1 = false;
const condition2 = false;

const value = condition1 
 ? '와우!' // 컨디션1이 트루이면
 :condition2 // 컨디션1이 폴스이면 컨디션2를 확인해서~
  ? '블라블라'
  : '뿡'

//가능은 한데 이런코드쓰지말고 이프문 써

Truthy Falsy

각각 트루같음 펄스같은~ 문법이 아니라 개념

function print(person){
   // if(person === undefined || person === null){ //널 채킹하는 코드
    if(!person){ //이렇게 하면됨 - 언디파인과 널은 falsy인 값이라서 !붙이면 true를 반환
        return; //언디파인이거나 펄슨이 비어있으면 아무것도 안하겠다(오류안남)
    }
    console.log(person.name);
}

const person0 = {
    name : 'John'
};
const person = null;

print();
print(person);


//---

const val = null;

const truthy0 = val ? true : false;
const truthy = !!val; //위에랑 같음 !!두개하면 truthy한 값이 true로 전환됨

console.log(truthy);

undefine,null,0,'',NaN --> 다 Falsy 한 값
외의 나머지 --> 다 Truthy한 값

!하면 반대값이 나온다

단축 평가 논리 계산법

논리연산자 사용해서 코드 짧게 쓰기

true && true // true
true && false // false
true || true // true
true || false // true

!3 //false 

const dog = {
    name:'멍멍이'
};

function getName(animal){
    return animal && animal.name; //정의안되어있으면 언디파인출력 값있으면 이름 출력
}

print( getName(dog) ); // 멍멍이 출력
print( getName() ); // 언디파인 출력

console.log( true && 'hello'); //앞이 트루나 트루시한게 오면 뒤의 값을 출력
console.log( 'bye' && 'hello'); //앞이 트루나 트루시한게 오면 뒤의 값을 출력
console.log( false && 'hello'); // 앞에 있는 값이 falsy한값이면 그 본인을 (false) 출력
console.log( null && 'hello'); // null 출력


const object0 = null;
const object = {nam:'오브제'};

const nam = object && object.nam;
console.log(nam);

&& 사용법

const namelessDog = {
    name: '',
}

function getName(animal){
    const name = animal && animal.name;
    return name || '이름이 없는 동물입니다';

}

const namm = getName(namelessDog);
console.log(namm);


console.log(false || 'hello'); //앞이 거짓이어도 뒤에 값이 있으면 그 값출력!
console.log('' || '이름없다');
console.log(null || '널이다');
console.log( 1 || '음?'); // 1이 트루시해서 1을 출력 뒤에 안본다
console.log( true || '여기안본다'); // 앞이 트루이면 앞을 출력하고 뒤에 안본다

//함수의 기본 파라미터 
const calculateCircleArea = (r = 1) =>{ //이렇게 해두면 r을 안넣으면 1로 계산함 기본값 설정!
    return Math.PI * r * r ;
}

const area = calculateCircleArea();
console.log(area);

//조건문 간단하게 

function isAnimal(text){
    const animals = ['고양이','개','거북이','너구리'];
    return animals.includes(text);
}

console.log('개'); //true
console.log('노트북'); //false

function getSound(animal){
    // switch(animal){
    //     case '개':
    //     case '고양이':
    //     case '참새':
    //     case '비둘기':
    // } 이게 더 길다 

    const sounds = {
        개: '멍멍!',
        고양이:'애옹~',
        참새: '짹짹',
        비둘기: '구구구구'
    };
    return sounds[animal] || '...?'
}

console.log(getSound('개'));
console.log(getSound('비둘기'));
console.log(getSound('인간'));

function makeSound(animal){
    const tasks = {
        개: () =>{
            console.log('멍멍!')
        },
        고양이(){
            console.log('애옹')
        },
        비둘기(){
            console.log('구구구')
        },
    }

    const task = tasks[animal];
 
    if(!task){
        console.log(',,,?');
        return;
    }
    task();
}

|| 사용법

주로 어디 값이없을 때 그거 대신에 이거 사용할래! 할때 유용한다

비구조할당

const objc = {a:1,b:2};

function print({a,b = 2}){ //기본값 설정할 떄 = 쓰면됨 -함수의 파라미터에도 비구조할당 가능
    console.log(a);
    console.log(b);
} 
const {a,b = 2} = objc; //기본값 설정할 떄 = 쓰면 비구조할당 가능
console.log(a);

const animal = {
    name: '라베',
    type: '랫서판다'
}

const {name: nickname} = animal;

console.log(nickname); //라베 출력
console.log(animal);

const array =[1];

const [one1, two1 ] = array; //배열에도 비구조할당 가능 - 위에 1,2 되어있으면 two1은 2로 출력
const [one, two = 2] = array; //배열에도 비구조할당 가능

console.log(one); //1
console.log(two); //2

배열도 비구조할당가능

const deepObject = {
    state: {
        information: {
            name: 'ony',
            languges: ['korean','english','japanese']
        }
    },
    vall: 5
}

// const { name, languges} = deepObject.state.information; //깊은 객체에서 빼와서 저장
const { name, languges: [first,second]} = deepObject.state.information; //깊은 객체에서 빼와서 저장
const{ vall } = deepObject;

/* 이렇게 할 수도 있는데 위에가 더 짧음
const {
    state: {
        information: {
            name, languges: [firtstLang, secondLang]
        }
    },
    vall
} = deepObject;
 */

const extracted = { // 이런식으로 선언하면 
    name, 
    // languges,
    first,
    second, 
    vall
}
console.log(extracted); // 여기서 위꺼 출력됨

객체의 깊숙한 곳에 있는 것을 꺼내는 방법

spread와 rest - ... 사용

spread 펼치다 퍼뜨리다

const slime ={
    name: '슬라임'
}
const cuteslime = {
    ...slime, //이렇게하면 슬라임에 있던 것들이 다 넘어옴!
    attribute: 'cute'
}
const purplecuteslime = {
    ...cuteslime,  //이렇게하면 큐트슬라임에 있던 것들이 다 넘어옴!
    color: 'purple'
}

const greencuteslime = {
    ...purplecuteslime,
    color: 'green' //이렇게 뒤에 선언하면 컬러는 그린으로 나온다 !

}
//이렇게 하면 세가지 슬라임은 안에 객체의 개수가 다름, 처음껀 이름만 뒤에꺼는 다른 값도 있음!


const animals =['랫서판다','고양이','양']
const anotherAnimals =[...animals,'개',...animals] //배열에서도 사용가능 - 여러번하면 여러번 들어감 ! 

console.log(anotherAnimals); //하면 애니멀에 개 추가된 배열 

rest - 퍼져있는거를 다시모아는 역할

객체,배열,함수의 파라미터에서 사용가능함

const purplcuteslime = {
    ...cuteslime,  //이거는 스프래드
    color: 'purple'
}

const {color, ...rest} = purplcuteslime;
console.log(rest); //하면 앞에있는 컬러값을 제외한 다른 거를 의미함! 

const {attribute, ...slim} = cuteslime; //이름은 무조건rest라고 안해도됨
console.log(slim); //이름만 출력함


//배열에서 쓰기 
const numbers =[0,1,2,3,4,5,6];

const [onee,twoo, ...restt] = numbers; //rest는 맨마지막에 와야함 맨앞에는 못옴 !
console.log(onee); //0
console.log(twoo); //1
console.log(restt); //[2,3,4,5,6]

//파라미터에서 쓰기
// function sum(a,b,c,d,e,f,g){ //이러면 g가 언디파인이라서 오류남
function sum(...rest){ //하나의 배열로 받음
    // return a + b + c + d + e + f + g;
    return rest.reduce((acc,current) => acc + current, 0);  //리듀스 배열내장함수 쓰면 가능 - 약간 링크드리스트같다
}

console.log(sum(1,2,3,4,5,6)) 
console.log(sum(1,2,3,4,5,6,7,8))  //배열인자 개수 상관없이 합구하기가능 (rest로 파라미터를 받고 reduce함수를 사용해서)

const numms =[1,2,3,4,5,6,7,8];
console.log( sum(...numms)); // 이렇게 함수인자에서 !스프래드! 쓸 수 있음!

//함수인자에서 스프래드 쓰기

function subtract(x,y){ //이거는 함수의 파라미터 !
    return x - y;
}

const nums = [1,2];
const result = subtract(...nums); //이거는 함수를 사용할떄 넣는거 인자 !

배열크기 상관없이 인자중에 가장 큰 값 출력하기

function max(...nums) {
    return nums.reduce( // accumulator - 누적된 값을 의미 /current - 각 원소들을 의미하는데 맨처음에는 numbers의 첫 항목1 
      // acc 이 current 보다 크면 결과값을 current 로 하고
      // 그렇지 않으면 acc 가 결과값
      (acc, current) => (current > acc ? current : acc),  //시행될 함수
      nums[0] //맨처음 acc가 이거 
    );
  }
  
  const resul = max(1, 2, 3, 4, 10, 5, 6, 7);
  console.log(resul);

  //scope 범위 - 문법이라기보다는 이렇게 작동하구나~ 이해
// global 전역 function 특정 함수 내에 block 이프문같은 {} 블럭안에서만 사용가능

var,const의 차이

scope 범위 - 문법이라기보다는 이렇게 작동하구나~ 이해
global 전역 - function 특정 함수 내에 block 이프문같은 {} 블럭안에서만 사용가능

const valuu = 'hello!';

function myFunction() {
  const valuu = 'bye!';
  const anotherValue = 'world';
  function functionInside() {
    console.log('functionInside: ');
    console.log(valuu); //함수에 있는 값
    console.log(anotherValue); //함수에 있는 값
  }
  functionInside();
}


myFunction()
console.log('global scope: ');
console.log(valuu); //글로벌에 있는 값
console.log(anotherValue); //함수밖에는 선언되어있지않아서 언디파인으로 나옴

const value = 'hello!';

function myFunction() {
  const value = 'bye!';
  if (true) {
    const value = 'world'; //블록안에서만 벨류값
    console.log('block scope: ');
    console.log(value); //블럭안 월드 출력
  }
  console.log('function scope: ');
  console.log(value); //함수안 바이 출력
}

myFunction();
console.log('global scope: ');
console.log(value); //글로벌 헬로 출력

블럭의 변수

var value = 'hello!';

function myFunction() {
  var value = 'bye!';
  if (true) {
    var value = 'world';
    console.log('block scope: ');
    console.log(value); //블럭안 월드 출력
  }
  console.log('function scope: ');
  console.log(value); // 함수아니고 블럭안 월드가 출력됨 ! ! 함수단위 스코프임!!
}

myFunction();
console.log('global scope: ');
console.log(value); //글로벌 헬로 출력

//Hoisting  자바스크립트에서 아직 선언되지 않은 함수/변수를 "끌어올려서" 사용 할 수 있는 자바스크립트의 작동 방식

myFunction();

function myFunction() {
  console.log('hello world!');
}
// myFunction 함수를 선언하기 전에, myFunction() 을 호출해주었습니다. 함수가 아직 선언되지 않아도 코드는 정상적으로 작동 > 그래도 웬만하면 이렇게 하지않기

var는 이상하게 작동