매개변수 유동성 확보하기
매개변수로 입력받은 숫자의 총합을 구하는 함수를 작성할때, 어떻게 받아와야 다양한 경우에 대응할 수 있는 함수를 만들지 생각하기.
1) 매개변수에 기본형을 지정한다.
function sumUp(num1, num2, num3 = 0) {
return num1 + num2 + num3;
}
console.log(sumUp(1, 3));이때 기본형을 지정한 매개변수는 반드시 맨 마지막에 위치시킨다.
기본형을 지정해주었다는 뜻은 해당 매개변수는 필수가 아닌 선택사항이 되기 때문.
단, 총합을 구해야 하는 경우처럼 매개변수의 갯수가 고정이 아닌 경우 이런 함수는 유연성이 너무 떨어짐.
function greetUser(greetingPrefix, userName = 'user') {
console.log(greetingPrefix + ' ' + userName);
}
greetUser('Hi', 'Kim');
greetUser('Hello');위의 함수도 앞의 예제와 같은 유형이되 문자열 연산의 경우.
2) 매개변수를 배열로 받아온다.
function sumUp2(numbers) {
let result = 0;
for (const number of numbers) {
result += number;
}
return result;
}
console.log(sumUp2([1, 2, 10, 4]));매개변수를 배열로 받아와 for문으로 전체 숫자의 합을 구하는 방법.
3) Javascript의 ... 문법을 사용한다.
function sumUp(...numbers) {
let result = 0;
for (const number of numbers) {
result += number;
}
return result;
}
console.log(sumUp(1, 2, 10, 4, 5));매개변수를 배열로 받아오지 않을 경우 Javascript에서 제공하는 ...문법을 사용하여 갯수에 관계없이 매개변수를 받아올 수 있다.
참고링크 - 자바스크립트 {...} [...] 문법 (비구조화 할당/구조분해 할당)
단, 이 경우 매개변수를 하나의 배열로 전달받으면 덧셈이 의도한대로 실행되지 않는다.
이럴때는 ...문법을 제거하고 1.배열을 매개변수로 받아오도록 수정하거나, 2.배열을 하나의 숫자목록으로 변환하는 방법 중 선택하여 해결할 수 있다.
아래는 2번 방법의 예시.
function sumUp(...numbers) {
let result = 0;
for (const number of numbers) {
result += number;
}
return result;
}
const inputNumbers = [1, 2, 10, 4, 15];
console.log(sumUp(...inputNumbers));함수의 특징
함수는 하나의 객체로 통용됨.
함수도 객체이므로 객체에 속성을 더하듯 함수에도 속성을 더할 수 있음.
브라우저의 개발자모드→console에 아래의 예제를 차례로 입력 후 확인
function add(num1, num2) {
return num1 + num2
}
console.dir(add);
템플릿 리터럴
벡틱을 이용하여 문자열을 처리하는 방법으로 가독성과 유연성 면에서 유리함.
function greetUser(greetingPrefix, userName = 'user') {
// console.log(greetingPrefix + ' ' + userName);
console.log(`${greetingPrefix} ${userName}!`);
}
greetUser('Hi', 'Kim');
greetUser('Hello');참고링크 - Template literals mdn문서
참고링크 - 📚 ES6 템플릿 리터럴 사용법 정리
기본값과 참조값
예제 1
const hobbies = ['Sports', 'Cooking'];
const age = 32;
hobbies.push('Reading');
// hobbies = ['Coding', 'Sleeping']; 배열을 재선언 할 경우 주소값이 바뀌기 때문에 불가능
console.log(hobbies);
// 결과: [ 'Sports', 'Cooking', 'Reading' ]위의 예제에서 상수인 cosnt로 선언한 hobbies배열에 Reading이라는 추가하지만 에러없이 동작하는것을 확인할 수 있다.
이는 const로 선언한 상수에 hobbies배열이 직접 저장되는 것이 아니라 pointer개념이 적용되어 hobbies배열의 메모리 주소값만 저장되기 때문에 가능한 것.
즉, hobbies배열이 가진 값을 변경하더라도 해당 배열의 주소값이 변경되지 않는 이상 상수로 선언해도 아무 문제가 없다.
주석처리한 행처럼 배열을 완전히 새로 재선언할 경우 주소값이 바뀌게 되므로 상수에 저장된 주소값이 변경되는것은 불가능하기에 에러가 발생하게 된다.
2행의 const age = 32의 경우 상수 age에 32의 값을 직접 저장하므로 이 값을 변경하는것은 불가능하다.
다만 pointer가 적용되는 부분을 코드로 직접 확인할 수는 없으므로 헷갈리지 않도록 주의하자.
예제 2
const person = { age: 33 };
function getAdultYears(p) {
p.age -= 18;
return p.age;
}
console.log(getAdultYears(person));실행결과
15
{ age: 15 }위와 같이 매개변수로 받은 객체의 속성값을 변경할 경우 변경한 값이 정상적으로 적용된다.
이 역시 객체의 주소는 변경되지 않았기 때문.
이때 객체의 속성값을 변경하지 않으면서 연산의 결과값을 반환받고 싶을 경우는 아래와 같이 코
드를 변경한다.
function getAdultYears(p) {
return p.age - 18;
}이 경우 속성의 값에 변화를 주지 않으면서 원하는 연산값을 결과로 얻을 수 있다.
간단한 예제이지만 실수할 수 있는 부분이니 주의.
...문법을 사용하여 원본 객체를 유지
function getAdultYears(p) {
p.age -= 18;
return p.age;
}
console.log(getAdultYears({ ...person }));
console.log(person);실행결과
15
{ age: 33 }새로운 객체를 생성하여 그 객체에 getAdultYears함수의 리턴값을 저장하는 형식이므로 원본객체에는 영향을 주지 않는게 가능함.
try-catch문 사용
특정한 오류가 발생할 수 있는 구간에서 에러에 대응하기 위해서 사용.
개발하면서 오류가 발생해야 하는 부분이 있거나 오류마다 다른 대응방식을 갖추기 위해 전체 코드에 try-catch블록을 적용시키지는 않는다.
java에서 사용하는 try-catch문과 동일하게 사용된다고 보면 된다.
- errors.js -
const fs = require('fs');
function readFile() {
try {
const fileData = fs.readFileSync('data.json');
} catch {
console.log('An error occurred!');
}
console.log('Hi there!');
}
readFile();실행결과
An error occurred!
Hi there!좀 더 공부할 것
- ... 문법 사용을 제대로 이해하기 힘듦.
- 템플릿 리터럴이 무엇지 대충은 알겠으나 명확한 개념을 설명하지 못하겠음.
