포트폴리오

• 'for' 문을 사용하여 반복 작업을 처리하는 예제를 작성하세요.
• 예: 1부터 100까지의 합을 계산하는 프로그램.

    calcuatedSum이라는 함수를 호출해서 console.log 에서 1부터 100까지의 합을 가져온경우.

console.log에서 함수호출없이 바로 출력할경우.

1️⃣ 비교 연산자

• 비교 연산자는 두 값을 비교한 결과를 true(참) 또는 false(거짓)로 반환하는 연산자입니다.

• 두 값의 크기를 비교하거나, 두 값이 같은지 또는 같지 않은지 비교합니다.

• 조건문, 반복문, 데이터 필터링 등에 사용됩니다.

2️⃣ 동등 연산자와 일치 연산자

동등 연산자( == )

• 동등 연산자는 두 피연산자의 값이 같으면 true를 반환합니다.

• 비교하는 값의 타입이 서로 다르면 자동으로 타입을 변환해서 비교할 수도 있습니다.

일치 연산자( === )

• 일치 연산자는 두 피연산자의 값과 타입이 모두 같아야 true를 반환합니다.

• 타입 안정성을 유지하기 위해 일치 연산자 사용을 권장합니다.

const num1 = 10;
const num2 = '10';

console.log(num1 == num2); // 동등 연산자 
console.log(num1 === num2); // 일치 연산자

// 결과
true
false

3️⃣ 논리 연산자

• 논리 연산자는 참 또는 거짓의 조건을 결합하거나 반전시키는 연산자입니다.

• 피연산자가 두 개인 이항 논리 연산자와 피연산자가 하나인 단항 논리 연산자가 있습니다.

[표] 이항 논리 연산자의 종류

const result1 = 40 < 50; // true
const result2 = 10 === '10'; // false
console.log(result1 && result2); 

// 결과
false

const result1 = 40 < 50; // true
const result2 = 10 === '10'; // false
console.log(result1 || result2);

// 결과
true 

4️⃣ 논리 반전 연산자

• 논리 반전 연산자( ! )는 피연산자의 값을 반전시키는 단항 논리 연산자입니다.

[표] 논리 반전 연산자

console.log(!true);
console.log(!!true);

// 결과
false
true

const num1 = 5; // 이진수 101
const num2 = 3; // 이진수 011

console.log(num1 & num2); // 101 & 011 = 001 -> 십진수 1
console.log(num1 | num2); // 101 | 011 = 111 -> 십진수 7

// 결과
1
7

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에서 변수와 객체를 다룰 때 매우 중요합니다.