TIL 17_JavaScript + α

정리했던 JavaScript에서 다루지 않았던 부분, 이해하지 못했던 부분 그리고 예시 문제까지 정리해보자!

함수 데이터 반환

함수에서 많이 쓰는 return의 개념을 정리해본다.

수의 반환(return)

모든 함수는 반환(return)을 한다. 함수는 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있다.

let result = noParameter(); // result라는 변수에 noParameter 함수 호출한 결과값을 할당
console.log(result); // result에 할당된 결과값을 콘솔로그에 출력

console.log(noParameter()); //이처럼 함수를 호출한 것을 바로 console.log()로 바로 확인 가능

모든 함수가 return을 포함해야 하는 건 아닙니다. 함수 내부에 return 키워드를 생략할 수도 있습니다. 하지만 이 경우에도 함수는 무언가를 반환하고 있다. 함수가 반환을 생략하면 undefined 라는 값을 반환한다.

function consoleSuccess(month, name) {   
  console.log(month, name); 
}  
let result = consoleSuccess("3", "김개발");
console.log("consoleSuccess 호출 값은" + result);

return 함수 정의

return이라는 것은 함수를 호출했을 때, 함수가 값을 반환한다는 뜻이다.

function multiplyTen(myNumber) {
  return 10 * myNumber;
}

위의 multiplyTen 함수의 정의 → 받은 인자에 10을 곱하여 반환한다.

multiplyTen(3); 
multiplyTen(6); 
multiplyTen(12);

정의된 함수에 인자를 통해 호출이 가능하다.

---

배열

배열에서 최소값, 최대값 구하기

replit에서 푼 배열에서 최소값, 최대값 구하는 문제를 토대로 정리한다.

1. 먼저 Math.max(), Math.min() 알아보기

const maxValue = Math.max(1, 2, 3, 4, 5);
const minValue = Math.min(1, 2, 3, 4, 5);

document.write('Max : ' + maxValue); // Max : 5
document.write('Min : ' + minValue); // Min : 1

Math.max()와 Math.min() 함수는 파라미터로 입력받은 숫자들 중 최대값과 최소값을 구해서 리턴하는 함수입니다.

2. Function.prototype.apply() 사용하기

const arr = [1, 2, 3, 4, 5];
const maxValue = Math.max.apply(null, arr);
const minValue = Math.min.apply(null, arr);

document.write('Max : ' + maxValue); //Max : 5
document.write('Min : ' + minValue); //Min : 1

Function.prototype.apply() 메소드는 자바스크립트에서 함수를 호출하는 여러가지 방법 중의 하나이다.

apply() 메소드는 파라미터로 함수에서 사용할 this객체와 호출하는 함수로 전달할 파라미터를 입력받는다. 이 때 apply() 메소드의 2번째 파라미터(호출하는 함수로 전달할 파라미터)는 배열 형태로 입력한다.

위 예시 코드를 보면, Math.max 함수에 .apply() 메소드를 호출하게 된다. 그런데 Math.max 함수 내에 쓰이는 this 객체는 필요가 없으니 null로 전달하고, 함수에 전달할 두 번째 파라미터는 다섯개의 숫자(1,2,3,4,5)를 배열로 선언하여 전달한다.

Math.max(), Math.min() 함수에 배열의 원소들을 풀어서 전달하기 위해 apply() 메소드를 활용한 것!

3. Spread Syntax(전개 구문) 사용하기

const arr = [1, 2, 3, 4, 5];
const maxValue = Math.max(...arr);
const minValue = Math.min(...arr);

document.write('Max : ' + maxValue); //Max : 5
document.write('Min : ' + minValue);//Min : 1

전개 구문은 ES6 문법으로 ... 이렇게 점 3개로 표현하고, 객체나 배열의 원소들을 하나씩 꺼내어서 펼쳐서 리턴한다. 자세한 내용은 밑에서 다시 설명!

즉, Math.max(...arr)와 같이 작성해주면 실제로는 Math.max(1, 2, 3, 4, 5)와 같이 실행되게 되는 것!
가독성이 좋고 코드가 간단해지기 때문에 이 방법을 사용하는 것을 선호한다.

---

전개 구문(Spread Syntax)

전개 구문(Spread Syntax)는 ES6에서 새로 추가된 문법이다.
간단하게 문법 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 준다.

• 기본 문법

// 펼칠 대상이 객체인 경우
{...obj}


// 펼칠 대상이 배열인 경우
[...arr]
// 혹은
{...arr}

• 객체일 경우

const myObject1 = {
    laptop: 'MacBook Pro',
    tablet: 'iPad Pro 11'
}

const myObject2 = {...myObject1};

console.log(myObject1); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}
console.log(myObject2); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}

console.log(myObject1 === myObject2); // false

위 코드 중 6번째 줄, myObject2에 할당하는 값을 보면 전개 구문을 활용하고 있다.

앞에 점 3개를 붙여서 myObject1을 펼친 것이다.

그러면 당연히 myObject2는 myObject1과 똑같은 모양의 프로퍼티를 갖게 되지만, 마지막 줄에서 보는 것과 같이 두 객체를 비교할 경우 false가 출력되면서 서로 다른 주소 값을 가진 독립적인 객체임을 확인할 수 있다.

• 배열일 경우

const myArray1 = ['Canna', 'Cuzz', 'Faker', 'Teddy', 'Effort'];

const myArray2 = [...myArray1];

console.log(myArray1); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]
console.log(myArray2); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]

console.log(myArray1 === myArray2); // false

배열도 동일하게 전개구문을 활용해서 배열을 펼쳐 새로운 배열을 만들 수 있고, 두 배열을 비교하면 false가 출력되면서 서로 다른 독립적인 배열이 되는 모습도 확인할 수가 있다.

• 객체나 배열 합치기

const item = { type : 'shirts' , size : 'M' };
const detail = { price : 20000, made : 'Korea', gender : 'Male' };

만약 이 두 객체를 합치고 싶다. 어떤 식으로 진행해야 할까?

const shirt1 = Object.assign(item, detail); 

assign()을 쓴 것도 좋은 예시이다. 하지만 이 쯤에서 눈치 빠른 사람들이라면 눈치 챘겠지만.. 지금까지 배운 전개 구문을 통해서 간단하게 코드를 짤 수 있다!

const shirt1 = {...item, ...detail}; 

{}(중괄호)를 통해서 새로운 객체를 생성하고 전개 구문을 사용해서 item과 detail에 있는 모든 키와 벨류를 가져올 수 있다.
또 만약에 shirt1에 있는 price 값을 덮어 씌우고 싶다면

const shirt1 = {...item, ...detail, price : '40000'}; 

기존 객체의 키와 벨류값은 유지한 채 price 값만 업데이트가 가능하다!

---

난수 생성하기

현업에서 많이 쓴다는 난수 생성! 그러나 공부를 하고 보니 역시
( 내가 생각한 언어 !== 컴퓨터 언어 )

Math.random()

자바스크립트에서 난수를 생성하기 위해서는, Math.random() 함수를 사용한다.
이 함수는 0~1(1은 미포함) 구간에서의 난수를 생성한다.

const rand1 = Math.random();
const rand2 = Math.random();
const rand3 = Math.random();

console.log(rand1); //0.48811406647789624
console.log(rand2); //0.7170738416607345
console.log(rand3); //0.6187026896587089

Math.random() 함수는 실행할 때마다 새로운 난수를 생성한다.

범위를 지정한 난수 생성

// (1) 0 <= random < 1
const rand1 = Math.random();
console.log(rand1);

// (2) 0
const rand2 = Math.floor(Math.random());
console.log(rand2);

// (3) 0 <= random <= 10
const rand3 = Math.floor(Math.random() * 11);
console.log(rand3);

// (4) 0 <= random <= 99
const rand4 = Math.floor(Math.random() * 100);
console.log(rand4);

// (5) 0 <= random <= 100
const rand5 = Math.floor(Math.random() * 101);
console.log(rand5);

// (6) 2 <= random <= 5
const rand6 = Math.floor(Math.random() * 4) + 2;
console.log(rand6);

정수인 난수를 생성하기 위해서는 Math.random() 함수와 Math.floor() 함수를 함께 사용한다.

---

🙌 난수 생성 문제

문제

최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return 하는 함수를 구현해주세요.

풀이

function getRandomNumber (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

console.log(getRandomNumber(min.max));

자바스크립트는 공부를 해도해도 새로운 개념들이 화수분처럼 튀어나오는 듯한 기분이다.

참조 📚

---

https://www.youtube.com/watch?v=BUAhpB3FmS4
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
https://hianna.tistory.com/487
https://hianna.tistory.com/454
https://bigtop.tistory.com/62