📌 구조 분해 할당
(참조) 구조 분해 할당
- 말그대로 객체 또는 배열의 구조를 분해하여 다른 변수에 할당하는 것
- 배열 또는 객체의 요소 개수만큼 새로운 변수를 만들어 해당 변수에 할당할 수 있다.
사용 방법
// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]
// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// lastname엔 arr[1]을 할당하였습니다.
let [firstName, lastname] = arr;
console.log(firstName); // Bora
console.log(lastname); // Lee✅ (배열) 쉼표를 사용하여 요소 무시하기
쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있습니다.
예제
let arr = ["Bora", "Lee", 35]
let [firstName,, age] = arr;
//필요하지 않은 "Lee" 라는 값은 버리고 다음 값인 35를 age 라는 변수에 할당하기 위해 쉼표로 자리만 만들어두고 저장할 값은 없도록 만들었다.
console.log(firstName); // Bora
console.log(age); // 35✅ (배열) 전개 연산자를 활용해서 여러 요소를 하나의 변수에 할당하기
배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 할당하고 싶을 때, 전개 연산자 ... 를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있습니다.
예제
let arr = ["engineer", "Bora", "Lee", 35]
let [job, ...rest] = arr;
console.log(job, rest); // engineer ['Bora', 'Lee', 35]✅ (객체) 전개 연산자를 활용해서 여러 요소를 하나의 변수에 할당하기
배열과 마찬가지로 가져오고 싶은 특정 값은 새로운 변수를 통해 할당하고 나머지 값들은 전개 연산자를 통해 한곳에 할당할 수 있다.
예제
const obj = {
a: 1,
b: 2,
c: 3
}
const { c, ...rest } = obj
console.log(c, rest) //3, { a: 1, b: 2 }- 배열은 내부 요소들이 순서에 맞게 나열되어 있기 때문에 특정 내용을 꺼내기 위해선 쉼표를 써서 해당 순서에 맞는 값을 찾아와야 하지만
- 객체는 내부 요소들의 순서가 없기 때문에 속성의 이름으로 원하는 데이터를 쉽게 꺼낼 수 있다.
const obj = {
a: 1,
b: 2,
c: 3
}
const { c } = obj
console.log(c) //3✅ 새로 할당하는 변수의 이름 변경
예제
const obj = {
a: 1,
b: 2,
c: 3
}
//a 라는 속성명 대신 happy 라는 새로운 변수를 통해 a의 값인 1을 할당할 수 있다.
const { a: happy } = obj
console.log(a) //ERROR!
console.log(happy) //1📌 선택적 체이닝 optional chaining (?.)
(참조) MDN 공식 문서 - Optional chaining
객체에 속성이 없는 (Nullish) 경우에 에러를 발생시키지 않고 undefined 를 반환한다.
사용 방법
const user = {}
console.log(user.name) //ERROR
console.log(user?.name) //undefined예제
const userA = {
name: 'HEROPY',
age: 85,
address: {
country: 'Korea',
city: 'Seoul'
}
}
const userB = {
name: 'Neo',
age: 22
}
//점 표기법 사용
function getCity_1(user) {
return user.address.city
}
console.log(getCity_1(userA)) //Seoul
console.log(getCity_1(userB)) //ERROR! userB 에는 address 속성이 없기 때문
//선택적 체이닝 사용
function getCity_2(user) {
return user.address?.city //userB에게 없는 address 속성으로 인해 에러가 발생하지 않도록 선택적 체이닝 문법을 사용해서 undefined가 반환된다
}
// or 연산자 활용해서 객체에 값이 없으면 undefined가 아닌 특정 메세지를 반환하도록 작성
function getCity(user) {
return user.address?.city || '주소 없음' //OR 연산자를 사용해서 userB에게 address 속성이 없기 때문에 '주소 없음'이 출력됨
}📌 if 조건문
함수는 기본적으로 return 값이 없으면 undefined를 반환한다.
📌 switch 조건문
switch 조건문은 각 case별로 조건에 부합할 때 실행할 코드를 작성하고 break문을 작성해줘야 다른 case 및 defalut일 때의 코드를 실행하지 않는다. (해당 case에 해당하는 코드만 실행할 수 있게 함)
예제 1
function price(fruit) {
let p = 0
switch (fruit) {
case 'Apple':
p = 1000
break
case 'Banana':
p = 1500
break
case 'Cherry':
p = 2000
break
default:
p = 0
}
return p
}
console.log(price('Apple')) //1000
console.log(price('Melon')) //0예제 2
function price(fruit) {
switch (fruit) {
case 'Apple':
return 1000
case 'Banana':
return 1500
case 'Cherry':
return 2000
default:
return 0
}
}- 조건문 내에서 return 을 사용해서 특정 값을 반환하도록 하면 그 즉시 조건문을 벗어나고, 만약 함수 안에 조건문이 들어있는 상태였다면 함수도 빠져나간다.
switch 조건문은 언제나 if 조건문으로 대체할 수 있지만, if 조건문은 상황에 따라 switch 조건문으로 대체하기 어려울 수 있다.
switch문 → if문으로 대체
function price(fruit) { if (fruit === 'Apple') { return 1000 } else if (fruit === 'Banana') { return 1500 } else if (fruit === 'Cherry') { return 2000 } else { return 0 } }
📌 for 반복문
예제
for (let i = 0; i < 10; i += 1) {
if (i % 2 === 0) {
continue
}
console.log(i)
}continue키워드는 현재 반복을 종료하고 다음 반복으로 넘어간다. 즉,continue다음에 있는 코드는 실행하지 않고 다음 반복으로 넘어간다. 완전 그 반복문을 빠져나가는break와는 다름!!- 출력 결과 : 홀수만 출력됨
📌 for of 반복문 (배열)
- 배열의 요소를 대상으로 반복할 때 (객체에는 사용 불가능!)
- 배열 데이터가 갖고 있는 아이템의 수만큼만 반복함
const fruits = ['Apple', 'Banana', 'Cherry']
>
//일반 for문 사용
for (let i = 0; i < fruits.length; i += 1) {
console.log(fruits[i])
}
>
//for of 사용
for (const a of fruits) {
console.log(a)
}- 반복하려는 배열명 앞에 of 를 붙이고 for문 내부에서 사용할 변수( a ) 를 하나 생성함. 그리고 그 변수는 배열의 요소들을 돌아가면서 사용할 수 있다.
예제
const users = [
{
name: 'HEROPY',
age: 85
},
{
name: 'Neo',
age: 22
},
{
name: 'Lewis',
age: 34
}
]
for (let i = 0; i < users.length; i += 1) {
console.log(users[i].name) //users.[i]의 값이 객체이기 때문에 점 표기법으로 특정 속성 값을 도출할 수 있음
}
for (const user of users) {
console.log(user.name)
}📌 for in 반복문 (객체)
- 객체의 속성들을 대상으로 반복할 때 (배열에는 사용 불가능!)
- 객체 데이터가 갖고 있는 아이템의 수만큼만 반복함
예제
const user = {
name: 'HEROPY',
age: 85,
isValid: true,
email: 'thesecon@gmail.com'
}
for (const key in user) {
console.log(key) //속성이 출력됨
console.log(user[key]) //속성에 해당하는 값이 출력됨
}- 출력 결과
📌 do while 반복문
무조건 코드를 1회 실행하고 그 이후로 조건을 만족하면 계속 반복함
let n = 0
>
do {
console.log(n)
n += 1
} while (n < 5);
Hello, World