스터디 포스트 >  웹 개발 실전 프로젝트

Javascript 부시기 - 2

조재홍 멘토
이로운 개발자가 되고 싶은 조재홍입니다.

웹 개발 실전 프로젝트 스터디 - 1주차

 
💡
Javascript 에 대해 알아보기
 

181. 참조 타입과 동일성 테스트

배열에서 ===== 의 역할

  • 배열에서 삼중/이중 등호 연산자는 배열의 값을 비교하지 않는다.
    • 메모리에서 참조(reference)되는 값을 비교한다.
    • 화살표가 향하는 개념
  • 배열의 비교는 변수 자체에 저장된 콘텐츠가 아닌 참조(주소)로 작용
 

182. 배열 + const

  • 배열을 생성할 때 const 를 사용할 수 있다.
  • const로 만든 배열은 원시 타입과는 다르게 참조(주소)를 저장한 것.
    • 껍질(shell)은 그대로지만 내용(contents)은 바뀔 수 있다.
  • 참조를 바꾸거나 재할당할 수는 없지만 배열 안의 콘텐츠는 원하는대로 변경할 수 있다.
 

183. 다차원 배열

nested array

  • 중첩 배열의 데이터에 접근하려면 대괄호로 연결한다.
notion image

185. 객체 리터럴(Object Literals) 개요

  • 객체도 배열처럼 일종의 구조에 여러 데이터 조각을 저장하게 해준다.
  • 배열과 달리 데이터 순서(order)가 아닌 키(key)-값(value)의 쌍으로 이루어진 프로퍼티를 이용해 데이터를 저장한다.
  • 프로퍼티는 순서나 우선순위가 없다.
 

186. 객체 리터럴 생성하기

  • 객체 리터럴은 중괄호 {} 를 써서 만드는 키-값 쌍으로 저장되는 데이터 구조를 의미한다.
    • 객체 라는 말은 좀 더 범용적으로 쓰인다.
    • typeof [] 가 Object로 나왔던 것을 생각하기
  • 각 프로퍼티는 쉼표 , 로 구분한다.
const product = {
    name: "Gummy Bears",
    inStock: true,
    price: 1.99,
    flavors: ["grape", "apple", "cherry"]
}
 

187. 객체 외부 데이터에 액세스하기

대괄호 표기법

  • 대괄호와 큰따옴표 쓰기 object["key"]
  • 대괄호 안에 표현식을 넣을 수 있다.
  • 대괄호 내에서 따옴표로 감싼 이름은 프로퍼티 키로 해석되고, 감싸지 않은 이름은 식별자로 해석된다.
  • 동적으로 프로퍼티에 접근할 때는 따옴표로 감싸지 않는다.

마침표 표기법

  • 점 구문 쓰기 object.key
 
notion image
  • 객체에서 만드는 모든 키들은 문자열로 변환된다. (기호 제외)
notion image
const restaurant = {
    name: 'Ichiran Ramen',
    address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
    city: 'Brooklyn',
    state: 'NY',
    zipcode: '11206',
}

//YOUR CODE GOES DOWN HERE:
const { address, city, state, zipcode } = restaurant;
const fullAddress = `${address}, ${city}, ${state} ${zipcode}`;
Object Access Exercise

188. 객체 수정하기

  • 배열도 키가 숫자인 객체로 생각할 수 있다.

189. 배열과 객체 네스트 구성하기

  • 배열 안에 객체를 넣을 수도 있고, 객체 안에 배열을 넣을 수도 있다.
  • json
notion image

191. For 루프

  • 루프의 핵심은 어떤 기능을 반복하는 것
  • 1부터 10까지 출력하기 (3:36)
    • for (let i = 1; i <= 10; i += 1) {
      	console.log(i);
      }
    • 루프에 대해 새로운 변수를 만든다. (i)
    • 세미콜론을 기준으로 중간 부분은 불리언 표현식
    • 마지막 부분은 증감 표현식 (i값을 업데이트)
 

192. For 루프 예제 더 알아보기

for (
	[initialExpression];
	[condition];
	[incrementExpression]
)
  • for 루프는 변수가 있는 초기 표현식이 있고, 변수는 카운터와 비슷하다.
  • 얼마나 오랫동안 혹은 언제까지 루프를 실행할지 명령하는 조건이 있다.
  • 마지막엔 증감 표현식이 온다.
 
  • 짝수/홀수만 출력하기
  • 100부터 10씩 차감하기
for (let i = 100; i >= 0; i -= 10) {
	console.log(i);
}
 
  • 루프가 계속 실행되기 위해서는 조건이 참이 되어야 한다.
  • 조건이 거짓이 되면 루프 종료
 

193. 무한 루프의 위험성 :(

  • 멈추지 않는 루프
  • 루프가 멈추지 않으면 JavaScript가 가진 메모리를 모두 사용하게 된다.
  • 이 조건이 거짓이 될 것인가? 를 생각해보기
 

194. 배열 루프

  • 배열의 각 요소에 대해 어떤 기능을 반복시키기
  • 배열의 모든 요소에 접근하는 법 - 배열의 길이 .length 와 인덱스 활용
for (let i = 0; i < animals.length; i++) {
	console.log(i, animals[i]);
}
for (let i = animals.length - 1; i >= 0; i--) {
	console.log(i, animals[i]);
}
거꾸로 출력하기
 

195. 네스트 구성 (중첩) 루프

  • 보통 중첩되는 for 루프 변수로는 i, j, k 를 사용한다.
  • 중첩 루프는 보통 중첩된 배열을 통과하거나 반복해야 할 때 사용된다.
const seatingChart = [
	['Kristen', 'Erik', 'Namita'],
	['Geoffrey', 'Juanita', 'Antonio', 'Kevin'],
	['Yuma', 'Sakura', 'Jack', 'Erika']
]

for (let i = 0; i < seatingChart.length; i++) {
	const row = seatingChart[i];
	for (let j = 0; j < row.length; j++) {
		console.log(row[j]);
	}
}
 

196. 또다른 루프: While 루프

  • while 구문 하나와 괄호 안에 조건문 하나
  • 조건이 참이면 계속 반복하고, 거짓이면 루프를 종료한다.
const SECRET = "BabyHippo";

let guess = prompt("enter the secret code...");
while (guess !== SECRET) {
	guess = prompt("enter the secret code...");
}
console.log("CONGRATS YOU GOT THE SECRET!!!");
 

197. 정지 / break 키워드

let input = prompt("Hey, say something!");
while (true) {
	input = prompt(input);
	if (input.toLowerCase() === "stop copying me") break;
}
console.log("OK YOU WIN!");
  • while 조건이 참이고 break가 없으면 계속 반복한다.
 

198. 추측 게임 만들기

let maximum = prompt("Enter the maximum number!");
  • maximum 변수에 넣는 이유는 사용자 입력값이 숫자가 아닌 경우 처리를 해줘야 하기 때문.
    • parseInt('asdasd') 를 하면 NaN이 나온다.
    • 이를 활용해 사용자 입력값을 확인하고 실제로 유효하고 파싱될 수 있는 값을 입력하록 해야 한다.
const targetNum = Math.floor(Math.random() * maximum) + 1
  • 1부터 maximum 범위 안에서 난수 만들기
let guess = prompt("Enter your first guess!");
let attempts = 1;

while (parseInt(guess) !== targetNum) {
	if (guess === 'q') break;
	attempts++;
	if (guess > targetNum) {
		guess = prompt("Too high! Enter a new guess:");
	} else {
		guess = prompt("Too low! Enter a new guess:");
	}
}

if (guess === 'q') {
	console.log("OK, YOU QUIT!");
} else {
	console.log("CONGRATS YOU WIN!");
	console.log(`You got it! It took you ${attempts} guesses`);
}
 

199. for 루프의 유용함

for ... of

for (variable of iterable) {
	statement
}
  • 배열 또는 문자열 등의 반복 가능한 객체(iterable object)에서 반복시키는 기능이 많이 개선되었다.
  • 가독성이 좋아짐.
    • const seatingChart = [
      	['Kristen', 'Erik', 'Namita'],
      	['Geoffrey', 'Juanita', 'Antonio', 'Kevin'],
      	['Yuma', 'Sakura', 'Jack', 'Erika']
      ]
      
      for (let row of seatingChart) {
      	for (let student of row) {
      		console.log(student);
      	}
      }
 

200. 객체 루프

  • for ... of 문은 반복 가능한 객체에서 사용할 수 있다고 했는데, 실제 객체 즉, 객체 리터럴을 반복시킬 때도 사용할 수 있을 것 같다.
  • 하지만 실제 객체 리터럴은 반복 가능한 객체로 인식되지 않는다.
  • 엄밀히 말하면, 시스템 상으론 배열과 문자열, Map, Set도 객체다.
  • 굳이 객체 리터럴에 쓰려면 for ... in 문을 쓰면 되는데, 잘 쓰이지 않음.
  • Object.keys()Object.values() , Object.entries()를 사용하자.
const testScores = {
	keenan: 80,
	damon: 67,
	kim: 89,
	shawn: 91,
	marlon: 72
}

for (let person in testScores) { // 객체의 key가 person이 됨
	console.log(`${person} scored ${testScores[person]}`);
}

// 혹은
for (let score of Object.values(testScores)) {
	console.log(score);
}
  • 점수 총합 구하기
let total = 0;
for (let score of Object.values(testScores)) {
	total += score;
}
  • 점수 평균 구하기
    • 객체에 몇 개의 아이템이 있는지 알아야 한다.
    • 객체에 length 를 쓸 수 없다. (길이가 있는 배열이나 문자열이 아니므로)
    • 배열의 길이 활용하기
let total = 0;
let scores = Object.values(testScores);
for (let score of scores) {
	total += score;
}
console.log(total / scores.length);
 

201. Todo List 프로젝트 개요

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
</head>

<body>
    <h1>Todo List</h1>
    <ul>
        <li>"new" - Add A Todo</li>
        <li>"list" - List All Todos</li>
        <li>"delete" - Remove Specific Todo</li>
        <li>"quit" - Quit App</li>
    </ul>
    <script src="todos.js"></script>
</body>

</html>

202. Todo List 프로젝트 따라하기

  • while문 조건 만들 때 (input !== 'quit' && input !== 'q')(!(input === 'quit' || input === 'q')) 는 같다.
  • isNaN() 숫자가 아닌 것을 확인하는 메서드
    • NaN일 때 true를 반환한다.
    • if (!Number.isNaN(index)) {
        const deleted = todos.splice(index, 1);
        console.log(`Ok, deleted ${deleted[0]}`)
      } else {
        console.log('Unknown index');
      }
전체 코드

204. 함수 개요

  • 함수는 배열, 조건, 변수 어디에나 쓰인다.
  • 함수는 코드의 재사용 가능한 일부로써 언제든 사용할 수 있도록 이름 붙인 것
  • 코드의 중복을 줄이는 데 유용하다.
  • 코드를 더 읽기 쉽고 이해하기 쉽게 만든다.
 

205. 우리의 가장 첫 번째 함수

  • 함수를 작성하고 사용하는 법
    • 1) DEFINE - 함수를 정의하기 (JavaScript에 등록)
      • 함수를 설명할 수 있는 이름 붙이기
      • 중괄호 안의 코드는 바로 실행되지 않는다 → 함수를 실행할 때 동작
      • function funcName() {
        	// do something
        }
    • 2) EXECUTE - 함수를 실행하기
      • native code. 그냥 함수 이름만 입력하면 단순히 함수임을 알려준다.
      • () 괄호를 함께 입력하면 실행된다.
  • 함수를 사용하기 전에 먼저 정의하기 (→ 호이스팅 개념과 관련)
 

206. 인수 개요

  • 인수(arguments)는 함수에 입력하는 값
  • 모든 메서드는 곧 함수다. (인수를 필요로 하는 메서드 생각하기)
  • 인수를 정의하는 방법
    • 함수를 정의할 때 괄호 안에 변수 이름을 넣는다. ⇒ 매개변수(parameter)
    • 함수의 인수로 전달되면 매개변수에 저장되어 접근할 수 있다.
  • 주어져야 할 인수가 전달되지 않으면 기본값은 undefined
💡
인수(argument)는 함수를 실행할 때 괄호 안에 전달되는 것 매개변수(parameter)는 함수를 정의할 때 일종의 placeholder로써 용도에 따라 정해줄 수 있다.
 

207. 인수가 여러 개인 함수

  • 함수를 정의할 때 매개변수 사이에 쉼표를 넣어 구분한다.
  • 함수를 실행할 때 인수의 순서를 지켜야 한다.
function repeat(str, numTimes) {
	let result = '';
	for (let i = 0; i < numTimes; i++) {
		result += str;
	}
	console.log(result);
}

repeat(3, 'I LOVE MY CHICKENS!');
// I LOVE MY CHICKENS! I LOVE MY CHICKENS! I LOVE MY CHICKENS! 
첫 매개변수가 첫 번째 인수를 갖고, 두 번째 매개변수가 두 번째 인수를 갖고, ...
  • 인수가 코드에서 이용되어 오류를 일으키지만 않는다면 인수를 필수로 넣지 않아도 된다.
 

208. 반환(return) 키워드

  • 함수의 출력값(output)
  • console.log() 로 단순히 출력하는 것과는 다르다.
  • 함수 밖으로 하나의 값을 내보낼 수 있다.
  • return 키워드는 함수 실행을 중단시킨다.
function add (x, y) {
	if (typeof x !== number || typeof y !== 'number') {
		return false;
	}
	return x + y;
}
  • 단, 함수 안에 return이 있기만 해서는 중단되지 않고 return이 있는 줄이 실행되어야만 함수가 중단된다.

209. 섹션 주제

Crucial - Function Scope - Block Scope - Lexical Scope - Function Expressions - Higher Order Functions
Important - Returning Functions - The Keyword “this” - Adding Methods To Objects

210. 함수 범위

  • 범위는 변수 가시성(variable visibility)을 참조한다.
  • 변수를 JavaScript의 어느 부분에 정의하느냐가 엑세스 지점을 결정한다.
  • 함수 안에서 let 키워드를 사용해 그 값을 정의한 변수들은 그 함수로 범위가 한정된다. ⇒ 함수 밖에서는 엑세스할 수 없다.
  • 전역 변수를 함수 안에서 업데이트하기보다는 보통은 내부 변수를 쓴다.
  • JavaScript는 함수 안에 전역 변수와 같은 이름으로 정의된 내부 변수가 있을 경우, 내부 변수를 먼저 참조한다.
let bird = 'Scarlet Macaw';

function birdWatch() {
	console.log(bird); // Scarlet Macaw
}

birdWatch();
console.log(bird); // Scarlet Macaw
let bird = 'Scarlet Macaw';

function birdWatch() {
	console.log(bird); // Uncaught ReferenceError: Cannot access 'bird' before initialization
	let bird = 'Great Blue Heron';
	console.log(bird); // Great Blue Heron
}

console.log(bird); // Scarlet Macaw
birdWatch();
console.log(bird); // Scarlet Macaw

211. 블록 범위

  • var 키워드를 쓰면 변수의 범위가 함수로 지정되지만 블록으로 지정되진 않는다.
  • let과 const는 범위가 블록으로 지정되는 변수들. 유효 범위 규칙을 따른다.
  • 블록 스코프도 함수 스코프와 비슷하다. 블록 범위는 조건문 등의 중괄호 {} 안이다.
 

212. 렉시컬 범위

  • 외부(부모) 함수 안에 중첩된 내부(자식) 함수가 있으면 자식 함수에서 부모 함수 범위의 값이나 변수에 엑세스할 수 있다.
function bankRobbery() {
	const heroes = ['Spiderman', 'Wolverine', 'Black Panther'];
	function cryForHelp() {
		for (let hero of heroes) {
			console.log(`PLEASE HELP US, ${hero.toUpperCase()}`);
		}
	}
	cryForHelp();
}
bankRobbery();
 

213. 함수 표현식

  • function expression
  • 함수 선언문과는 다른 방식으로 함수를 정의하는 법
function add(x, y) {
	return x + y;
}
함수 선언문
const add = function (x, y) {
	return x + y;
}
함수 표현식
  • 함수는 자신에게 연결된 이름을 지정할 수 있는 옵션이 있다.
  • 함수 표현식의 경우 이름이 없는(익명) 함수를 변수 안에 저장한 것이다.
  • JavaScript에서는 함수도 값으로 취급되므로, 식별자에 저장하고 전달할 수 있다.
    • 함수가 인수로 전달되든 반환되든 함수를 값처럼 전달할 수 있다.
 

214. 고차 함수 / 215. 반환 함수

  • 고차 함수란 다른 함수와 함께(with) 작동하거나 다른 함수에서(on) 작동하는 함수
    • 1) 다른 함수를 인수로 받아서 그 인수로 어떤 작업을 하는 함수
      • function callTwice(func) {
        	func();
        	func();
        }
        
        function callTenTimes(f) {
        	for (let i = 0; i < 10; i++) {
        		f();
        	}
        }
        
        function rollDie() {
        	const roll = Math.floor(Math.random() * 6) + 1;
        	console.log(roll);
        }
        
        callTwice(rollDie);
        callTenTimes(rollDie);
    • 2) 혹은 함수 내에서 함수를 값으로 반환하는 함수
  • 이 두 가지 중 하나가 적용되거나 둘 다 적용되는 함수를 만들 수도 있다.
 
  • 팩토리 함수 - 함수를 만들어 주는 함수
    • function makeBetweenFunc(min, max) {
      	return function (num) {
      		return num >= min && num <= max;
      	}
      }
    • 변수 안에 캡쳐해서 사용하기
    • notion image

216. 메서드 정의하기

  • 모든 메서드는 함수이지만 모든 함수가 메서드는 아니다.
  • 객체의 프로퍼티 값으로 함수를 전달한 것을 메서드라 부른다.
    • const myMath = {
      	PI: 3.141592,
      	square: function (num) {
      		return num * num;
      	},
      	cube: function (num) {
      		return num ** 3;
      	{
      }
      
      myMath.square(2) // 4
      myMath.cube(4) // 64
  • shorthand ) 프로퍼티 key와 value를 : 으로 구분지어 전달하는 대신 아래처럼 메서드를 추가할 수 있다.
    • const myMath2 = {
      	blah: 'Hi!',
      	add(x, y) {
      		return x + y;
      	},
      	multiply(x, y) {
      		return x * y;
      	}
      }
      
      myMath2.add(50, 60) // 110

217. ‘this’라는 불가사의한 키워드

  • 메서드에 있는 객체를 가리킬 때 this 키워드를 사용한다.
    • 객체에 있는 데이터에 접근할 수 있다.
  • 객체에 여러 프로퍼티가 있거나 정보와 메서드가 다양할 때 this가 유용하다.
    • const cat = {
      	name: 'Blue Steele',
      	color: 'grey',
      	breed: 'scottish fold',
      	meow() {
      		console.log(`${this.name} says MEOWWW`);
      	}
      }
    • 여기에서 this 키워드는 cat 객체를 가리킨다.
    • 메서드에서 this.property 라고 쓰면 this는 이 메서드가 정의하는 객체를 가리킨다.
    • 항상 this 키워드가 해당 객체를 가리키는 것은 아니다.
  • this의 값은 사용된 함수의 호출 컨텍스트(invocation context)에 따라 달라진다.
    • 함수를 호출하는 방법에 따라 달라진다.
    • const cat = {
      	name: 'Blue Steele',
      	color: 'grey',
      	breed: 'scottish fold',
      	meow() {
      		console.log("THIS IS:", this);
      		console.log(`${this.name} says MEOWWW`);
      	}
      }
      
      const meow2 = cat.meow;
      notion image
const hen = {
    name: 'Helen',
    eggCount: 0,
    layAnEgg() {
        this.eggCount++;
        return 'EGG';
    }
}
 
notion image

218. try/catch 사용하기

  • try문과 catch문은 항상 함께 사용되며, JavaScript의 오류 및 예외를 처리한다.
  • 오류가 발생했을 때 try/catch로 오류를 잡아내면, 오류를 처리하고 나머지 코드도 문제 없이 실행시킬 수 있다.

220. 이 섹션에서는 무엇을 배울까?

  • 고차함수의 배열 메서드
 

221. forEach 메서드

  • for ... of 루프가 등장하기 전 자주 쓰였다.
  • 배열 안의 아이템 각각에 대해 함수와 코드를 한번씩 실행한다.
  • forEach에는 기존 유명(기명) 함수를 전달할 수도 있지만 재사용하지 않을 일회성 익명함수를 전달하는 것이 일반적이다.
 

222. map 메서드

  • 배열을 다른 상태로 맵핑한다.
  • 배열 각각의 요소에 실행한다는 점에서 forEach와 비슷하지만, 콜백의 반환값을 이용해 새로운 배열을 생성한다는 점에서 차이가 있다.
  • 원래 배열을 기반으로 모든 요소를 변환한 새로운 배열을 반환
  • 사용 예시) 데이터의 일부만 가져오기, 각 데이터의 값을 두 배로 늘리기 ,...
// DO NOT ALTER THE FOLLOWING CODE:
const fullNames = [{first: 'Albus', last: 'Dumbledore'}, {first: 'Harry', last: 'Potter'}, {first: 'Hermione', last: 'Granger'}, {first: 'Ron', last: 'Weasley'}, {first: 'Rubeus', last: 'Hagrid'}, {first: 'Minerva', last: 'McGonagall'}, {first: 'Severus', last: 'Snape'}];

// Write your code here
const firstNames = fullNames.map(v => v.first);
 

223. 화살표 함수 개요

  • 화살표 함수는 함수를 정의하는 최신 구문. 함수 표현식을 만들 때 사용
  • function 이라는 키워드 없이 함수를 입력할 수 있다.
  • 화살표 함수 하나만 단독으로 만들 순 없다.
  • 전달될 인수가 하나일 때는 괄호를 생략할 수 있다.
    • const greet = name => {
          return `Hey ${name}!`;
      }

224. 화살표 함수의 반환

  • 한 줄의 코드나 짧은 함수의 경우 암시적 반환과 화살표 함수를 사용해 코드를 짧게 만들 수 있다.
  • 중괄호를 괄호로 바꾸고 return 키워드를 뺀다.
const rollDie = () => (
	Math.floor(Math.random() * 6) + 1
)
  • 코드가 한 줄일 때 유용하다.
const add = (a, b) => a + b;

225. 화살표 함수 요약

const newMovies = movies.map(function (movie) {
	return `${movie.title} - ${movie.score} / 10}`
});
const newMovies = movies.map(movie => (
	`${movie.title} - ${movie.score} / 10}`
));
 

226. setTimeout 과 setInterval

  • 실행을 연기, 대기, 중단하거나, 추후 날짜로 실행을 연기하거나 기본적으로 작업 일정을 정하는 메서드

setTImeout()

  • 첫 번째 인수로 TimerHandler라는 함수를 전달하고, 두 번째 인수는 timeout 값으로 실행을 얼마나 연기할 것인지 밀리 초(ms)를 전달.
  • timeout 초가 흐른 뒤 TimerHandler 함수를 딱 한번 실행한다.
  • 비동기 JavaScript 섹션에서 핵심적인 역할을 한다.

setInterval()

  • 콜백을 매 특정 밀리 초마다 호출하는 함수. 인터벌을 두고 작업을 반복한다.

clearInterval()

  • setInterval의 반환값(해당 인터벌의 ID값) 을 저장한 다음 그 ID를 이용해 중단하고 싶은 함수를 지정할 수 있다.
const id = setInterval(() => {
	console.log(Math.random())
}, 2000);

clearInterval(id);
 

227. filter 메서드

  • 배열에서 필터링을 하거나 부분 집합을 모아 새 배열을 만드는 데 쓰인다.
  • 함수를 전달해서 참이나 거짓을 반환하고, 참이 반환된 해당 요소는 필터링되어서 만들어진 새 배열에 추가된다.
  • 원본은 변하지 않는다.
const validUserNames = (usernames) => {
    return usernames.filter(username => username.length < 10)
}

228. some과 every 메서드

  • 새 배열을 반환하는 map, filter와 달리 불리언 메서드.
  • 전달해야 하는 콜백 또한 참이나 거짓을 반환해야 한다.
  • 테스트를 하는 방법

some()

  • 배열 내에서 하나 이상의 요소가 테스트를 통과하는지 여부를 반환

every()

  • 배열 내의 모든 요소가 테스트를 통과해 참을 반환하면 호출된 every 함수가 참을 반환
  • exams.every(score => score >= 75) // true or false 반환
  • 요소들 중 하나라도 콜백에서 거짓을 반환하면 전체 every가 거짓이 된다.
const allEvens = (numArr) => {
    return numArr.every(num => num % 2 === 0);
}
 

229. 악명 높은 reduce 메서드

arr.reduce(callback[, initialValue])

  • 배열을 점차 줄여가며 마지막에 하나의 값만 남기는 메서드
  • 배열의 모든 요소의 총합 예시
    • [3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
      	return accumulator + currentValue;
      });
    • return된 값은 다음 순회의 accumulator에 사용된다.
    • currentValue는 각각의 개별 요소를 나타낸다.
    • reduce 메서드의 두 번째 인수로 넘겨주는 initialValue는 accumulator에 대한 초기값이다. 적지 않으면 default값은 배열의 첫 번째 요소가 된다.
    • const prices = [9.99, 1.50, 19.99, 49.99, 30.50];
      const total = prices.reduce((total, price) => total + price);
  • 배열의 최소/최대값 찾기 예시
    • const minPrice = prices.reduce((min, price) => (price < min) ? price : min);
      const maxPrice = prices.reduce((max, price) => (price > max) ? price : max);

230. 화살표 함수와 ‘this’

  • 화살표 함수에서 this 키워드는 일반 함수에 사용했을 때와 다르게 동작한다.
  • ⭐ 화살표 함수 안에 있는 this 키워드는 함수가 만든 범위에 상속되는 this 키워드 값과 같다.

232. 기본 매개 변수

  • = 등호와 디폴트 값을 매개변수 목록에 넣어주면 기본(디폴트) 매개변수가 된다.
  • 매개변수가 없으면 디폴트 매개변수를 받는다.
function rollDie(numSides = 6) {
	return Math.floor(Math.random() * numSides) + 1;
}

rollDie(); // 1~6
  • 디폴트 매개변수는 디폴트 값이 없는 매개변수의 뒤에 와야 한다.
function greet(person, msg = "Hey there") {
	console.log(`${msg}, ${person}!`);
}

greet("Joaquin"); // Hey there, Joaquin!

233. 함수 호출 시의 스프레드 구문

  • 배열과 같이 반복 가능한(iterable) 객체를 전개 구문을 사용해 펼쳐준다. (확장)
    • notion image
  • 배열 뿐 아니라 문자열, 함수 호출 시에도 펼칠 수 있다.
    • notion image
 

234. 행렬 리터럴 스프레드 구문

  • 전개 연산자를 사용해 두 배열의 요소를 복사해서 새로운 배열로 합치기
const cats = ['Blue', 'Scout', 'Rocket'];
const dogs = ['Rusty', 'Wyatt'];

const allPets = [...cats, ...dogs];
// ['Blue', 'Scout', 'Rocket', 'Rusty', 'Wyatt']
  • 문자열의 각 문자를 배열에 담기
[...'hello']
// ['h', 'e', 'l', 'l', 'o']

235. 객체 스프레드 구문

  • 전개 연산자를 사용해 객체의 프로퍼티를 복사해서 새로운 객체 만들기
  • 특성에서 key-value 쌍을 가져와서 추가한다.
  • 배열이나 문자열을 펼쳐서 새로운 객체를 만들 수도 있다.
notion image
  • 객체를 변형하지 않고 복사하는 방법은 중요하다 (라이브러리, React 등 사용 시)
  • 폼에서 사용자 데이터를 추출해서 새로운 객체를 만들고 정보 추가하기
const dataFromForm = {
	email: 'blueman@gmail.com',
	password: 'tobias123!',
	username: 'tfunke'
}

const newUser = {...dataFromForm, id: 2345, isAdmin: false};
💡
정보의 소스를 펼쳐서 다른 용도로 만드는 방법

236. rest 매개 변수

인수 객체

  • 인수 객체 arguments는 배열과 비슷해 보여서 유사 배열 객체(array-like object)라고 부른다.
  • 모든 인수를 자동으로 모아준다.
    • notion image
  • 배열 메서드를 사용할 수 없다. (배열과 비슷하지만 인수 객체는 배열이 아니다)
  • 화살표 함수에선 인수 객체를 사용할 수 없다. ⇒ 나머지 매개변수 필요

나머지 매개변수

  • 나머지 연산자(rest operator) ... 로 만들고, 매개변수 목록에서 남아 있는 인수를 모두 모아 배열로 나타낸다.
    • function sum(...nums) {
      	return nums.reduce((total, el) => total + el);
      }
      function raceResults(gold, silver, ...everyoneElse) {
      	console.log(`GOLD MEDAL GOES TO: ${gold}`);
      	console.log(`SILVER MEDAL GOES TO: ${silver}`);
      	console.log(`AND THANKS TO EVERYONE ELSE: ${everyoneElse}`);
      }

237. 배열 분해

디스트럭처링(destructuring)

  • 값을 해체하고 꺼내고 선정하는 간편한 방식
  • 배열이나 객체에 적용할 수 있다.
 
  • [] 안에서 배열에서 분해한 것을 어떻게 지칭할지 정한다.
const scores = [929321, 899341, 888336, 772739, 543671, 243567, 111934];
const [gold, silver, bronze, ...everyoneElse] = scores;

238. 객체 분해

  • 순서를 따르지 않기 때문에 배열 구조 분해보다 실용적이다.
const user = {
	email: 'harvey@gmail.com',
	password: 'sCoTt1948sMiTh',
	firstName: 'Harvey',
	lastName: 'Milk',
	born: 1930,
	city: 'San Francisco',
	state: 'California'
}

const { email, firstName, lastName, city } = user; // 기존 프로퍼티 키 이름 그대로 활용
const { born: birthYear } = user; // born 프로퍼티 값을 birthYear 변수에 사용
const { died = 'N/A' } = user; // 없는 프로퍼티일 경우 기본(디폴트)값 설정

239. 매개 변수 분해

  • 함수를 정의할 때 괄호 () 안에서 매개변수로 전달되는 값의 구조를 분해할 수 있다.
  • 객체를 전달받을 때 주로 사용된다.
  • 배열에 사용할 경우 예시
// movies.filter((movie) => movie.score >= 90);
movies.filter(({ score }) => score >= 90);
 
 
 
본 스터디는 Udemy의 <【한글자막】 The Web Developer 부트캠프 2022> 강의를 활용해 진행됐습니다. 강의에 대한 자세한 정보는 아래에서 확인하실 수 있습니다.
 
 
프밍 스터디는 Udemy Korea와 함께 합니다.
 
 
원하는 스터디가 없다면? 다른 스터디 개설 신청하기
누군가 아직 원하는 스터디를 개설하지 않았나요? 여러분이 직접 개설 신청 해 주세요!
이 포스트는
"웹 개발 실전 프로젝트" 스터디의 진행 결과입니다
진행중인 스터디
웹 개발 실전 프로젝트
JavaScript를 이용한 DOM 조작으로 프론트엔드 분야를 배우고, Node JS와 Express, DB, HTTP, REST API 등 백앤드 지식을 학습할수 있습니다. 이론만 공부하는 스터디가 아니라 13개 이상의 프로젝트로 이루어진 실습 위주의 커리큘럼으로 개인 프로젝트 결과물을 가져갈 수 있다는 메리트가 있습니다.
조재홍 멘토
이로운 개발자가 되고 싶은 조재홍입니다.