웹 개발 실전 프로젝트 스터디 - 1주차
Javascript 에 대해 알아보기
181. 참조 타입과 동일성 테스트
배열에서 ===
와 ==
의 역할
- 배열에서 삼중/이중 등호 연산자는 배열의 값을 비교하지 않는다.
- 메모리에서 참조(reference)되는 값을 비교한다.
- 화살표가 향하는 개념
- 배열의 비교는 변수 자체에 저장된 콘텐츠가 아닌 참조(주소)로 작용
182. 배열 + const
- 배열을 생성할 때
const
를 사용할 수 있다.
- const로 만든 배열은 원시 타입과는 다르게 참조(주소)를 저장한 것.
- 껍질(shell)은 그대로지만 내용(contents)은 바뀔 수 있다.
- 참조를 바꾸거나 재할당할 수는 없지만 배열 안의 콘텐츠는 원하는대로 변경할 수 있다.
183. 다차원 배열
nested array
- 중첩 배열의 데이터에 접근하려면 대괄호로 연결한다.

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

- 객체에서 만드는 모든 키들은 문자열로 변환된다. (기호 제외)

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}`;
188. 객체 수정하기
- 배열도 키가 숫자인 객체로 생각할 수 있다.
189. 배열과 객체 네스트 구성하기
- 배열 안에 객체를 넣을 수도 있고, 객체 안에 배열을 넣을 수도 있다.
- json

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
}
- 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);
- 이 두 가지 중 하나가 적용되거나 둘 다 적용되는 함수를 만들 수도 있다.
- 팩토리 함수 - 함수를 만들어 주는 함수
function makeBetweenFunc(min, max) {
return function (num) {
return num >= min && num <= max;
}
}

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.property
라고 쓰면 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;

const hen = {
name: 'Helen',
eggCount: 0,
layAnEgg() {
this.eggCount++;
return 'EGG';
}
}

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;
});
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) 객체를 전개 구문을 사용해 펼쳐준다. (확장)

- 배열 뿐 아니라 문자열, 함수 호출 시에도 펼칠 수 있다.

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 쌍을 가져와서 추가한다.
- 배열이나 문자열을 펼쳐서 새로운 객체를 만들 수도 있다.

- 객체를 변형하지 않고 복사하는 방법은 중요하다 (라이브러리, React 등 사용 시)
- 폼에서 사용자 데이터를 추출해서 새로운 객체를 만들고 정보 추가하기
const dataFromForm = {
email: 'blueman@gmail.com',
password: 'tobias123!',
username: 'tfunke'
}
const newUser = {...dataFromForm, id: 2345, isAdmin: false};
정보의 소스를 펼쳐서 다른 용도로 만드는 방법
236. rest 매개 변수
인수 객체
- 인수 객체
arguments
는 배열과 비슷해 보여서 유사 배열 객체(array-like object)라고 부른다.
- 모든 인수를 자동으로 모아준다.

- 배열 메서드를 사용할 수 없다. (배열과 비슷하지만 인수 객체는 배열이 아니다)
- 화살표 함수에선 인수 객체를 사용할 수 없다. ⇒ 나머지 매개변수 필요
나머지 매개변수
- 나머지 연산자(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와 함께 합니다.