Front/JavaScript

구문(Statement) - javascript 기본

oodada 2023. 9. 11. 22:22

구문(Statement)

1. 구조 분해 할당 (Destructuring assignment)

객체나 배열을 변수로 '분해'할 수 있게 하는 문법
객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 표현식

- 배열의 구조 분해

const arr = [1, 2, 3];
// const a = arr[0]
// const b = arr[1]
// const c = arr[2]

const [a, b, c] = arr; // 구조 분해 할당
// 배열 데이터를 만든 후 arr 변수에 할당

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

1) 각각의 변수가 미리 할당되어 있을 경우

let a = 0;
let b = 0;
let c = 0;
const arr = [1, 2, 3];
// 초기화 후 재할당 가능

[a, b, c] = arr;
// 명령이 끝났다는 ;(세미콜론) 붙여주기
// 구조 분해 할당 (재할당이므로 const 제거)
// 기존에 선언된 변수에 할당

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

2) 필요하지 않은 변수 제거

let b = 0;
let c = 0;
const arr = [1, 2, 3];

[, b, c] = arr;
// 구조 분해 할당을 사용할 때에는 b,c 가 순서대로 데이터가 들어갈 수 있도록
// 숫자 1이 들어갈 자리를 ,(쉼표)로 구분해서 비워둬야 함

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

3) 나머지 할당

const arr2 = [1, 2, 3];
const [d, ...rest] = arr2;
// 1을 d에 할당하고 나머지는 전개 연산자를 사용해 rest에 할당
// 전개 연산자는 배열의 나머지 요소를 모두 복사해줌

console.log(d, rest); // 1 [ 2, 3 ]

- 객체의 구조 분해

const obj = {
  e: 1,
  f: 2,
  g: 3,
};

const { e, f, g } = obj;
// 구조 분해 할당을 사용해 obj 객체의 속성을 분해하여 변수에 할당

console.log(e, f, g); // 1 2 3

기본값 할당, 변수 할당

const box = {
  width: 100,
  height: 200,
  background: 'red',
};

const { width, height = 100, background: bg = 'gray' } = box;
// 구조 분해 할당을 사용해 obj 객체의 속성을 분해하여 변수에 할당
// obj 객체의 속성을 분해하여 변수에 할당
// e 속성은 객체의 1이 할당
// f 속성은 free 변수에 할당
// h 속성은 없으므로 기본값 10이 할당
// 만약 h 속성이 있었다면 ten 변수에 할당

console.log(width, height, bg); // 100 200 red

2. 선택적 체이닝 (Optional Chaining)

user.name의 정보가 null, undefind일 경우
점(.) 표기법으로 속성을 조회할 수 없기 때문에 type 에러가 발생한다.

let user = null; // 주소 정보가 없는 사용자

console.log(user.name); // TypeError: Cannot read property 'street' of undefined

위와 같은 경우
?.(선택적 체이닝)를 사용하면 user가 유효한지 확인하고, 그렇지 않은 경우에는 undefined를 반환한다.

let user = null; // 주소 정보가 없는 사용자

console.log(user?.name); // undefined

- ex.

const user1 = {
  name: 'winter',
  age: 2,
  address: {
    city: 'Seoul',
    zipcode: '123456',
  },
};

const user2 = {
  name: 'fall',
  age: 3,
};

function printCity(user) {
  return user.address?.city || '주소 정보가 없습니다.';
  // ?. 사용하여 user.address가 유효한지 확인
  // or 연산자를 사용하여 user.address가 유효하지 않은 경우 "no city"를 반환
}

console.log(printCity(user1)); // Seoul
console.log(printCity(user2)); // 주소 정보가 없습니다.

** 주의점 : 위 예제처럼 점 표기법을 사용할 수 없는 경우가 존재하는 경우 선택적 체이닝(?.)을 통해 에러를 방지할 수 있지만 남용해선 안된다. **

3. 조건문

- if 조건문

if (조건) {
  // 조건이 참일 때 실행되는 코드
}

if (조건) {
  // 조건이 참일 때 실행되는 코드
} else {
  // 조건이 거짓일 때 실행되는 코드
}

if (조건1) {
  // 조건1이 참일 때 실행되는 코드
} else if (조건2) {
  // 조건2가 참일 때 실행되는 코드
} else {
  // 조건1과 조건2가 모두 거짓일 때 실행되는 코드
}

예제

function isPositive(num) {
  if (num > 0) {
    return '양수입니다.';
  } else if (num < 0) {
    return '음수입니다.';
  } else {
    return '0입니다.';
  }
}

console.log(isPositive(1)); // 양수입니다.
console.log(isPositive(-1)); // 음수입니다.
console.log(isPositive(0)); // 0입니다.

- switch 조건문

매개변수가 특정한 값일 경우 switch 조건문을 사용한다.

switch (조건) {
  case 값1:
    //조건이 '값1'일 경우 실행되는 코드
    break;
  case 값2:
    // 조건이 '값2'일 경우 실행되는 코드
    break;
  default:
  // 일치하는 조건이 없을 경우 실행되는 코드
}

ex. 일치연산자, break

break문 : switch문을 빠져나가기 위해 사용

function getSound(animal) {
  let p;
  switch (animal) {
    case '개':
      p = '멍멍';
      break;
    case '고양이':
      p = '야옹~';
      break;
    case '참새':
      p = '짹짹';
      break;
    case '비둘기':
      p = '구구 구 구';
      break;
    default:
      p = '...';
  }
  return p;
}

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구
console.log(getSound('인간')); // ...?

return

return을 사용하여 함수를 빠져나가기 때문에 break를 사용하지 않아도 된다.

function getSound(animal) {
  switch (animal) {
    case '개':
      return '멍멍!';
    // return을 사용하여 함수를 빠져나가기 때문에 break를 사용하지 않아도 된다.
    case '고양이':
      return '야옹~';
    case '참새':
      return '짹짹';
    case '비둘기':
      return '구구 구 구';
    default:
      return '...?';
  }
}

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구
console.log(getSound('인간')); // ...?

if문으로 바꾸기

function getSound(animal) {
  if (animal === '개') return '멍멍!';
  if (animal === '고양이') return '야옹~';
  if (animal === '참새') return '짹짹';
  if (animal === '비둘기') return '구구 구 구';
  return '...?';
}

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구
console.log(getSound('인간')); // ...?

4. 반복문

- for 반복문

for (초기화; 조건; 증감) { 실행될 코드 }

증가

for (let i = 0; i < 10; i++) {
  console.log(i); // 0부터 9까지 출력
}

감소, break

break문 : 전체 반복문 종료

for (let i = 9; i > -1; i--) {
  if (i < 4) {
    // i가 4보다 작으면
    break; // 반복문을 빠져나옴 (전체 반복 종료)
  }
  console.log(i); // 9 8 7 6 5 4
}

continue

continue문 : 현재 반복을 멈추고 다음 반복을 진행 (건너뛰기)

for (let i = 9; i > 0; i--) {
  if (i % 2 === 0) {
    // i가 짝수면
    continue; // continue를 만나면 아래 코드를 실행하지 않고 건너뛴다. (현재 반복만 종료)
  }
  console.log(i); // 9, 7, 5, 3, 1
}

- for of문

for (변수 of 배열) { 실행될 코드 }

for of문은 배열의 요소를 하나씩 꺼내 변수에 할당

ex1.

const animals = [dog, cat, fish];

// for (let i = 0; i < animals.length; i++) { // animals.length는 배열의 길이
//     console.log(animals[i]); // dog, cat, fish
// }

for (let animal of animals) {
  // 배열의 요소를 하나씩 꺼내 animal에 할당
  console.log(animal); // dog, cat, fish
}

ex2.

const users = [
    {
        name: 'Winter',
        age: 2
    },
    {
        name: 'Fall',
        age: 3
    },
    {
        name: 'River',
        age: 4
    },
]

for (i = 0; i < users.length, i++) {
    console.log(users[i]); // { name: 'Winter', age: 2 }, { name: 'Fall', age: 3 }, { name: 'River', age: 4 }
    console.log(users[i].name); // Winter, Fall, River
}

for (let user of users) {
    console.log(user); // { name: 'Winter', age: 2 }, { name: 'Fall', age: 3 }, { name: 'River', age: 4 }
    console.log(user.name); // Winter, Fall, River
}

- for in문

for (변수 in 객체) { 실행될 코드 }

for in문은 객체의 속성을 하나씩 꺼내 변수에 할당

const user = {
  name: 'Winter',
  age: 2,
  city: 'Seoul',
};

for (let key in user) {
  console.log(key); // name, age, city
  console.log(user[key]); // Winter, 2, Seoul
}

- while문

while (조건) { 실행될 코드 }

while문은 무한 반복이 될 수 있기 때문에 거짓의 조건을 명확하게 명시해야 한다.

let i = 1;
let sum = 0;

while (i <= 10) {
  sum += i;
  i++;
}

console.log(sum); // 55

- do while문

do { 실행될 코드 } while (조건);

do while문은 코드를 먼저 실행하고 조건을 검사한다.
while문과 동일하게 동작하지만 조건이 false일지라도 최소 한 번은 실행된다.

let i = 0;
do {
  console.log(i); // 0부터 9까지 출력
  i++;
} while (i < 10);

저작자표시 비영리 동일조건

'Front > JavaScript' 카테고리의 다른 글

클래스(class) - javascript 기본 (0)	2023.10.05
함수(Function) - javascript 기본 (0)	2023.09.11
연산자(Operator) - javascript 기본 (0)	2023.09.11
JS데이터(JSData) - javascript 기본 (1)	2023.09.11
Javascript-DOM-API-cheatsheet (0)	2023.09.11

현재글구문(Statement) - javascript 기본

#프론트앤드 #Interactive Web #WebDesign #웹표준 # 웹접근성

React, 자기소개서, 컴포넌트, Layout, props, html, 리액트, ChatGPT, github, JS, NextJS, 웹디자인기능사, 표준내장객체, css, useEffect, 웹접근성, jekyll, JavaScript, 웹표준, gsap,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

odada