포트폴리오

1️⃣ 산술 연산자와 우선순위

산술 연산자

• 산술 연산자는 피연산자가 2개인 이항(二項) 연산자입니다.

• 덧셈( + ), 뺄셈( - ), 곱셈( * ), 나눗셈( / ), 나머지( % ), 거듭제곱( ** ) 등 연산자가 있습니다.

const num1 = 3 + 4;
const num2 = 11 % 2;
const num3 = 2 ** 3;

console.log(num1, num2, num3);

// 결과
7 1 8

하지만 괄호를 사용할 경우에 우선순위는 변동이 있을 수 있다.

let i = 3 + 4 *5; = 23 의 값이지만

i = (3+4)*5; 는 3과 4를 더하고 5를 곱하기 때문이다.

=  대입연산자, 할당연산자 라고 합니다.

2️⃣ 대입 연산자와 복합 대입 연산자

대입 연산자( = )

• 변수에 값을 대입할 때 사용하는 이항 연산자입니다.

• 오른쪽 항의 값을 왼쪽 항의 변수에 대입(할당)합니다.

• 한 줄에 여러 개의 대입 연산자가 있으면, 오른쪽에서 왼쪽으로 차례대로 대입이 이루어집니다.

복합 대입 연산자

• 산술 연산자와 대입 연산자를 하나로 나타내는 이항 연산자입니다.

• 산술 연산과 값 대입을 한 번에 처리할 수 있어 코드가 간결해지고 가독성이 높아집니다.

[표] 복합 대입 연산자의 종류

let a = 5;
a += 3; 
console.log(a);

// 결과
8

let a = 5;
a -= 4; 
console.log(a);

// 결과
1

let a = 5;
a *= 6; 
console.log(a);

// 결과
30

3️⃣ 증감 연산자

• 변수의 값을 1씩 증가 또는 감소시키는 단항 연산자입니다.

• 변수의 값을 1 증가시키는 증가 연산자( ++ )와 1 감소시키는 감소 연산자( -- )가 있습니다.

• 증감 연산자는 위치에 따라 전위 연산자와 후위 연산자로 나뉘며, 동작 방식이 다릅니다.
  • 전위 연산자는 변수 앞에 붙는 연산자로, 증감 연산을 먼저 진행하고 값을 반환합니다.
  • 후위 연산자는 변수 뒤에 붙는 연산자로, 값을 먼저 반환하고 증감 연산을 진행합니다.

[표] 후위 증감 연산자의 종류

let a = 5;
a++;
console.log(a);

// 결과
6

let a = 5;
a--;
console.log(a);

// 결과
4

[표] 전위 증감 연산자의 종류

let a = 5;
let b = a++;
console.log('a:', a, 'b:', b);

// 결과
a: 6 b: 5

• 후위 증가 연산 결과를 대입했으므로, b에는 증가 전의 a의 값이 할당됩니다.

let a = 5;
let b = ++a;
console.log('a:', a, 'b:', b);

// 결과
a: 6 b: 6

• 전위 증가 연산 결과를 대입했으므로, b에는 이미 증가한 a의 값이 할당됩니다.

이렇게 큰 정보들은 주소를 통해서 참조하게 되는데, 배열이나 함수도 마찬가지입니다.

여러정보가 담긴 큰 물건은 상자에 담기기 어려우므로 

큰 물건이 저장되어있는곳이 (객체) = 포스트잇 

그 쪽지를 보고 물건을 찾아갈거에요.

객체는 다양한 값을 담을수있는데 중괄호로 감싸서 키와 값의 한 쌍으로 저장이 되는 것입니다.

1️⃣ 참조 타입

• 변수에 실제 데이터 값이 아닌 메모리 주소(참조, reference)를 저장하는 데이터 타입입니다.

• 변수에 저장된 메모리 주소를 참조해서 실제 데이터를 찾고, 읽어 올 수 있습니다.

• 객체(object), 배열(array), 함수(function) 등을 포함합니다.

• 하나의 변수에 기본 타입보다 더 많은 정보를 담을 수 있습니다.

• 참조 타입을 통해 복잡한 데이터 구조를 효율적으로 다룰 수 있습니다.

참조 타입이 필요한 이유

• 기본 타입만으로 사용자의 데이터를 관리하는 것은 한계가 있습니다.

• 데이터를 별개의 변수로 선언하면 데이터 사이의 관계를 표현하기 어렵습니다.

• 참조 타입을 사용하면 하나의 변수 안에 관련된 데이터를 묶어서 저장할 수 있습니다.

// 이름을 통해 변수 관계 표현
// 데이터가 많아질 경우 관리 어려움
const gildongName = 'HongGilDong';
const gildongAge = 30;

2️⃣ 객체

• 객체는 ‘ { } ‘로 묶인 프로퍼티(property, 속성)의 집합입니다.

• 다양한 타입의 데이터를 하나의 데이터 구조 안에 저장할 수 있습니다.

• 프로퍼티는 키(key) 문자 와 값(value) 모든 타입가능 의 쌍으로 이루어져 있습니다.

• 키와 값은 콜론( : )으로 구분됩니다.

• 키는 프로퍼티의 이름으로, 문자열을 주로 사용합니다.

• 값은 모든 타입이 될 수 있습니다.

const person = {
  name: 'HongGilDong',
  age: 30,
};

console.log(person);

// 결과
{ name: 'HongGilDong', age: 30 }

• person 객체는 name 프로퍼티와 age 프로퍼티로 구성되어 있습니다.

• name이라는 키에 대응하는 값은 문자열 'HongGilDong'입니다.

• age라는 키에 대응하는 값은 숫자 30입니다.

console.log(typeof person);

// 결과
object

• typeof 연산자로 객체의 데이터 타입을 확인하면 object가 나옵니다.

JavaScript에서 지원하는 데이터 타입은 크게 두 가지로 나눌 수 있습니다:

**기본형 (Primitive Type)**과 참조형 (Reference Type).

이 두 가지 타입은 메모리 관리 방식과 값 저장 방식에서 차이가 있습니다.

1. 기본형 (Primitive Type)

기본형 데이터 타입은 값 자체가 변수에 저장되는 데이터 타입입니다. 이 값들은 불변(immutable)하며, 변수에 할당된 값을 변경할 수 없습니다. 또한, 기본형은 비교 시 값만을 비교합니다.

기본형 데이터 타입:

• string: 문자열을 나타냅니다.
  • 예시: 'Hello, world!', "JavaScript"
  • 특징: 문자들의 집합이며, 불변(immutable)입니다. 즉, 문자열을 수정할 수 없습니다.
• number: 숫자 값을 나타냅니다. 정수와 부동소수점을 모두 포함합니다.
  • 예시: 42, 3.14, -10
  • 특징: 숫자는 모두 IEEE 754 표준을 따르는 부동소수점 형식으로 저장됩니다.
  • 주의: NaN (Not a Number)과 Infinity, -Infinity 등의 특수한 숫자도 존재합니다.
• boolean: 참(true) 또는 거짓(false)을 나타냅니다.
  • 예시: true, false
  • 특징: 논리값을 나타내며, 조건문에서 주로 사용됩니다.
• undefined: 변수는 선언되었지만, 값이 할당되지 않은 상태를 나타냅니다.
  • 예시: let x; // x는 undefined
  • 특징: 변수는 선언되었지만 아직 값이 할당되지 않았을 때 자동으로 undefined 값이 됩니다.
• null: 의도적인 빈 값을 나타냅니다. null은 객체가 없음을 명시적으로 나타내는 값입니다.
  • 예시: let y = null;
  • 특징: null은 "없음" 또는 "빈 값"을 의도적으로 할당할 때 사용되며, 객체가 아닌 원시 값입니다.
• symbol: 고유하고 변경 불가능한 값을 생성하는 데이터 타입입니다. 주로 객체의 키로 사용됩니다.
  • 예시: let sym = Symbol('description');
  • 특징: 유일한 값을 생성하며, Symbol() 함수로 생성합니다. 다른 값들과 구별되는 고유한 값이기 때문에 주로 객체 프로퍼티의 고유 키를 만들 때 사용됩니다.
• bigint: 큰 정수를 표현하는 데이터 타입입니다. JavaScript의 number 타입은 안전하게 표현할 수 있는 정수 범위가 제한적이지만, bigint를 사용하면 아주 큰 정수를 처리할 수 있습니다.
  • 예시: let big = 1234567890123456789012345678901234567890n;
  • 특징: 크기가 매우 큰 정수를 나타내며, 뒤에 n을 붙여서 선언합니다.
• 2. 참조형 (Reference Type)참조형 데이터 타입:
  • object: 다양한 값을 속성으로 가질 수 있는 복합적인 데이터 타입입니다. 객체는 키-값 쌍으로 이루어집니다.
    • 예시:
      javascript

      코드 복사

      let person = { name: 'Alice', age: 30 };
    • 특징: 객체는 속성(property)을 가지며, 배열, 함수, 날짜 등 다양한 형태로 확장 가능합니다.
  • array: 배열은 객체의 한 종류로, 여러 값을 순서대로 저장할 수 있는 자료구조입니다.
    • 예시:
      javascript

      코드 복사

      let numbers = [1, 2, 3, 4];
    • 특징: 배열은 인덱스를 사용하여 값을 참조하며, 배열의 크기는 동적으로 변할 수 있습니다.
  • function: 함수도 객체로 취급됩니다. 함수는 일급 객체로, 변수에 할당하거나 다른 함수의 인자로 전달될 수 있습니다.
    • 예시:
      javascript

      코드 복사

      function greet(name) { return `Hello, ${name}!`; }
    • 특징: 함수는 호출 가능한 객체로, 인자를 받아서 결과를 반환할 수 있습니다.
• 참조형 데이터 타입은 메모리 주소를 변수에 저장하는 데이터 타입입니다. 이 값들은 변경 가능(mutable)하며, 객체를 복사하거나 할당할 때 주소를 공유합니다.

3. 기본형 vs 참조형 차이점

특징기본형 (Primitive)참조형 (Reference)

결론:

• 기본형 (Primitive Type): 값 자체가 저장되고, 변경할 수 없습니다. 비교 시 값만 비교합니다.
• 참조형 (Reference Type): 주소가 저장되고, 변경할 수 있습니다. 비교 시 주소를 비교합니다.

이러한 차이점을 이해하는 것은 JavaScript에서 변수와 객체를 다룰 때 매우 중요합니다.

• while (n > 0) 반복문을 사용하여 n이 0이 될 때까지 각 자릿수를 더합니다.
  • n % 10으로 n의 마지막 자릿수를 추출하여 sum에 더합니다.
  • n /= 10으로 n에서 마지막 자릿수를 제거합니다.
• 모든 자릿수를 더한 후, sum 값을 반환합니다.

• 입력: N = 123
  • 자릿수 합: 1 + 2 + 3 = 6
• 입력: N = 987
  • 자릿수 합: 9 + 8 + 7 = 24

위 코드가 각 자릿수의 합을 계산하여 반환하는 함수입니다.

예시로 n = 123을 생각해보자!

1. n % 10 (나머지)

• n % 10은 **"나누고 남은 것"**을 말해요.
• 우리가 123을 10으로 나누면, **"10이 몇 번 들어가나?"**를 먼저 생각해요.
  • 123 ÷ 10 = 12… 3 (3이 남아요)
  • 즉, n % 10은 3이 남는 거예요.

그래서, 123 % 10은 3!

2. n / 10 (몫)

• n / 10은 **"나눈 후에 남은 큰 수"**를 말해요.
• 123을 10으로 나누면, 123에서 10이 몇 번 들어가는지 보면,
  • 123 ÷ 10 = 12… 나머지 3은 버리고 12가 남아요.

그래서, 123 / 10은 12!

예시로 더 풀어보자!

n = 987일 때:

• 987 % 10은 987을 10으로 나누면 7이 남아요! (왜냐하면 987 ÷ 10 = 98… 나머지 7)
• 987 / 10은 987을 10으로 나누면 98이 남아요! (왜냐하면 987 ÷ 10 = 98, 나머지는 버리고 몫만 남아요)

핵심:

• % 10: 마지막 자리를 남기고 싶을 때 사용해요!
• / 10: 마지막 자리를 떼어내고 나머지만 남기고 싶을 때 사용해요!

<aside> 📖 JavaScript에서 조건문을 활용하는 방법을 배우는 것이 목표입니다.

</aside>

💪🏻과제를 수행하고나 나면 할 수 있어요!

• 반복문을 사용하는 방법을 이해할 수 있습니다.
• 반복문을 사용하여 배열이나 문자열을 처리할 수 있습니다.

<aside> ⚡ Notification: 과제 시작 전 확인할 내용!

</aside>

✅ 과제 시작 전 다음 내용을 셀프 체크해보세요.

• [ ] 변수를 선언할 수 있다.
• [ ] 반복문의 조건을 제시할 수 있다.
• [ ] console.log() 를 사용할 수 있다.
• 🥚개념 한 판 요약

  ---

  • 반복문이란 무엇인가요?
    • 반복문은 특정 조건이 참인 동안 같은 코드를 여러 번 실행하는 구문입니다.
  • for 반복문
    • 주어진 횟수만큼 코드를 반복 실행합니다.
    • for (let i = 0; i < 5; i++) { console.log("Hello, World!"); }
  • while 반복문
    • 조건이 참인 동안 코드를 반복 실행합니다.
    • let count = 0; while (count < 5) { console.log("Counting: " + count); count++; }
  • do...while 반복문
    • 코드 블록을 먼저 실행한 후 조건을 검사하여, 조건이 참이면 계속 반복합니다.
    • let number = 0; do { console.log("Number: " + number); number++; } while (number < 5);
  • 중첩 반복문
    • 반복문 안에 또 다른 반복문을 포함하여 다차원 구조를 처리할 수 있습니다.
    • for (let i = 1; i <= 3; i++) { for (let j = 1; j <= 3; j++) { console.log(`i: ${i}, j: ${j}`); } }
  </aside>
• <aside> 🐣 JavaScript 반복문 개념 한판 요약!

<aside> 🍀 본격적으로 시작해 볼까요?

1. 짝수만 출력하기

• for 반복문을 사용하여 1부터 20까지의 숫자 중 짝수만 출력하세요.

<aside> 🔥 완료하셨다면?

</aside>

• 전체코드를 복사하여 퀘스트로 제출해주세요
• 데일리 퀘스트 👉 [ 링크 ] 를 클릭 하여 제출해주세요