포트폴리오

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

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

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

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

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

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가 나옵니다.

1️⃣ 논리형

• 논리형(boolean)은 참(true)과 거짓(false)을 나타내는 자료형입니다.

• 비교 연산은 결과로 논리형을 반환합니다.

const a = 5;
const b = 2;
console.log(a > b);

// 결과
true

const a = 5;
const b = 2;
console.log(a < b);

// 결과
false

⚠️ 여기서 잠깐!

• 결과를 변수에 담아서 사용할 수도 있습니다.

const a = 10;
const b = 5;

// a가 b보다 큰지 비교
const isAGreaterThanB = a > b; // true
console.log(isAGreaterThanB);

// 결과
true

• 14강에서 배울 조건문에서 활용할 수 있습니다.

const a = 10;
const b = 5;

const isAGreaterThanB = a > b; // true

// 조건에 따라 다른 동작 수행
if (isAGreaterThanB) {
  console.log('a는 b보다 큽니다.');
} else {
  console.log('a는 b보다 크지 않습니다.');
}

// 결과
a는 b보다 큽니다.

2️⃣ typeof 연산자

typeof operand;

• typeof 연산자는 피연산자의 자료형(데이터 타입)을 문자열로 반환합니다.

const str = 'JavaScript';
console.log(typeof str);

// 결과
string

const num = 5;
console.log(typeof num);

// 결과
number

const bool = true;
console.log(typeof bool);

// 결과
boolean

let undef; // 초기화 안 함
console.log(typeof undef);

// 결과
undefined

3️⃣ undefined와 null

• undefined와 null 모두 값이 없음을 나타내지만 구체적인 의미가 다릅니다.

undefined

• undefined는 아직 값이 할당된 적이 없음을 나타냅니다.

• 변수 선언 후 초기화하기 전에 시스템이 자동으로 할당하는 변수의 기본값입니다.

let foo;
console.log(foo); 

// 결과
undefined

console.log(typeof undefined); 

// 결과
undefined

null

• null은 ‘값이 없음’을 나타내기 위해 개발자가 명시적으로 할당하는 값입니다.

• ‘빈 값’ 또는 ‘유효하지 않은 값’을 설정할 때 사용합니다.

let bar = null;
console.log(bar);

// 결과
null

console.log(typeof null); 

// 결과
object

• null의 타입이 object로 표시되는 것은 언어 설계 초기의 버그 때문입니다.

• 변수의 값이 null인지 확인할 때는 일치 연산자( === )로 null과 같은지 명시적으로 확인합니다.

 undefined  : 변수를 선언하고 값을 지정하지 않았을 때 자동으로 부여 되는값.

null : 값이 없다.

undefined 값이 할당된적이 없다. 자동으로 지정

null : 자동으로 지정하는게 아니고, 값을 지우고 싶을때 사용, 의도적으로 매기는 값임

1️⃣ 숫자형

• 자바스크립트는 정수와 실수를 모두 같은 숫자형(number)으로 관리합니다.

• Infinity, -Infinity, NaN 같은 특수 숫자 값도 표현할 수 있습니다.

const num1 = 123;
const num2 = 12.345;

2️⃣ Infinity

• Infinity는 양의 무한대를, -Infinity는 음의 무한대를 의미합니다.

• 0을 제외한 숫자를 0으로 나누는 경우, Infinity 또는 -Infinity가 반환됩니다.

console.log(1 / 0);
console.log(-1 / 0);
console.log(Infinity);
console.log(1 / Infinity);

// 결과
Infinity
-Infinity
Infinity
0

3️⃣ NaN

• NaN은 Not a Number(숫자가 아님)를 의미합니다.

• 잘못된 산술 연산 또는 수학적으로 정의되지 않는 연산을 할 때 발생합니다.

• NaN을 포함한 연산은 항상 NaN을 반환합니다.

console.log('문자열' / 3);
console.log(NaN + 1);

// 결과
NaN
NaN

⚠️ 여기서 잠깐!

• 자바스크립트에서 0 / 0을 수행하면 NaN이 반환됩니다.

console.log(0 / 0);

// 결과
NaN

alert(1/0) ; 숫자를 0으로 나누는것은 숫자가 무한히 진행된다는뜻이다.

alert('문자열입니다'/3) : 문자열과 숫자를 나누면 어떻게 될까요?

1️⃣ 자바스크립트의 자료형

• 자바스크립트에는 기본 타입(primitive type)과 참조 타입(reference type)이 있습니다.

• 기본 타입은 가장 기본적인 값을 나타내며, 값이 직접 변수에 저장됩니다.

• 참조 타입은 값이 저장된 메모리의 참조(주소에 접근하는 방법)가 변수에 저장됩니다.

2️⃣ 기본 타입

문자열을 따옴표 (' ')로 감싸준다.

줄바꿈을 하는법 '' 작은 따옴표로 작성한 문자는 한줄로만 표현이 가능하다.

줄바꿈을 하는법은 `` 백틱을 사용해서 줄바꿈이 가능하다.

1️⃣ 주석

• 주석(comment)은 소스 코드 내에 작성된 설명문입니다.

• 주석으로 작성된 내용은 코드로 인식되지 않기 때문에 프로그램 실행에 영향을 주지 않습니다.

• 나중에 코드를 읽는 사람이 코드의 역할을 쉽게 이해할 수 있도록 돕습니다.

• 주로 코드의 목적, 동작, 논리, 사용 방법 등을 설명합니다.

• 주석이 잘 작성된 코드는 가독성이 높고, 유지보수가 용이합니다.

• 코드 작성자도 시간이 지나면 내용을 잊을 수 있기 때문에 주석을 작성하는 습관은 중요합니다.

• 자바스크립트는 두 가지 주석 기호를 가지고 있습니다.

• 한 줄의 주석을 작성할 경우, // 기호를 이용합니다.

• // 기호의 오른쪽 부분만 주석으로 처리됩니다.

// 이렇게 한 줄 주석이 가능합니다

• 여러 줄의 주석을 작성할 경우, /* */ 기호를 사용해서 주석 내용을 감쌉니다.

/* 해당 부호로 감싸면
이렇게 여러 줄의 주석을 
작성할 수 있어요 */

2️⃣ 세미콜론으로 문장 구분하기

• 세미콜론( ; )은 각 문장의 끝을 나타냅니다.

• 세미콜론을 찍지 않아도 대부분의 경우에는 실행에 문제가 없습니다.
  • 자바스크립트 엔진은 세미콜론을 자동으로 삽입하는 기능이 있습니다.
  • 세미콜론 자동 삽입이 항상 완벽하게 동작하지는 않으므로 직접 찍는 것을 권장합니다.

let example = '세미콜론이 있어요.';
let example2 = '세미콜론이 없어요.'

 들여쓰기

• 들여쓰기는 코드의 가독성을 높이는 중요한 요소입니다.

• 코드의 구조와 포함 관계를 명확하게 보여 줄 수 있습니다.

• 들여쓰기 여부는 코드 실행에 영향을 미치지 않지만, 적절한 들여쓰기를 하는 것을 권장합니다.

function indentTwo() {
  console.log('two'); // 스페이스 2칸으로 들여쓰기
}

function indentThree() {
   console.log('three'); // 스페이스 3칸으로 들여쓰기
}

function indentFour() {
    console.log('four'); // 스페이스 4칸으로 들여쓰기
}

function indentZero() {
console.log('zero'); // 들여쓰기 없음
}

첫번째로 변수를 지정해줍니다.

예전에는 variable 이라는 var 이라고 칭했지만 몇가지 문제때문에 변수선언을 보통 let 이라고 시작을 합니다.

변수를 선언하고 값을 지정 할당 하지 않으면 undefined 라고 뜹니다. 

let name ;

console.log(name); 을 하게되면

let name[이름선언] = 'Leekyungmin'[값 할당] or 

이경민이라는 네임이라는 곳에 값을 할당한다 라고 표현합니다.

이름을 선언하고 값을 할당합니다.

재할당 하는 방법

name = 'john ' 기존 변수를 지정하고 값을 재할당 해줍니다. 그러면 leekyungmin에서 john 이라고 바뀝니다.

1️⃣ 변수

• 데이터가 저장될 수 있는 공간입니다.

• 변수는 직관적이고 이해하기 쉬운 이름을 붙여서 사용합니다.

• 데이터가 저장되는 공간의 메모리 주소 대신 변수의 이름으로 해당 공간을 가리킬 수 있습니다.

2️⃣ let 키워드

• let 키워드를 사용해 변수를 선언할 수 있습니다.

let name;
console.log(name);

// 결과
undefined

• 변수 name을 선언하면 name이란 이름이 붙은 메모리 공간이 생성됩니다.

• 변수를 선언하고 값을 할당하지 않은 경우 undefined가 자동으로 할당됩니다.

• undefined는 자바스크립트 엔진이 부여한 기본값입니다.

1️⃣ const 키워드

• const 키워드를 사용해 상수를 선언할 수 있습니다.

• 상수(constant)는 변하지 않는 값을 의미합니다.

• const로 선언된 변수는 같은 이름으로 다시 선언될 수 없습니다.

• const 변수는 초기화 이후에 새로운 값을 재할당할 수 없습니다.

값을 할당하지않으면/ 주지않으면 선언을 할수없다는 점이 특이점이다.

const 의 할당된 값은 재할당 불가능

변수명을 지을때 

문자, 숫자, 기호 ($,_) 사용가능

첫글자에는 숫자를 쓰지 않는다.

<style></style> 밑에

<script></script> 추가하기

a ,b에 변수명을 지정해주고, 콘솔로 확인할수있다.

변수는 값을 담아서 한방에 관리하는 함수이다.