JavaScript JS学習#6 3項演算子、Truthy Falsy、非構造割当、ショートカット論理演算子
9505 ワード
よく知っているjs文法
3つの演算子-?-:-
条件文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);
undefiner、null、0、"、Nan->ともにFalsy値その他-->すべての真実値
!反対に
評価ロジックアルゴリズムの簡略化
論理演算子によるコードの短縮
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-...使用
敷く
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|Eas≫-関数内のブロックなどの{}ブロックでのみ使用可能
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運転異常Reference
この問題について(JavaScript JS学習#6 3項演算子、Truthy Falsy、非構造割当、ショートカット論理演算子), 我々は、より多くの情報をここで見つけました https://velog.io/@ony_/자바스크립트-JS-공부-6-삼항연산자-Truthy-Falsy-비구조할당-단축-논리연산자テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol