벨로퍼트와 함께하는 모던 자바스크립트 입문강의가 끝나서 다음 강의로 넘어왔다. 이 강의는벨로퍼트와 함께 하는 모던 자바스크립트: 알고 있으면 유용한 JS 문법이다. 이 글은 강의를 듣고 정리한 내용이다.
📌 01. 삼항 연산자
condition ? true : false 의 형태!
const array = [];
let text = array.length === 0
? '배열이 비어있습니다.'
: '배열이 비어있지 않습니다.';
console.log(text);삼항 연산자를 보통 위와 같이 하나의 조건을 비교할 때 주로 사용하고 아래와 같이 여러개를 비교할 때 사용하는 것은 비추천! --> if문 사용을 더 추천한다.
const condition1 = false;
const condition2 = false;
const value = condition1
? '와우'
: condition2
? 'blabla'
: 'foo'
console.log(value);📌 02. Truthy와 Falsy
문법이라기 보단 개념에 가까운 것
function print(person) {
if (person === undefined || person === null) {
return;
}
console.log(person.name);
}
const person = null;
print(person);다음과 같은 코드에서 person === undefined || person === null 부분을 !person 하나로 바꾸어 쓸 수 있음
Javacript에선 undefined와 null은 falsy값으로 해서 false로 간주함
falsy한 값들 종류
console.log(!undefined); // true
console.log(!null); // true
console.log(!0); // true
console.log(!''); // true
console.log(!NaN); // true
console.log(!false); // true이것들을 제외한 값은 모두 truthy한 값
삼항연산자로 value가 truthy 한지 falsy한지 알아볼 수도 있지만 !!value 를 통해서도 알 수 있다.
📌 03. 단축 평가 논리 계산법
논리 연산자를 이용해서 코드를 더 짧게 쓰는것
const dog = {
name: '멍멍이'
};
function getName(animal) {
if (animal) {
return animal.name;
}
return undefined;
}
const name = getName(dog);
console.log(name);다음과 같은 코드가 있다고 하였을 시 더 짧게 쓰는 방법은 아래와 같음
const dog = {
name: '멍멍이'
};
function getName(animal) {
return animal && animal.name
}
const name = getName(dog);
console.log(name);이것이 작동하는 이유는 아래에서 설명!
console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0&& 연산자는 앞에 true 혹은 truthy한 값이 오면 결과는 오른쪽 값이 되고, false 혹은 falsy한 값이 오면 결과는 앞에있는 값이 된다.
나중에 리액트에서 조건문 렌더링 할 때 유용하게 사용할 수 있다.
--> 주로 특정값이 유효할 때만 어떤 값을 조회해야 하는 상황에 쓰임(아래 예제)
const object = {
name: 1
};
const name = object && object.name;
console.log(name);&& 말고 ||을 이용하여 코드를 줄일 수 있는 방법이 있음
const nameless = {
name: '',
};
function getName(animal) {
const name = animal && animal.name;
if(!name) {
return '이름이 없는 동물입니다.';
}
return name;
}
const name = getName(nameless);
console.log(name);이것을 ||을 이용해 줄이면 다음과 같음
const nameless = {
name: '',
};
function getName(animal) {
const name = animal && animal.name;
return name || '이름이 없는 동물입니다.';
}
const name = getName(nameless);
console.log(name);||
console.log(false || 'hello');
console.log('' || '이름없다');
console.log(null || '널이다~');
console.log(undefined || 'defined 되지 않았다!');
console.log(1 || '음?');
console.log(true || '여기 안본다..');
console.log('와아' || '여기 안봐요');
console.log([] || '노노');
||의 경우 앞에 오는 값이 false이면 결과값이 오른쪽 값이 되고, 앞에 오는 값이 true이면 결과 값이 앞의 값이 된다.
||연산자는 어떠한 값이 없을 때 그거 대신에 이거 사용할래~ 와 같은 상황에 유용하게 쓰인다.
📌 04. 함수의 기본 파라미터
함수를 호출 할때 넣어야할 파라미터를 넣지 않았을 때 기본값으로 사용할 값을 지정하는것을 의미
단축 평가 논리 계산으로 처리하는 방법
function calculateCircleArea(r) {
const radius = r || 1
return Math.PI * radius * radius;
}
const area = calculateCircleArea();
console.log(area);기본 파라미터 지정 하는방법
// function calculateCircleArea (r = 1) { return Math.PI * r * r;} 도 가능!
const calculateCircleArea = (r = 1) => Math.PI * r * r;
const area = calculateCircleArea();
console.log(area);📌 05. 조건문 더 스마트하게 쓰기
function isAnimal(text) {
return (
text === '고양이' || text === '개' || text === '거북이' || text === '너구리'
);
}
console.log(isAnimal('개'));
console.log(isAnimal('노트북'));다음과 같은 조건문이 있을 때 조금 더 깔끔하게 쓰는 방법으로 내장함수인 includes를 사용함
// const isAnimal = text => ['고양이', '개', '거북이', '너구리'].includes(text);
function isAnimal(text) {
const animals = ['고양이', '개', '거북이', '너구리'];
return animals.includes(text);
}
console.log(isAnimal('개'));
console.log(isAnimal('노트북'));주어진 값에 따라 다른 결과물을 반환
function getSound(animal) {
if (animal === '개') return '멍멍!';
if (animal === '고양이') return '야옹~';
if (animal === '참새') return '짹쨱';
if (animal === '비둘기') return '구구 구 구';
return '...?';
}
console.log(getSound('개'));
console.log(getSound('비둘기'));
console.log(getSound('인간'));다음과 같은 코드를 switch 문으로 작성하여도 지저분함. --> 객체를 활용해 깔끔하게 변경할 수 있음
function getSound(animal) {
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();
}
makeSound('개');
makeSound('고양이');
makeSound('비둘기');조건에 따라 해야하는 작업이 달라진다면 객체를 활용하는 것이 보기 좋은 코드를 만들어 낼 수 있다.
📌 06. 비구조화 할당
객체 비구조화 할당
const object = { a:1 };
function print({a, b = 2}) {
console.log(a);
console.log(b);
}
print(object);비구조화 할당의 경우에도 함수 파라미터로 기본값을 지정하게 되면 값이 없어도 기본값이 들어가서 출력됨
const animal = {
name: '멍멍이',
tpye: '개'
};
const {name: nickName} = animal;
console.log(nickName);
console.log(animal);비구조화 할당 시 기존 animal이 갖고 있던 name이 아닌 nickName으로 꺼내서 사용할 수도 있음
기존 animal이 갖고 있던 name이 바뀌는 것은 아님!
배열 비구조화 할당
const array = [1];
const [one, two = 2] = array;
console.log(one);
console.log(two);비구조화 할당 시 배열은 대괄호를 이용!
객체의 깊숙한 곳에 있는 값 꺼내기
비구조화 할당 2번 하는 방법
const deepObject = {
state: {
information: {
name: "velopert",
languages: ["korean", "english", "chinese"]
}
},
value: 5
};
const { name, languages } = deepObject.state.information;
const { value } = deepObject;
const extracted = {
name,
languages,
value
};
console.log(extracted);비구조화 할당 1번 하는 방법
const deepObject = {
state: {
information: {
name: "velopert",
languages: ["korean", "english", "chinese"]
}
},
value: 5
};
const {
state: {
information: {
name, languages: [firstLang, secondLang]
}
},
value
} = deepObject;
const extracted = {
name,
firstLang, secondLang,
value
};
console.log(extracted);비구조화 할당을 1번 하는 방법의 경우 자칫하면 코드가 더러워 보일 수 있기 때문에 상황에 맞게 사용하기
