이러한 속성을 잘 알아두면, 특정 값이 유효할때에만 어떤 값을 조회하는 작업을 해야 할 떄 매우 유용하다.
|| 연산자로 코드 단축시키기
|| 연산자는 만약 어떤 값이 Falsy 하다면 대체로 사용 할 값을 지정해줄 때 매우 유용하게 사용 할 수 있다.
예를 들어서 다음과 같은 코드가 있다고 가정해 본다.
const namelessDog = {
name: ''
};
function getName(animal) {
const name = animal && animal.name;
if (!name) {
return '이름이 없는 동물입니다';
}
return name;
}
const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.
위 코드는 || 연산자를 사용하면 다음과 같이 단축 시킬수 있다.
const namelessDog = {
name: ''
};
function getName(animal) {
const name = animal && animal.name;
return name || '이름이 없는 동물입니다.';
}
const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.
A || B 는 만약 A 가 Truthy 할경우 결과는 A 가 된다. 반면 A가 Falsy 하다면 결과는 B가 된다.
객체가 지니고 있는 값에 대하여 반복을 하고 싶다면 위 함수들을 사용해도 되고, for...in구문을 사용해도 된다.
const doggy = {
name: '멍멍이',
sound: '멍멍',
age: 2
};
for (let key in doggy) {
console.log(`${key}: ${doggy[key]}`);
}
break와 continue
반복문 안에서는 break와 continue를 통하여 반복문에서 벗어나거나, 그 다음 루프를 돌게끔 할수 있다
for (let i = 0; i < 10; i++) {
if (i === 2) continue; // 다음 루프를 실행
console.log(i);
if (i === 5) break; // 반복문을 끝내기
}
i 가 2일땐 continue를 하여 원래 console.log를 해야 하지만 그 코드를 수행하지 않고 바로 3으로 넘어간다.
i가 5일땐 break를 하여 반복문을 종료 시킨다.
연습
numbers라는 배열을 파라미터로 받아서 총합을 구하는 함수를 만들어본다.
function sumOf(numbers) {
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
return sum;
}
const result = sumOf([1, 2, 3, 4, 5]);
console.log(result);
function add(a, b) {
return a + b;
}
const sum = add(1, 2);
console.log(sum);
결과는 3이 된다.
함수를 만들 때는 function 키워드를 사용하며, 함수에서 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 부른다.
함수내부에서 return 키워드를 사용하여 함수의 결과물을 지정 할수 있다.
추가적으로, return을 하게 되면 함수가 끝난다. 만약 다음과 같이 코드가 작성된다면, return 아래의 코드는 호출이 안된다.
추가적으로 return을 하게 되면 함수가 끝난다. 만약 다음과 같이 코드가 작성되있다면, return 아래의 코드는 호출이 안된다.
function add(a, b) {
return a + b;
console.log('호출이 되지 않는 코드!');
}
const sum = add(1, 2);
console.log(sum);
연습
함수를 연습해 보자.
Hello, name!
name이라는 파라미터를 넣으면 콘솔에 'Hello name!'이라는 결과를 출력하는 코드를 작성해보자.
function hello(name) {
console.log('Hello, ' + name + '!');
}
hello('mang');
결과는 다음과 같다.
"Hello, mang!"
console.log를 하게 될때 우리는 문자열을 조합하기 위해서 + 연산자를 사용했다. 이렇게 문자열을 조합 할 때 + 를 사용해도 큰 문제는 없지만, 더욱 편하게 조합을 하는 방법이 있습니다. 바로 ES6의 템플릿 리터럴이라는 문법을 사용하는 것이다.
es6란?
ES6 는 ECMAScript6 를 의미하며, 자바스크립트의 버전을 가르킵니다. ES6는 2015년에 도입이 되었습니다. ES6 는 ES2015 라고 불리기도 합니다. 그리고 2015년 이후에 계속해서 새로운 자바스크립트 버전이 나오고 있습니다. ES7(ES2016) ES8(ES2017) ES9(ES2018) ES10(ES2019).. 새로운 자바스크립트 버전이 나올때마다 새로운 문법이 소개됩니다.
브라우저 버전에 따라 지원되는 자바스크립트 버전이 다릅니다. 하지만, 보통 웹 개발을 할 때에는 Babel 이라는 도구를 사용하여 최신 버전의 자바스크립트가 구버전의 브라우저에서도 실행되도록 할 수 있습니다. (정확히는, 최신버전 자바스크립트를 구버전 형태로 변환하는 작업을 거칩니다.)
템플릿 리터럴을 사용하여 구현을 해보자.
function hello(name) {
console.log(`Hello, ${name}!`);
}
hello('mang');
점수를 성적등급으로 변환하기
이번에는 점수가 주어졌을 때, A, B, C, D, F 등급을 반환하는 함수를 만들어 보자
function getGrade(score) {
if (score === 100) {
return 'A+';
} else if (score >= 90) {
return 'A';
} else if (score === 89) {
return 'B+';
} else if (score >= 80) {
return 'B';
} else if (score === 79) {
return 'C+';
} else if (score >= 70) {
return 'C';
} else if (score === 69) {
return 'D+';
} else if (score >= 60) {
return 'D';
} else {
return 'F';
}
}
const grade = getGrade(90);
console.log(grade);
grade가 90일때는 결과가 A가 된다.
화살표 함수
함수를 선언하는 방식중 또 다른 방법은 화살표 함수 문법을 사용 하는 것이다.
const add = (a, b) => {
return a + b;
};
console.log(add(1, 2));
function키워드 대신에 =>문자를 사용해서 함수를 구현했는데, 화살표 좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 들어온다.
그런데, 만약 위와 같이 코드 블록 내부에서 바로 return을 하는 경우는 다음과 같이 줄여서 쓸 수도 있다.
const add = (a, b) => a + b;
console.log(add(1, 2));
아까는 만들었던 getGrade함수처럼 여러줄로 구성되어 있는 경우에는 코드 블록을 만들어야 한다.
