구문(Statement) - javascript 기본

Front/Javascript

구문(Statement) - javascript 기본

oodada 2023. 9. 11. 22:22

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

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

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

- 필요하지 않은 변수 제거

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

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

console.log(b, c) // 2, 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 obj = {
    e: 1,
    f: 2,
    g: 3,
}

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

console.log(e, free, ten)  // 1 2 10

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

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

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

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

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

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

alert(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' 카테고리의 다른 글

node.js, package.json, npm swiper, npm parcel 설치 및 설정 (0)	2023.09.27
함수(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 #웹표준 # 웹접근성

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

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	31

odada