Javascript 50

단축 평가 논리 계산법 (short-circuit evaluation) --> react에서 조건부 랜더링에 사용됨

&&로 값을 비교하기 const dog = { name: '멍멍이' }; function getName(animal){ return animal && animal.name; } const name = getName(dog); console.log(name); //출력값 멍멍이 여기서보면 궁금증이 생깁니다. 분명 형식은 Boolean으로 구분하는것같지만 출력값은 다르게 나오기 때문이죠. 이 특성을 알기 위해 다른 예시를 보겠습니다. console.log(true && 'hello'); console.log(false && 'hello'); console.log('hello' && 'bye' && 'nice'); //출력값 hello false nice &&특성을 보면 만약 비교값중에 무조건 falsy값이 ..

Truthy and Falsy (feat. null checking) --> falsy한 값을 잘 기억해야합니다.

true같은것과 false같은것을 말하는 겁니다. 이 개념을하기전에는 일단 null인지 아닌지 체크하는방법을 알려드리겠습니다. 1. undefined || null 로 확인 function print(person){ if(person === undefined || person === null){ return; } console.log(person.name); } const person = null; print(person); 이것은 코드를 이해하기 쉬운방법이지만, 함수에 들어갈때마다 이러한 조건문으로 확인하는것은 비효율적입니다. 2. 조건문에 !를 넣는 방법 function print(person){ if(!person){ return; } console.log(person.name); } const p..

Javascript/기초 2021.02.01

ES6 Class + Class 상속 (Prototype을 쉽게 이용하기)

class문법을 사용하면 상속을 해야하는상황에서 훨씬 더 쉽게 이용할 수 있습니다. class Animal{ constructor(type, name, sound){ this.type = type; this.name = name; this.sound = sound; } say(){ console.log(this.sound); } } class Dog extends Animal{ constructor(type, name, sound){ super(type, name, sound); } } class Cat extends Animal{ constructor(name, sound){ super('고양이', name, sound); } } const dog = new Dog('개', '멍멍이', '멍멍'); c..

객체 생성자 상속하기 Prototype

function Animal(type, name, sound){ this.type = type; this.name = name; this.sound = sound; } Animal.prototype.say = function(){ console.log(this.sound); } function Dog(name, sound){ Animal.call(this, '개', name, sound); } function Cat(name, sound){ Animal.call(this, '고양이', name, sound); } Dog.prototype = Animal.prototype; Cat.prototype = Animal.prototype; const dog = new Dog('멍멍이', '멍멍'); const ..

객체 생성자 Prototype

주로 객체를 선언할때는 대문자부터 시작하고, new라는 키워드를 이용합니다. function Animal(type, name, sound){ this.type = type; this.name = name; this.sound = sound; this.say = function(){ console.log(this.sound); } } const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); cat.say(); 여기서 비효율적인거는, 새로운 Animal을 만들때마다 새로운 함수를 만든다는 겁니다. 함수를 보면 내용이 똑같은걸 알 수 있습니다. sound와 똑같은 데이터를 사용하는데 두번이나 선..

Javascript 배열 내장함수(reduce) 숫자와 문자 다루기

1. 배열의 총 합 구하기 (숫자) 0은 초기 accumulator가 됩니다. accumulator는 누적된 값을 의미합니다. const numbers = [1,2,3,4,5]; const sum = numbers.reduce((accumulator, current)=> accumulator+current , 0); console.log(sum); //출력값 15 소스코드 해석: accumulator은 초기값이 0 으로시작하고 current는 배열의 그 다음값을 의미합니다. 그래서 0+1은 1이되고, accumulator값은 1이 됩니다. 다음 accumulator은 1이되고, current는 2가 되어서 1+2 =3 이됩니다. 다음 accumulator은 3이되고, current는 3이 되어서 3+3 ..

Javascript/배열 2021.02.01

Javascript 배열 내장함수(shift, pop, unshift, push, concat, join)

1. shift shift만 선언해도 왼쪽부터 값이 빠집니다. const numbers = [1,2,3,4,5,6,7,8]; const value = numbers.shift(); numbers.shift(); numbers.shift(); numbers.shift(); console.log(value); console.log(numbers); //출력값 1 [ 5, 6, 7, 8 ] 즉, shift는 앞에서부터 원소값을 하나씩 꺼내는것을 의미합니다. 원소값이 없어질때까지 선언후에 계속 shift를 선언해도 "[ ]" 비어있는 배열을 출력합니다. 에러가 생기지 않습니다. 2. pop shift랑 비슷하지만, shift와 달리 오른쪽부터 값이 빠집니다. const numbers = [1,2,3,4,5,6,..

Javascript/배열 2021.01.31

Javascript 배열 내장함수(filter, splice&slice)

1.filter 특정 조건에 만족하는 값을 찾아서 그 원소들을 가지고 새로운 배열로 출력해줍니다. const items=[{ id:1, text: 'hello', done: true }, { id:2, text: 'bye', done: true },{ id:3, text: 'good', done: true },{ id:3, text: 'nice', done: false }]; const tasksNotDone = items.filter(item=>!item.done); console.log(tasksNotDone); //출력값 [ { id: 3, text: 'nice', done: false } ] item=>!item.done 은 item=>item.done===false와 같은 말입니다. 2.spli..

Javascript/배열 2021.01.31

Javascript 배열 내장함수(forEach, map, indexOf, findIndex, find)

1. forEach문 const superheroes = [ '아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지' ] function print(hero){ console.log(hero); } superheroes.forEach(print); //출력값 아이언맨 캡틴 아메리카 토르 닥터 스트레인지 모두 내장되어있는 데이터를 전부 출력할 수 있는 편리한 기능입니다. 또한 더 짧게 만들 수도 있습니다. const superheroes = [ '아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지' ] superheroes.forEach(function(hero){ console.log(hero); }); 더깔끔하게 화살표 함수를 이용할 수 있습니다. const superheroes = [..

Javascript/배열 2021.01.31

Javascript 배열 반복문 (for...of, for...in)

1. for...of 배열안에 있는 값으로 작업을 할 때 사용합니다. const numbers = [10,20,30,40,50]; for(let number of numbers){ console.log(number); } //출력값 10 20 30 40 50 2. for...in 객체에 대한 반복적인 작업을 할때 사용합니다. 우선, 객체출력하는것부터 보여드리겠습니다. const numbers = [10,20,30,40,50]; const doggy = { name: '멍멍이', sound: '멍멍', age: 2 }; console.log(Object.entries(doggy)); console.log(Object.keys(doggy)); console.log(Object.values(doggy)); /..

Javascript/배열 2021.01.31