[JS] 2. 연산자와 구문

Shy·2023년 9월 10일
0

NodeJS(Express&Next.js)

목록 보기
27/39

산술, 할당, 증감 연산자

산술 연산자(Arithmetic Operators)

산술 연산자는 숫자 값에 대한 산술 연산을 수행한다.

  1. + (덧셈): 두 숫자의 합을 계산한다.
  2. - (뺄셈): 두 숫자의 차이를 계산한다.
  3. * (곱셈): 두 숫자의 곱을 계산한다.
  4. / (나눗셈): 한 숫자를 다른 숫자로 나눈다.
  5. % (나머지): 한 숫자를 다른 숫자로 나눈 나머지 값을 계산한다.
  6. ** (지수승): 왼쪽 값을 오른쪽 값의 거듭제곱으로 계산한다.

할당 연산자(Assignment Operators)

할당 연산자는 변수에 값을 할당한다.

  1. = (할당): 오른쪽의 값을 왼쪽의 변수에 할당한다.
  2. += (더하기 후 할당): 왼쪽 변수의 값에 오른쪽 값을 더하고 그 결과를 왼쪽 변수에 할당한다.
  3. -= (빼기 후 할당): 왼쪽 변수의 값에서 오른쪽 값을 뺀 후, 그 결과를 왼쪽 변수에 할당한다.
  4. *= (곱하기 후 할당): 왼쪽 변수의 값에 오른쪽 값을 곱한 후, 그 결과를 왼쪽 변수에 할당한다.
  5. /= (나누기 후 할당): 왼쪽 변수의 값을 오른쪽 값으로 나눈 후, 그 결과를 왼쪽 변수에 할당한다.
  6. %= (나머지 연산 후 할당): 왼쪽 변수의 값에서 오른쪽 값으로 나눈 나머지를 왼쪽 변수에 할당한다.

증감 연산자(Increment & Decrement Operators)

증감 연산자는 변수의 값을 하나 증가시키거나 감소시킨다.

  1. ++ (증가 연산자): 변수의 값을 1만큼 증가시킨다. i++ 또는 ++i의 형태로 사용되며, 전자는 후위 증가, 후자는 전위 증가로 알려져 있다.
  2. -- (감소 연산자): 변수의 값을 1만큼 감소시킨다. i-- 또는 --i의 형태로 사용되며, 전자는 후위 감소, 후자는 전위 감소로 알려져 있다.

부정, 비교 연산자

이 연산자들은 조건문(예: if, while 등)에서 주로 사용되며, 프로그램의 흐름을 제어하는 데 필수적이다.

부정 연산자 (Logical Not Operator)

! (NOT): 이 연산자는 피연산자의 논리 값을 부정한다. 즉, truthy 값을 falsy로, falsy 값을 truthy로 변환한다. 예를 들어, !true는 false를 반환하며, !0는 true를 반환한다.

비교 연산자 (Comparison Operators):

  1. == (Equal): 두 값이 동등한지 확인한다. 값의 데이터 타입이 다르면 자동 형 변환이 발생하여 값의 동등성만을 비교한다. 예: '5' == 5는 true를 반환한다.

  2. === (Strict Equal): 값과 함께 데이터 타입도 비교한다. 값과 데이터 타입이 모두 동일해야 true를 반환한다. 예: '5' === 5는 false를 반환한다.

  3. != (Not Equal): 두 값이 동등하지 않은지 확인한다. 값의 데이터 타입이 다르면 자동 형 변환이 발생하여 값의 동등성을 기준으로 비교한다. 예: '5' != 5는 false를 반환한다.

  4. !== (Strict Not Equal): 값과 함께 데이터 타입도 비교한다. 값 또는 데이터 타입 중 하나라도 다르면 true를 반환한다. 예: '5' !== 5는 true를 반환한다.

  5. > (Greater Than): 왼쪽 값이 오른쪽 값보다 큰 경우 true를 반환한다.

  6. < (Less Than): 왼쪽 값이 오른쪽 값보다 작은 경우 true를 반환한다.

  7. >= (Greater Than or Equal): 왼쪽 값이 오른쪽 값보다 크거나 같은 경우 true를 반환한다.

  8. <= (Less Than or Equal): 왼쪽 값이 오른쪽 값보다 작거나 같은 경우 true를 반환한다.

논리 연산자

JavaScript에서는 세 가지 주요 논리 연산자가 있다.

AND (&&) 연산자

&& (Logical AND): 두 피연산자가 모두 true일 때만 true를 반환한다.

  • 예: true && true는 true를 반환한다.
  • 예: true && false는 false를 반환한다.

&& 연산자는 첫 번째 값이 falsy일 경우 해당 값을 그대로 반환하며, 첫 번째 값이 truthy인 경우 두 번째 값을 반환한다.

OR (||) 연산자

|| (Logical OR): 두 피연산자 중 하나 이상이 true일 때 true를 반환한다.

  • 예: true || false는 true를 반환한다.
  • 예: false || false는 false를 반환한다.

|| 연산자는 첫 번째 값이 truthy일 경우 해당 값을 그대로 반환하며, 첫 번째 값이 falsy인 경우 두 번째 값을 반환한다.

NOT (!) 연산자

! (Logical NOT): 주어진 피연산자의 논리 값을 부정한다. 즉, truthy 값을 falsy로, falsy 값을 truthy로 변환한다.

  • 예: !true는 false를 반환한다.
  • 예: !0는 true를 반환한다.

논리 연산자는 주로 조건문 또는 논리 조건을 평가할 때 사용된다. 특히 JavaScript에서는 truthy와 falsy 값을 활용하여 다양한 방식으로 논리 연산을 수행할 수 있다.

Nullish 병합, 삼항 연산자

병합 연산자와 삼항 연산자는 JavaScript에서 조건을 처리하기 위한 유용한 연산자이다.

Nullish 병합 연산자 (??)

?? (Nullish coalescing operator): 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환한다. 그렇지 않으면 왼쪽 피연산자를 반환한다.

  • 예: null ?? 'default'는 'default'를 반환한다.
  • 예: 'hello' ?? 'default'는 'hello'를 반환한다.

이 연산자는 기본값을 제공하는 경우 등에서 유용하게 사용될 수 있다.

삼항 연산자 (Ternary operator):

조건 ? 값1 : 값2 (Ternary operator): 첫 번째 피연산자는 조건을 나타내며, 이 조건이 true일 경우 두 번째 피연산자(값1)를 반환하고, false일 경우 세 번째 피연산자(값2)를 반환한다.

  • 예: true ? 'yes' : 'no'는 'yes'를 반환한다.
  • 예: false ? 'yes' : 'no'는 'no'를 반환한다.

삼항 연산자는 간단한 조건부 할당이나 반환 등에서 자주 사용된다.

전개 연산자

전개 연산자(Spread Operator)는 JavaScript의 ES6에 도입된 기능으로, 배열이나 객체의 요소를 펼쳐서 개별 요소로 사용할 수 있게 한다. 전개 연산자는 ... 세 개의 점으로 표현된다.

  1. 배열에서의 전개 연산자
    배열의 경우, 전개 연산자를 사용하면 배열의 요소들을 개별 값으로 펼칠 수 있다.
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // [1, 2, 3, 4, 5]
// 여기서 arr2는 arr1의 모든 요소와 추가적으로 4와 5를 포함하는 새 배열을 생성한다.
  1. 객체에서의 전개 연산자
    객체에 대해서도 전개 연산자를 사용할 수 있다. 이는 객체의 속성을 다른 객체에 복사하거나 새 객체를 생성할 때 유용하다.
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

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

// 위 예제에서 obj2는 obj1의 모든 속성과 추가로 c 속성을 가진 새 객체를 생성한다.
  1. 함수 인자에서의 전개 연산자
    전개 연산자는 함수의 인자로 배열의 요소들을 전달할 때도 사용할 수 있다.
function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
// 여기서는 numbers 배열의 각 요소를 sum 함수의 인자로 전달하기 위해 전개 연산자를 사용했다.

주의할 점: 객체를 전개할 때 동일한 키를 가진 속성이 여러 번 전개되면 마지막에 전개된 속성이 이전 값을 덮어쓴다.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combined = { ...obj1, ...obj2 };

console.log(combined); // { a: 1, b: 3, c: 4 }
// 여기서 obj2의 b 속성이 obj1의 b 속성을 덮어쓴다.

구조 분해 할당

구조 분해 할당(Destructuring assignment)은 JavaScript의 ES6에서 도입된 기능으로, 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 할당하는 데 사용된다. 이는 코드를 보다 간결하고 가독성 있게 만들어 준다.

배열의 구조 분해

배열의 각 요소를 개별 변수에 할당할 수 있다.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);  // "red"
console.log(secondColor); // "green"
console.log(thirdColor);  // "blue"

배열의 일부 요소만 변수에 할당하려면 쉼표 ,를 사용하여 건너뛸 수 있다.

const [firstColor, , thirdColor] = colors;
console.log(firstColor);  // "red"
console.log(thirdColor);  // "blue"

객체의 구조 분해

객체의 속성을 개별 변수에 할당할 수 있다.

const user = {
    name: 'John',
    age: 30
};

const { name, age } = user;

console.log(name); // "John"
console.log(age);  // 30

객체 속성의 이름과 다른 이름의 변수에 값을 할당하려면 다음과 같이 할 수 있다.

const { name: userName, age: userAge } = user;

console.log(userName); // "John"
console.log(userAge);  // 30

함수 매개변수에서의 구조 분해

함수 매개변수에서도 구조 분해 할당을 사용하여 직접 값을 추출할 수 있다.

function displayInfo({ name, age }) {
    console.log(`Name is ${name}, Age is ${age}`);
}

displayInfo(user); // "Name is John, Age is 30"

기본값 설정

구조 분해 할당에서는 배열이나 객체의 해당 값이 없을 때 기본값을 설정할 수 있다.

const { name, age, gender = "unknown" } = user;
console.log(gender); // "unknown"

중첩된 객체나 배열에서의 구조 분해

객체나 배열이 중첩된 경우에도 구조 분해 할당을 사용할 수 있다.

const student = {
    name: "Alex",
    scores: {
        math: 90,
        english: 85
    }
};

const { name, scores: { math, english } } = student;

console.log(name);   // "Alex"
console.log(math);   // 90
console.log(english); // 85

구조 분해 할당은 코드의 중복을 줄이고, 가독성을 향상시키며, 일부 데이터만 선택적으로 추출할 때 매우 유용하다.

선택적 체이닝

선택적 체이닝(Optional Chaining)은 JavaScript의 ES2020 (ES11)에서 도입된 기능으로, 객체의 내부 속성에 접근할 때 해당 속성이 존재하지 않아도 오류가 발생하지 않도록 하는 문법이다. 선택적 체이닝을 사용하면 깊은 중첩된 객체의 속성에 안전하게 접근할 수 있다.

선택적 체이닝은 ?. 연산자를 사용하여 수행된다.

기본 사용 예쩨

const user = {
    name: "John",
    address: {
        city: "Seoul"
    }
};

// 선택적 체이닝을 사용하지 않은 경우
console.log(user.address.city);     // "Seoul"
console.log(user.address.country);  // undefined
//console.log(user.details.age);     // 오류: Cannot read property 'age' of undefined

// 선택적 체이닝을 사용한 경우
console.log(user?.details?.age);    // undefined

위의 예에서, user 객체에는 details라는 속성이 없다. 일반적으로 중첩 속성에 접근하려고 시도하면, 해당 속성이 존재하지 않는 경우 오류가 발생한다. 하지만 선택적 체이닝을 사용하면 해당 경로의 속성이 존재하지 않을 때 오류를 발생시키지 않고 undefined를 반환한다.

배열에서의 사용

선택적 체이닝은 배열에도 사용될 수 있다.

const users = [
    { name: "John", age: 25 },
    { name: "Doe" }
];

console.log(users[0]?.age);  // 25
console.log(users[1]?.age);  // undefined

함수나 메서드 호출에서의 사용

또한 함수나 메서드가 존재하는지 확인할 때도 선택적 체이닝을 사용할 수 있다.

let userFunc = null;

console.log(userFunc?.()); // 아무런 동작이 없음 (오류 발생하지 않음)

선택적 체이닝은 코드의 가독성을 향상시키고, 존재하지 않는 속성에 접근하려고 할 때 발생하는 오류를 방지하는 데 유용하다. 하지만 오버 사용은 코드의 복잡성을 높일 수 있으므로 적절하게 사용하는 것이 좋다.

If, Switch 조건문

if-else 조건문

if-else 조건문을 사용하면 특정 조건이 참(true)일 때 코드 블록을 실행할 수 있다.

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

if (age >= 18) {
    console.log("성인입니다.");
} else {
    console.log("청소년입니다.");
}

else if를 사용하면 여러 조건을 체크할 수 있다.

let score = 85;

if (score >= 90) {
    console.log("A등급");
} else if (score >= 80) {
    console.log("B등급");
} else {
    console.log("C등급 이하");
}

switch 조건문

switch문은 주어진 표현식의 값을 여러 개의 클로즈와 비교하여 프로그램의 실행 흐름을 제어한다.

switch (표현식) {
    case 값1:
        // 표현식의 결과가 값1과 일치할 때 실행되는 코드
        break;
    case 값2:
        // 표현식의 결과가 값2와 일치할 때 실행되는 코드
        break;
    // ... 더 많은 case ...
    default:
        // 표현식의 결과가 어떤 case 값과도 일치하지 않을 때 실행되는 코드
}
let fruit = "apple";

switch (fruit) {
    case "banana":
        console.log("바나나는 노란색입니다.");
        break;
    case "apple":
        console.log("사과는 빨간색입니다.");
        break;
    default:
        console.log("알 수 없는 과일입니다.");
}

주의할 점

  • 각 case 뒤에는 break 문을 넣어야 한다. 만약 break를 생략하면 그 다음 case의 코드까지 실행된다. 이를 의도적으로 사용하기도 한다.
  • default 클로즈는 선택적이다. switch문에서 어떤 case에도 해당하지 않는 경우에 실행된다.

두 조건문 모두 적절한 상황에 따라 선택하여 사용하면 된다. if-else는 단순하고 명확한 조건을 평가할 때, switch는 같은 변수나 표현식을 여러 값과 비교할 때 주로 사용한다.

For, For of, For in 반복문

for 반복문

기본적인 반복문으로, 초기화, 조건, 반복 후 작업을 포함하는 구조를 가진다.

for (초기화; 조건; 반복 후 작업) {
    // 조건이 참인 동안 실행되는 코드
}
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 0, 1, 2, 3, 4가 출력된다.

for...of 반복문

이 반복문은 배열, 문자열, Map, Set 등과 같은 반복 가능한 객체에 대해 반복을 수행한다.

for (변수 of 반복가능한객체) {
    // 각 반복에서 변수에는 반복가능한객체의 값이 할당된다.
}
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
    console.log(fruit);
}
// apple, banana, cherry가 순차적으로 출력된다.

for...in 반복문

객체의 속성에 대해 반복을 수행한다. 배열에 대해서도 사용할 수 있지만, for...of나 일반적인 for 반복문을 사용하는 것이 권장된다. for...in은 객체의 속성 키를 반환한다.

for (변수 in 객체) {
    // 각 반복에서 변수에는 객체의 속성 키가 할당된다.
}
const person = {
    name: "John",
    age: 30,
    city: "Seoul"
};

for (const key in person) {
    console.log(key + ": " + person[key]);
}
// name: John, age: 30, city: Seoul이 순차적으로 출력된다.

주의할 점

  • for...in을 배열에 사용할 경우, 배열의 인덱스뿐만 아니라 배열 객체의 모든 열거 가능한 속성에 대해 반복을 수행한다. 따라서 배열에 대해 반복을 수행할 때는 for...of를 사용하는 것이 좋다.
  • for...of는 속성의 값을 반환하는 반면, for...in은 속성의 키나 인덱스를 반환한다.

각 반복문은 특정 상황에 맞게 사용하면 좋다. 원하는 동작과 데이터 유형에 따라 적절한 반복문을 선택하여 사용하면 된다.

While, Do while 반복문

while 반복문

while 반복문은 주어진 조건이 참인 동안 코드 블록을 반복하여 실행한다.

while (조건) {
    // 조건이 참인 동안 실행되는 코드
}
let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}
// 0, 1, 2, 3, 4가 순차적으로 출력된다.

do...while 반복문

do...while 반복문은 코드 블록을 먼저 한 번 실행한 후, 조건을 검사하여 해당 조건이 참인 경우 계속해서 코드 블록을 실행한다. 즉, 조건에 관계없이 코드 블록이 최소 한 번은 실행된다.

do {
    // 코드 블록
} while (조건);
let count = 0;
do {
    console.log(count);
    count++;
} while (count < 5);
// 0, 1, 2, 3, 4가 순차적으로 출력된다.

차이점

  • while 반복문은 조건이 참이 아니라면 코드 블록을 한 번도 실행하지 않을 수 있다.
  • do...while 반복문은 조건의 결과에 관계없이 코드 블록을 최소한 한 번은 실행한다.

각 반복문은 사용하는 상황에 따라 장단점이 있다. 필요에 따라 적절한 반복문을 선택하여 사용하면 된다.

profile
Shy
스벨트 자바스크립트 익히는중...
이전 포스트

[JS] 1. JS 데이터

다음 포스트

[JS] 3. 함수

0개의 댓글