Intro
본 포스팅은 여기에 올라온 게시글을 바탕으로 작성되었습니다.
파트와 카테고리 동일한 순서로 모든 내용을 소개하는 것이 아닌, 몰랐거나 새로운 내용 위주로 다시 정리하여 개인공부 목적으로 작성합니다.
중간중간 개인 판단 하에 필요하다고 생각될 시, 기존 내용에 추가로 보충되는 내용이 있을 수 있습니다.
Short-Circuit evaluation
논리 연산자를 사용하여 코드를 단축시킬 수 있다.
1) || 연산자 (OR 연산자)
OR 연산자와 피연산자가 다음과 같이 여러개인 경우
let result = value1 || value2 || value3;변수 result에는 왼쪽부터 시작하여 truthy한 값을 찾는다. 만약 truthy한 값을 찾는 다면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다. 만일 마지막까지 발견하지 못할 경우엔 마지막 피연산자를 반환한다.
만약 어떤 값이 Falsy 한 경우 대체하여 사용할 값을 지정할 때 유용하게 사용할 수 있다.
function setName(name) {
if (!name) {
return 'no name';
} else {
return name;
}
}
const name = setName('KG');
// 위의 분기를 다음과 같이 단축할 수 있다.
function setName(name) {
// name이 truthy한 값이 아니라면 no name 할당
return name || 'no name';
}
const name = setName('KG');
2) && 연산자 (AND 연산자)
AND 연산자와 피연산자가 다음과 같이 여러개인 경우
let result = value1 && value2 && value3;변수 result는 왼쪽부터 시작하여 Falsy한 값을 찾는다. 만약 Falsy한 값을 찾는다면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다. 만일 마지막까지 발견하지 못할 경우엔 마지막 피연산자를 반환한다.
주로 특정 값이 유효할 때에만 어떤 값을 조회하는 경우에 유용하다. 특히 React에서 조건부 렌더링을 할때 해당 기법을 자주 사용한다.
function getName(animal) {
if (animal) {
return animal.name;
} else {
return undefined;
}
}
// 위의 분기를 다음과 같이 단축할 수 있다.
function getName(animal) {
// animal이 있다면(Truthy) name 속성 반환
return animal && animal.name;
}
const name1 = getName(); // undefined
const name2 = getName('Lucy'); // Lucy// React에서 조건부 렌더링
const [loading, setLoading] = useState(true);
...
return (
<div>
// 로딩중이라면 '로딩중...'문구를 출력
// 로딩이 끝났다면 loading에서 중단되므로 출력 X
{ loading && <span>로딩중...</span> }
...
</div>
);JS에서 Truthy 와 Falsy한 값
false,0,-0,0n,"",'',null,undefined,NaN등의 값은 모두Falsy값으로 논리연산에서false로 간주된다.- 그 외의 값은 모두
true로 간주된다.
Nullish coalescing operator
null 병합 연산자 ??을 사용하면 보다 짧게 여러 피연산자 중 확정되어 있는 변수를 찾을 수 있다.
const result = a ?? b;변수 result에는 a가 null도 아니고 undefined도 아닌 경우엔 a, 그 외에 경우엔 b가 저장된다.
즉 다음의 의미와 같다.
const result = (a !== null && a !== undefined) ? a : b;null 병합 연산자는 OR 연산자 ||와 상당히 유사하지만 결정적인 차이가 있다.
||은 첫 번째truthy한 값을 반환??은 첫 번째 정의된 값을 반환
그 차이는 다음과 같다.
let height = 0;
const res1 = height || 100; // res1 = 100
const res2 = height ?? 100; // res2 = 0스펙에 추가된 지 얼마 되지 않은 문법이므로 구식 브라우저의 경우 폴리필이 필요할 수 있다. ES2020에서 정식 추가되었다.
Function
자바스크립트에서 함수는 다른 언어와 다르게 특별한 동작을 담고 있는 값으로 취급된다. 따라서 함수의 동작을 실행하기 위해서는 항상 괄호 ()를 붙여 호출해주어야 한다.
function sayHello () {
return 'hello'
}
console.log(sayHello); // 함수자체의 값(= 문자열) 출력
console.log(sayHello()); // 함수의 반환값 출력값으로 취급되기 때문에 다음과 같은 방법으로 함수를 구현할 수 있다.
1) 함수 선언식
function 키워드를 이용하여 함수를 선언하는 가장 기본적인 방식이다. 이때 선언된 함수는 자바스크립트 내장 알고리즘에 의해 정의되기 이전 시점에서도 사용이 가능하다 (호이스팅 된다고 표현한다).
sayHello(); // 'hello'를 정상 출력한다.
function sayHello () {
console.log('hello');
}2) 함수 표현식
함수는 자바스크립트에서 특별한 값 취급이기 때문에 변수에 할당이 가능하다. 다만 이때는 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다. 따라서 그 이후에 함수의 기능을 사용할 수 있다.
sayHello(); // Error!
const sayHello = function () {
console.log('hello');
};
sayHello(); // 'hello'를 정상 출력한다.3) 화살표 함수
이는 함수 선언을 보다 단순하고 간결하게 만들 수 있는 방법이다. 단순화의 용도 외에도 this와 관련된 이슈가 있는데 해당 내용은 추후에 다루도록 하자.
const sayHello = () => console.log('hello');
// 본문이 여러 줄일 경우 중괄호로 감싸준다.
const multiSayHello = () => {
console.log('hello');
console.log('hello');
}
- 함수의 리턴값은 별도로
return키워드를 통해 선언하지 않는다면 항상 undefined를 반환한다.
- 다만 화살표 함수의 경우 중괄호가 없는 경우엔
return키워드 없이도 리턴값을 반환할 수 있다.const setResult = (str) => `Result = ${str}`; const result = setResult('hi'); console.log(result); // 'hi'가 출력된다.
References
