[EST] 240711 JavaScript-05

조건문

삼항연산자

- 간단한 if-else문을 한 줄로 표현할 수 있는 연산자

 

기본구조

(조건식) ? (조건식이 참일 때 실행할 코드) : (조건식이 거짓일 때 실행할 코드)

let item = true ? 'apple' : 'gold';

console.log(item); // apple

 

true ? console.log("true") : console.log("false"); // true
false ? console.log("true") : console.log("false"); // false

const result = false ? console.log("true") : console.log("false"); 
console.log(result); // undefined


let num = 10;
const item = num > 5 ? "apple" : "banana";

console.log(item); // apple

 

삼항연산자 중첩

//6000보다 크면 : '비싸요'
//3000보다 크면 : '적당해요'
//3000보다 크고 6000보다 작거나 같으면: '적당해요'
//3000보다 작거나 같으면: '저렴해요'

let price = 2000;
let message = price > 6000 ? "비싸요" : price > 3000 ? "적당해요" : " 저렴해요";

console.log(message); // 저렴해요

 

switch문

- 주어진 표현식의 값에 따라 분기 처리를 하는 조거문을 작성 가능

- 표현식과 여러 개의 case를 비교하여 일치하는 case의 실행코드가 실행됨

- 모든 case와 일치하지 않는 경우 default블록 안의 코드가 실행됨

 

기본구조

switch (표현식) {
  case 값1:
  //값1에 대한 실행코드
  case 값2:
  //값2에 대한 실행코드
  // ...
  default:
  // 모든 case에 일치하지 않는 경우 실행할 코드
}

let name = "뽀로로";

switch (name) {
  case "뽀로로":
    console.log("관리자입니다");
  case "펭수":
    console.log("매니저입니다");
  case "루피":
    console.log("사용자입니다");
  default:
    console.log("일치하지 않습니다");
}
// 관리자입니다

 

- fall through 현상: 값과 일치하는 case의 코드뿐만 아니라 그 이후의 코드가 모두 실행

- fall through 현상을 방지하기 위해 break문을 추가

const today = new Date();
// new Date().getDay() -> 요일 정보를 가져올 수 있음
// 0 일요일, 1 월요일, 2 화요일, ..., 6 토요일

console.log("오늘은: ", today.getDay());

switch (today.getDay()) {
  case 1:
    console.log("월요일");
    break;
  case 2:
    console.log("화요일");
    break;
  case 3:
    console.log("수요일");
    break;
  case 4:
    console.log("목요일");
    break;
  case 5:
    console.log("금요일");
    break;
  case 6:
    console.log("토요일");
    break;
  case 0:
    console.log("일요일");
    break;
  default:
    console.log("무슨 요일인지 모름");
}

---

반복문

- 동일한 작업을 여러 번 반복해야 할 때 사용

const weniv_friends = ["licat", "binky", "gary", "soulgom", "mura"];

let text = "<ul>\n";
text += "<li>" + weniv_friends[0] + "</li>\n";
text += "<li>" + weniv_friends[1] + "</li>\n";
text += "<li>" + weniv_friends[2] + "</li>\n";
text += "<li>" + weniv_friends[3] + "</li>\n";
text += "<li>" + weniv_friends[4] + "</li>\n";
text += "</ul>\n";

console.log(text);
//document.body.innerHTML = text;

 

* document.body.innerHTML

  HTML문서(document)의 body(.body) 요소 내부에 들어갈 HTML(.innerHTML) 내용을 수정하는 코드

for문

- 기본구조

for (초기화식; 조건식; 증감식) {
    //반복에서 실행할 코드
}

// 0부터 5까지 출력하는 코드를 생성
for (let i=0; i<=5; i++) {
  console.log(i);
}
// 0 1 2 3 4 5

let text2 = "<ul>";
for (let i = 0; i < weniv_friends.length; i++) {
  text2 += "<li>" + weniv_friends[i] + "</li>\n";
}
text2 += "</ul>";
console.log(text2);
document.body.innerHTML = text2;

 

반복문퀴즈

Q. 1부터 100까지 짝수의 합을 구하는 반복문 코드

 

첫 번째 방법

let total = 0;
for(i=0; i<=100; i=i+2){
  total += total + i;
}
console.log("짝수의 합: " + total); // 짝수의 합: 2550

 

두 번째 방법

let evenSum = 0;
for(let i=0; i<=100; i++) {
  if (i % 2 === 0) evenSum += 1;
}
console.log("짝수의 합: " + total); // 짝수의 합: 2550

 

Q. 반의 평균을 구하는 반복문 코드 (reduce 코드 사용 X)

const score = [84, 92, 39, 55, 71];

let total2 = 0;
for(let i=0; i<score.length; i++) {
  total2 = score[i];
}
console.log("반의 평균: " + total2 / score.length.toFixed(1) + "점"); //반의 평균: 68.2점

 

이중 반복문

- for문 안에 다른 for문을 중첩해서 이중 반복문 사용 가능

- 이중 반복문을 활용하여 2차원 배열을 다루거나, 두개의 변수를 사용하여 반복작업 수행가능

// 구구단
for(let i=2; i<=9; i++) {
  console.log(`\n---${i}단---`)
  for(let j=1; j<=9; j++) {
    console.log(`${i} * ${j} = ${i * j}`);
  }
}
/*
---2단---
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18

---3단---
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9
3 * 4 = 12
3 * 5 = 15
3 * 6 = 18
3 * 7 = 21
3 * 8 = 24
3 * 9 = 27

---4단---
4 * 1 = 4
4 * 2 = 8
4 * 3 = 12
4 * 4 = 16
4 * 5 = 20
4 * 6 = 24
4 * 7 = 28
4 * 8 = 32
4 * 9 = 36

---5단---
5 * 1 = 5
5 * 2 = 10
5 * 3 = 15
5 * 4 = 20
5 * 5 = 25
5 * 6 = 30
5 * 7 = 35
5 * 8 = 40
5 * 9 = 45

---6단---
6 * 1 = 6
6 * 2 = 12
6 * 3 = 18
6 * 4 = 24
6 * 5 = 30
6 * 6 = 36
6 * 7 = 42
6 * 8 = 48
6 * 9 = 54

---7단---
7 * 1 = 7
7 * 2 = 14
7 * 3 = 21
7 * 4 = 28
7 * 5 = 35
7 * 6 = 42
7 * 7 = 49
7 * 8 = 56
7 * 9 = 63

---8단---
8 * 1 = 8
8 * 2 = 16
8 * 3 = 24
8 * 4 = 32
8 * 5 = 40
8 * 6 = 48
8 * 7 = 56
8 * 8 = 64
8 * 9 = 72

---9단---
9 * 1 = 9
9 * 2 = 18
9 * 3 = 27
9 * 4 = 36
9 * 5 = 45
9 * 6 = 54
9 * 7 = 63
9 * 8 = 72
9 * 9 = 81
*/

 

for문의 선택적 사용

- for문의 구성요소(초기화식, 조건식, 증감식)은 모두 선택적으로 사용가능

- 세미콜론으로 구분되어 있는 항목을 빈 칸으로 두면 구성요소를 선택적으로 사용가능

- 초기화식을 생략하고 for문 밖의 변수 이용가능

 

- 기본구조

for (초기화식; 조건식; 증감식) {

}

let i = 0;
for (; i<5; ) {
  console.log(i);
  i++;
}
// 0 1 2 3 4


for (let i=0; i<5; i++) {
  console.log(i);
}
// 0 1 2 3 4

 

- 조건식 또한 선택적으로 사용가능하지만 생략할 경우 무조건 true로 평가되기 때문에 코드를 무한비 반복하게 됨

- 이럴 경우, 무한루프에 빠지지 않도록 별도의 조건문을 넣어야 함

- 모든 구성요소를 생략할 경우 무한루프에 빠짐

// 조건식을 생략 -> 반복문 안에 탈출조건을 생성
// 탈출조건이 없는 경우 -> 무한 반복에 빠짐
for (let i=0; ; i++) {
  console.log(i);
  
  if(i>10) break;
}

 

while문

- 주어진 조건식이 참일 때 반복적으로 실행되는 반복문

- Truthy 또는 Falsy를 반환하는 표현식

- 만약 조건식이 Truthy하면 중괄호 안의 코드가 실행되며, 조건식이 Falsy하면 반복이 종료

 

- 기본구조

while (조건식) {
  //조건식이 참일 때 실행될 코드
}

let num = 0;

while (num < 11) {
  console.log(num);
  num++;
}
// 0 1 2 3 4 5 6 7 8 9 10

 

이중 반복문

let i = 2;
while (i<=9) {
  console.log(`---${i}단---`)
  
  let j = 1;
  while (j<=9) {
    console.log(`${i} * ${j} = ${i * j}`);
    j++;
  }
  i++
}
/*
---2단---
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18

---3단---
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9
3 * 4 = 12
3 * 5 = 15
3 * 6 = 18
3 * 7 = 21
3 * 8 = 24
3 * 9 = 27

---4단---
4 * 1 = 4
4 * 2 = 8
4 * 3 = 12
4 * 4 = 16
4 * 5 = 20
4 * 6 = 24
4 * 7 = 28
4 * 8 = 32
4 * 9 = 36

---5단---
5 * 1 = 5
5 * 2 = 10
5 * 3 = 15
5 * 4 = 20
5 * 5 = 25
5 * 6 = 30
5 * 7 = 35
5 * 8 = 40
5 * 9 = 45

---6단---
6 * 1 = 6
6 * 2 = 12
6 * 3 = 18
6 * 4 = 24
6 * 5 = 30
6 * 6 = 36
6 * 7 = 42
6 * 8 = 48
6 * 9 = 54

---7단---
7 * 1 = 7
7 * 2 = 14
7 * 3 = 21
7 * 4 = 28
7 * 5 = 35
7 * 6 = 42
7 * 7 = 49
7 * 8 = 56
7 * 9 = 63

---8단---
8 * 1 = 8
8 * 2 = 16
8 * 3 = 24
8 * 4 = 32
8 * 5 = 40
8 * 6 = 48
8 * 7 = 56
8 * 8 = 64
8 * 9 = 72

---9단---
9 * 1 = 9
9 * 2 = 18
9 * 3 = 27
9 * 4 = 36
9 * 5 = 45
9 * 6 = 54
9 * 7 = 63
9 * 8 = 72
9 * 9 = 81
*/

 

do ~ while 반복문

- 조건식의 평가 전에 코드를 실행하는 반복문

- 조건식이 거짓이라도 최소한 한번의 실행이 보장

let num = 12;
do {
  console.log(num);
  num++;
} while (num < 11);
// 12 -> 최소 한 번의 실행을 보장

let inpNum;
let count = 0;

do {
  if (count >= 3) {
    break;
  }
  inpNum = window.prompt("숫자를 입력하세요");
  count++;
} while (inpNum === "" || isNaN(inpNum);

if (inpNum !== null) {
  console.log(`입력된 숫자는 ${inpNum}`);
}
console.log(`입력된 숫자는 ${inpNum}`);

 

break와 continue

- 반복문의 흐름 제어 가능

- 반복문에서 특정조건에 따라 반복문을 중단하거나 건너뛰는 역할을 함

 

break

- break문을 이용하면 반복문을 즉시 종료가능

for break

for (let i=0; i<=5; i++) {
  if(i===3) break;
  
  console.log(i); // 0 1 2
}

 

while break

let num = 0;
while (num < 11) {
  if (num === 5) break;
  
  console.log(num); // 0 1 2 3 4
  num++;
}

 

continue

- 반복문을 완전히 빠져나가는 break와 다르게 반복문의 다음 반복으로 이동시킴

- 특정 조건을 만족할 때, 해당 반복을 건너뛰고 다른 반복으로 넘어가는데 사용됨

// 1 ~ 50 중, 3의 배수를 제외한 합

let sum = 0;
for (let i=1; i<=50; i++) {
  if(i%3 === 0) continue;
  sum += i;
}
console.log(sum); // 867

 

for continue

for (let i=0; i<=5; i++) {
  if (i === 3) continue;
  
  console.log(i); // 0 1 2 4 5
}

 

while continue

let num = 0;

while (num < 11) {
  num++;
  if (num === 5) continue;
  console.log(num); // 1 2 3 4 6 7 8 9 10 11
}

 

do while continue

let num = 0;

do {
  num++;
  if (num === 5) continue;
  console.log(num); // 1 2 3 4 6 7 8 9 10 11
} while (num < 11);

 

label

- 특정 코드 블록에 이름을 지정하는 방법

- 이름을 지정하면, 코드 블록 내부에서 break나 continue문의 대상으로 지정 가능

- label을 최소화하는 것을 권장

 

label break

outer: for (let i=0; i<3; i++) {
  for (let j=0; j<3; j++) {
    if (i + j === 3) {
      break outer;
    }
    console.log(i, j); 
  }
}
/*
0 0 
0 1
0 2
1 0
1 1
*/

 

label continue

outer2: for (let i=0; i<3; i++) {
  for (let j=0; j<3; j++) {
    if (i+j === 3) {
      continue outer2;
    }
    console.log(i, j);
  }
}

/*
0 0
0 1
0 2
1 0
1 1
2 0
*/

---

함수

- 반복해서 사용하고자 하는 코드를 미리 작성

-> 반복적으로 필요한 코드를 하나의 덩어리로 묶어서 필요할 때마다 꺼내 쓸 수 있도록 하는 것

 

기본구조

function 함수이름 (parameter1, parameter2) {
  // 함수에서 사용할 코드
  // 어떤 기능을 할 지 코드로
  return 반환값;
}
함수이름 (argument1, argument2...) // 함수의 호출

 

예시) - 맛있는 라면 레시피

<나의 시크릿 라면 레시피>
1. 라면을 담을 그릇을 준비합니다.
2. 물 550ml를 끓입니다.
3. 면과 분말스프, 후레이크를 같이 넣습니다.
4. 4분 40초간 더 끓입니다.
5. 그릇에 라면을 담습니다.

-> 사람들이 라면 레시피를 알라달라고 하면, 레시피를 미리 적어두고 건내주는 것이 좀 더 호율적일 것

-> 반복적으로 필요한 코드를 하나의 덩어리로 묶어서 필요할 때마다 꺼내 쓸 수 있도록 한 것

function 나의시크릿라면레시피 () {
  let 라면그릇;
  
  물 550ml를 끓인다;
  면과 분말스프, 후레이크를 같이 넣는다;
  4분 40초간 더 끓인다;
  
  라면그릇 = 맛있는라면;
  
  return 라면그릇;
}
나의시크릿라면레시피();

 

// 두 수의 입력을 받아서 합을 출력하는 함수
function sum(num1, num2) {
  return num1 + num2;
}
console.log(sum(2, 3)); // 5
console.log(sum(5, 6)); // 11

 

함수의 기능

1. 재사용성 향상 

    - 중복되는 코드를 줄이고 동일한 코드를 반복해서 사용 가능

2. 가독성 및 유지보수성 향상

    - 함수의 역할을 쉽게 파악할 수 있고, 수정 및 업데이트가 용이

3. 구조 파악 용이

    - 기능 단위로 코드를 분리하여 구조화 가능

 

함수의 특징

매개변수와 인자

용어	번역	의미
parameter	매개변수	함수와 메서드에 입력 변수 이름
argument	전달인자, 인자, 인수	함수와 메서드에 실제 입력되는 값

-> 파선아실 : 파라미터는 선언 / 아규먼트는 실행

- parameter (매개변수) : 함수를 선언할 때 함수 내부에서 사용됨

- argument (인자) :  함수를 호출할 때 실제로 입려되는 값을 나타냄

function sum(num1, num2) {
  return num1 + num2; // num1, num2 -> 매개변수 (parameter)
}
sum (2, 3); // 2, 3 -> 인자(argument)

 

function sumNumbers(a, b, c) {
  console.log(`--${a} + ${b} + ${c}`); 
  return a + b + c; 
}

console.log(sumNumbers(10, 20, 50)); 
/*
-- 10 + 20 + 50
80
*/

// 인자가 매개변수보다 많을 때 -> 매개변수 수까지만 반환
console.log(sumNumbers(10, 20, 30, 40)); 
/*
-- 10 + 20 + 30
60
*/

// 인자가 매개변수보다 적을 때 -> NaN
console.log(sumNumbers(10, 20)); 
/*
-- 10 + 20 + undefined
NaN
*/

function sumNumbers(d, e, f=0) {
  console.log(`-- ${d} + ${e} + ${f}`);
  return d + e + f;
}

console.log(sumNumbers(10, 20)); 
/*
-- 10 + 20 + 0
30
*/

function sumNumbers3 (g=10, h=20, i=30) {
  console.log(`-- {-${g} + ${h} + ${i}`);
  return g + h + i;
}

// undefined -> 기본값
console.log(sumNumbers3(0, undefined, 0));
/*
-- 0 + 20 + 0
20
*/

// null -> null
console.log(sumNumbers3(null, 0, 0));
-- null + 0 + 0
0

-> 값이 전달되지 않았거나, undefined인 경우 기본값으로 반환

 

원시 call

let number = 10;

function test(num) {
  num = num + 10;
  console.log("function", num); // function 20 -> num(10) + 10
}
test(number);
console.log(number); // 10

 

객체 call

const object = {a:1, b:2};

function test2(obj) {
  obj.c = 3; // 객체가 수정됨
  obj = {name: "weniv"}; // 새로 할당
  
  console.log("function", obj); // function {name: "weniv"}
}

test2(object);
console.log(object); // {a:1, b:2, c:3}

 

반환값

- 반환값은 return 키워드를 사용하여 지정

- 함수가 반환값을 가지면 함수를 호출하여 반환되는 값 사용가능

- 함수 내부에서 return 구문을 만나게 되면 해당 함수는 종료

- 함수 내부에 return문이 없으면 undefined를 반환

 

- return문 뒤에 오는 코드는 실행되지 않음

function sum(a, b) {
  return a + b;
  console.log("return문 뒤에 오는 코드");
}
console.log(sum(2, 3)); // 5

 

- 반환값이 없는 함수는 undefined로 반환

function sub(a, b) {
  console.log(a - b);
}
console.log(sub(5, 2)); // undefined

 

- return을 만나면 함수는 종료됨

function sumNumber(a, b) {
  if (isNaN(a) || isNaN(b)) {
    console.log("숫자가 아닙니다.");
    return;
  }
  // a와 b는 숫자
  return a + b;
}
console.log(sumNumber(10, 20)); // 30 -> 10 + 20
console.log(sumNumber("hello", 2)); // 숫자가 아닙니다.

 

함수 선언하는 방법

함수 선언문과 함수 표현식

- 함수는 function + 함수이름 + ( ) + { }의 조합인 구문(Statement)으로 선언하는 선언문으로 작성가능

- 함수 이름없이 선언하여 변수에 값으로 할당하는  표현식(Expression)으로 선언하는 것도 가능

 

함수 선언식

func1();
function func1() {
  console.log("함수 선언식");
}

함수 표현식

- 함수 -> 자바스크립트 값 (인자로 함수전달 가능 -> callback함수)

- 함수 표현식은 호이스팅때문에 선언 전에 사용불가

var func2 = function func3() {
  console.log("함수 표현식");
};
func2();

 

ex)

// 함수 선언문
function sum(x, y) {
  return x + y;
}

// 함수 표현식
let sumXY = function(x, y) {
  return x + y;
};

console.log(sum(10, 20)); // 30
console.log(sumXY(10, 20)); // 30

 

화살표함수

- function 키워드를 화살표 기호로 대체해 표현함

- 선언 시 함수 이름을 정할 수 없기 때문에 표현식으로 선언하여 사용 가능

function fun1(x, y) {
  return x + y
}

// 위 함수를 화살표 함수로 작성하기
let func1 = (x, y) => {
  return x + y
}

// 함수 내부에 한 줄 표현식만 반환한다면 return키워드를 생략가능
let func2 = (x, y) => x + y;
console.log(func2(5, 10)); // 15

// 함수의 매개변수가 한 개라면 소괄호 생략가능
let func3 = x => x + 10
console.log(func3(10)); // 20

function sum1(a, b) {
  return a + b;
}
(a, b) => {
  return a + b;
}

// 함수 표현식
const arrowFunc = (a) => 2 * a;
console.log(arrowFunc(10)); // 20

// 메서드에서 콜백함수
// 함수의 인자로 다른 함수를 전달함
[1, 2, 3, 4, 5].map(function (item, index) {
  return item + index;
});

const result = [1, 2, 3, 4, 5].map((item, index) => item + index);
console.log(result); // [1, 3, 5, 7, 9]

 

즉시실행함수(IIFE - Immediately Invoked Function Expression)

- 함수를 정의함과 동시에 즉시 실행하는 방법

(function () {
  console.log("함수를 바로 실행합니다."); // 함수를 바로 실행합니다.
}){};

const iifeFunc = (function () {
  console.log("표현식으로 작성한 즉시 실행함수"); // 표현식으로 작성한 즉시 실행함수
  let value = 0;
  
  return {
    increment: function () {
      value++;
    },
    print: function () {
      console.log(value); //1 1
    },
  };
})();

console.log(iifeFunc); // {increment: f, print: f}
iifeFunc.increment();
iifeFunc.print();

// 단축평가를 이용한 반환값
function test() {
  return null || "b";
}
console.log(test()); // b

---

전개 구문 (Spread systax)

- 배열이나 객체와 같은 데이터 구조를 확장할 때 사용하는 문법

- 배열이나 객체를 쉽게 복사하거나, 새로운 배열이나 객체 생성 가능 -> 전개식

 

배열의 전개 구문

- 대괄호( [ ] )안에서 세 개의 점(...)을 사용하여 배열을 확장

const fruits = ["사과", "파인애플", "수박"];
const fish = ["조기", "갈치", "다금바리"];
const food = [...fruits, ...fish];

console.log(food);
/*
Array(6)
0: "사과"
1: "파인애플"
2: "수박"
3: "조기"
4: "갈치"
5: "다금바리"
*/

console.log(fruits.concat(fish));
/*
Array(6)
0: "사과"
1: "파인애플"
2: "수박"
3: "조기"
4: "갈치"
5: "다금바리"
*/

 

- 배열의 전개구문을 이용하면 얕은 복사가 가능

const fruits = ["사과", "파인애플", "수박"];
const fish = ["조기", "갈치", "다금바리"];
const food = [...fruits, ...fish];

const copyFruits = [...fruits];
copyFruits.push("망고");

console.log("fruits", fruits);
/*
fruits ["사과", "파인애플", "수박"]
*/

console.log("copyFruits", copyFruits);
/*
copyFruits ["사과", "파인애플", "수박", "망고"]
*/

 

객체의 전개 구문

- 중괄호 ( { } )안에서 세 개의 점(...)을 사용하여 객체를 확장

const weniv1 = {gary:1, binky:2};
const weniv2 = {licat:3};
const weniv = {...weniv1, ...weniv2};

console.log(weniv);
/*
{gary:1, binky:2, licat:3}
*/


const me = {name:"weniv", address:"jeju"};
const copyMe = {...me};
copyMe.number = 1;

console.log("me", me);
/*
me{name:"weniv", address:"jeju"}
*/

console.log("copyMe", copyMe);
/*
copyMe {name:"weniv", address:"jeju", number:1}
*/

 

- 객체의 전개구문 : key값이 동일하면 덮어쓰기가 가능

- 가장 마지막에 오는 값이 됨

const obj1 = {name: "weniv", address: "jeju"};
const obj2 = {address: "seoul"};
const obj = {...obj1, ...obj2};

console.log(obj);
/*
{name: "weniv", address: "seoul"}
*/

console.log(obj.address);
/* seoul */

 

구조분해할당 (destructuring)

- 배열이나 객체와 같은 데이터 구조를 분해하여 변수에 할당하는 표현식

- 변수에 속성이나 요소를 간편하게 할당 가능

const foods = {
  food1: "과일",
  food2: "생선",
  food3: "채소",
};

/*
let food1, food2, food3;
food1 = foods["food1"];
food2 = foods["food2"];
food3 = foods["food3"];
console.log(food1, food2, food3); // 과일 생선 채소
*/

const obj = {one: 1, two: 2};
let {two: myNum} = obj;

console.log(myNum); // 2

/*
let {one: one, two: two} = {one: 1, two: 2};
console.log(one); // 1
console.log(two); // 2
*/

let {one, two, three} = {one: 1, two: 2};

console.log(one); // 1
console.log(two); // 2
console.log(three); // undefined

let {food1, food2, food3} = foods;

console.log(food1, food2, food3); // 과일 생선 채소

 

배열의 디스트럭처링

- 대괄호( [ ] )를 사용하여 할당할 변수 이름을 나열하는 방식

- 배열의 요소를 각각의 변수에 할당 가능

const arr = [1, 2, 3, 4, 5];

let [a, b, c] = arr;

console.log(a, b, c); // 1 2 3

 

- 빈값으로 두면 필요한 값만 가져옴

let [d, , f] = [1, 2, 3, 4, 5];
console.log(d, f); // 1 3

let [x, y, z] = [1, 2];

console.log(x, y, z); // 1 2 undefined

 

함수의 매개변수 디스트럭처링

- 함수의 매개변수를 분해하여 변수에 할당하는 방법

- 함수에서 각각의 인수를 간편하게 사용가능

- 객체나 배열을 매개변수로 받는 함수에서 유용하게 사용됨

- 코드의 가독성과 유지보수성을 높이는데 도움이 됨

function func1({a, b}) {
  console.log(a, b); // hello world 10 20 
}

// 매개변수 {a, b} = {a: 'hello;, b:'world'} 인자
func1({a: "hello", b: "world"});

// {a, b} = {b: 20, a: 10}
func1({b: 20, a:10}); // 10 20

function func2([a, b, c]) {
  console.log(a, b, c); // 10 20 30
}

// 매개변수 [a, b, c] = [10, 20, 30] 인자
// 순서대로 들어감
func2([10, 20, 30]);