1️⃣ 객체 프로퍼티 접근 및 조회

  • 점 표기법(객체명.key)과 대괄호 표기법(객체명['key'])으로 프로퍼티에 접근할 수 있습니다.
  • 키에 공백 또는 특수문자가 포함된 경우 대괄호 표기법을 사용해야 합니다.
  • 객체의 프로퍼티 값을 조회하거나 변경할 수 있습니다.
const person = {
  name: 'John',
  age: 30,
  gender: 'male',
  'place of birth': 'Seoul',
};

console.log(person.name); // 점 표기법
console.log(person.age); // 점 표기법
console.log(person['gender']); // 대괄호 표기법
console.log(person['place of birth']); // 대괄호 표기법
// 결과
John
30
male
Seoul
person.age = 20;
console.log(person);
// 결과
{ name: 'John', age: 20, gender: 'male', 'place of birth': 'Seoul' }

 

2️⃣ 객체 프로퍼티 추가 및 삭제

점 표기법 사용하기

  • object.key = value 형식으로 객체에 새로운 프로퍼티를 추가하거나 수정할 수 있습니다.
  • delete object.key 형식으로 객체의 프로퍼티를 삭제할 수 있습니다.
person.bloodType = 'AB+';
delete person.gender;

 

대괄호 표기법 사용하기

  • object['key'] = value 형식으로 객체에 새로운 프로퍼티를 추가하거나 수정할 수 있습니다.
  • delete object['key'] 형식으로 객체의 프로퍼티를 삭제할 수 있습니다.
person['bloodType'] = 'AB+';
delete person['gender'];

 

 

객체에 생성된 데이터 key, value로 구성된 property 입니다.

 

 

'자바스크립트' 카테고리의 다른 글

삼항연산자  (1) 2024.12.16
로또 번호 생성기 과제  (0) 2024.12.16
switch 함수  (0) 2024.12.12
if 문 / if ...else 문/ else if 절  (0) 2024.12.11
비교 연산자  (0) 2024.12.10

1️⃣ 삼항 연산자

  • 조건에 따라 값을 간결하게 선택할 수 있는 연산자입니다.
  • 항이 총 3개 있기 때문에 삼항 연산자라고 부릅니다.
조건식 ? 참일 때의 반환값 : 거짓일 때의 반환값
  • 조건식은 참 또는 거짓으로 평가되는 표현식입니다.
  • 조건식이 참인 경우 콜론 왼쪽의 값이, 거짓인 경우 콜론 오른쪽의 값이 반환됩니다.

 

2️⃣ 삼항 연산자 활용하기

  • 삼항 연산자를 사용해 if...else 문을 보다 간결하게 작성할 수 있습니다.
const score = 85;

if (score >= 70) {
  console.log('Pass');
} else {
  console.log('Fail');
}
// 결과
Pass
const score = 85;

const result = score >= 70 ? 'Pass' : 'Fail';
console.log(result);
// 결과
Pass

 

⚠️ 여기서 잠깐!
  • 삼항 연산자가 항상 if...else 문보다 좋은 것은 아닙니다.
  • 삼항 연산자를 중첩해서 사용하면 코드가 복잡해져 가독성이 떨어집니다.
  • 삼항 연산자는 조건이 간단하고, 조건에 따라 특정 값을 반환하는 경우에 사용됩니다.
  • 복잡한 조건 분기에 따라 결과를 처리할 때는 if...else 문이 더 적합합니다.
const score = 85;

const grade =
  score > 90 ? 'A' : score > 80 ? 'B' : score > 70 ? 'C' : 'F';

console.log(grade);
// 결과
B

 

'자바스크립트' 카테고리의 다른 글

객체 프로퍼티 접근 및 조회  (0) 2024.12.18
로또 번호 생성기 과제  (0) 2024.12.16
switch 함수  (0) 2024.12.12
if 문 / if ...else 문/ else if 절  (0) 2024.12.11
비교 연산자  (0) 2024.12.10

로또 번호 생성기 과제 (난이도 하)

<aside> 🔥

이 과제에서는 HTML, CSS, JavaScript를 사용하여 간단한 로또 번호 생성기를 만드는 법을 배웁니다. 특히, 로또 번호를 생성하는 로직도 직접 한번 생성을 해보면서 함수 생성에 대한 연습을 해볼게요.

</aside>

Screen Recording 2024-09-09 at 3.09.12 AM.mov

1단계: 프로젝트 파일 구조 설정

먼저, 프로젝트를 시작하기 위해 기본 파일 구조를 설정합니다.

  1. 새 폴더 생성: 컴퓨터의 원하는 위치에 'lotto-generator'라는 폴더를 만듭니다.
  2. 파일 생성: 아래와 같은 파일들을 폴더 안에 생성하세요.
    • index.html
    • styles.css
    • script.js

2단계: HTML 파일 만들기

이제 index.html 파일을 열고, 아래의 코드를 입력합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로또 번호 생성기</title>
    <!-- 여기에 styles.css 파일을 불러오는 링크를 추가하세요 -->
</head>
<body>
    <div class="container">
        <h1>로또 번호 생성기</h1>
        <button id="generateButton">행운의 넘버!</button>
        <div id="numbers"></div>
    </div>
    <!-- 여기에 script.js 파일을 불러오는 스크립트를 추가하세요 -->
</body>
</html>

과제: HTML 파일 완성하기

  • <head> 태그 안에 styles.css 파일을 불러오는 <link> 태그를 추가하세요.
  • <body> 태그 끝 부분에 script.js 파일을 불러오는 <script> 태그를 추가하세요.

이 파일들을 불러오지 않으면 스타일과 기능이 적용되지 않습니다.

3단계: CSS 파일 만들기

  • 이제 styles.css 파일을 열고, 아래의 기본적인 스타일을 적용합니다.
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

/* 여기에 container 클래스에 대한 스타일을 추가하세요 */

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* 여기에 numbers ID에 대한 스타일을 추가하세요 */

과제: CSS 파일 완성하기

  • 제가 기본적인 css 만 했으니, 여러분들이 나머지는 완성시켜주세요!
  • .container 클래스에 대한 스타일을 추가하세요. (배경색, 패딩, 그림자 등을 지정해 보세요.)
  • #numbers ID에 대한 스타일을 추가하세요. (폰트 크기나 텍스트 정렬 등을 지정해 보세요.)

4단계: JavaScript 파일 만들기

마지막으로, script.js 파일을 열고, 아래의 코드를 입력합니다.

// 버튼이 눌렸을 때, 이벤트가 작동되도록 이벤트리스너를 넣어준 코드입니다.
document.getElementById('generateButton').addEventListener('click', function() {
    let numbers = generateLottoNumbers();  // 버튼이 눌리면 이 함수가 실행이 될 거에요.
    document.getElementById('numbers').textContent = numbers.join(', ');
});

function generateLottoNumbers() {
	/* 여기에 generateLottoNumbers 함수를 완성해주세요. */
}

과제: generateLottoNumbers 함수 완성하기

generateLottoNumbers 함수는 로또 번호를 생성하는 역할을 합니다. 다음 힌트를 참고하여 함수를 작성하세요:

  1. 빈 배열 만들기: 로또 번호를 저장할 빈 배열을 만듭니다.
  2. 반복문 사용: 배열에 6개의 번호가 들어갈 때까지 반복문을 사용하세요.
  3. 랜덤 번호 생성: 1부터 45 사이의 랜덤 번호를 생성합니다. 이때, Math.random()과 Math.floor() 함수를 사용하면 유용합니다.
  4. 중복 검사: 배열에 이미 같은 번호가 들어있지 않은지 확인한 후, 배열에 추가하세요. 배열의 includes() 메서드를 사용하면 중복 검사가 가능합니다.
  5. 배열 반환: 6개의 번호가 모두 배열에 추가되면, 배열을 반환합니다.

힌트를 참고하여, generateLottoNumbers 함수를 직접 작성해보세요!

5단계: 프로젝트 실행

모든 파일을 저장한 후, index.html 파일을 브라우저에서 열어보세요. HTML, CSS, JavaScript 파일을 올바르게 작성하고 링크했다면, "Generate Numbers" 버튼을 클릭했을 때 1부터 45까지의 로또 번호가 화면에 표시될 것입니다.

추가 과제 (Optional)

기본 기능을 완성했다면, 아래의 추가 과제를 시도해 보세요:

  • 번호를 오름차순으로 정렬해서 출력하기
  • 이전 결과를 저장하고, 새 결과와 비교하기
  • 결과를 더 멋지게

 

로또 번호 생성기.zip
0.00MB

'자바스크립트' 카테고리의 다른 글

객체 프로퍼티 접근 및 조회  (0) 2024.12.18
삼항연산자  (1) 2024.12.16
switch 함수  (0) 2024.12.12
if 문 / if ...else 문/ else if 절  (0) 2024.12.11
비교 연산자  (0) 2024.12.10

 

 

1️⃣ switch 문의 이해

  • 특정 변수(표현식)와 일치하는 값에 해당하는 코드를 실행하는 조건문입니다.
  • 하나의 변수를 여러 고정된 값과 비교하는 경우 if 문보다 switch 문이 적합합니다.
    • if...else 문을 사용해 여러 개의 분기를 만들면 코드가 복잡해질 수 있습니다.
    • 조건이 논리형 표현식이 아닌 단순한 값일 때 switch 문으로 작성하면 더 간결합니다.
switch (표현식) {
  case 값1:
    // 표현식이 값1과 일치할 때 실행될 코드
    break;
    
  case 값2:
    // 표현식이 값2와 일치할 때 실행될 코드
    break;
    
  case 값3:
    // 표현식이 값3과 일치할 때 실행될 코드
    break;
    
  default:
    // 어떤 case도 일치하지 않을 때 실행될 코드
}

 

2️⃣ switch 문의 사용 방법

  • switch 문의 괄호 안에 비교할 표현식(변수)을 작성합니다.
  • case 키워드 옆에는 표현식과 일치 여부를 비교할 값을 작성합니다.
  • case 키워드 다음 문장에는 표현식이 case의 값과 일치할 때 실행할 코드를 작성합니다.
  • default는 어떤 case에도 해당되지 않을 경우에 실행됩니다.
  • 각 case의 끝에 break를 작성해 해당 case만 실행하고 switch 문을 종료합니다.
  • break를 작성하지 않으면 일치하는 case를 실행한 후, 다음 case도 이어서 실행합니다.
const season = 'summer';

switch (season) {
  case 'spring':
    console.log('봄에는 쑥을 드세요.');
  
  case 'summer':
    console.log('여름에는 수박을 드세요.');
  
  case 'autumn':
    console.log('가을에는 사과를 드세요.');
 
  case 'winter':
    console.log('겨울에는 딸기를 드세요.');
 
  default:
    console.log('계절을 입력해 주세요.');
}
// 결과
여름에는 수박을 드세요.
가을에는 사과를 드세요.
겨울에는 딸기를 드세요.
계절을 입력해 주세요.
  • season의 값이 'summer'이므로, '여름에는 수박을 드세요.'가 출력됩니다.
  • 코드에 break가 없기 때문에, summer 이후의 case도 모두 순차적으로 실행됩니다.
  • break를 사용하면 각 계절에 맞는 메시지만 출력하고 switch 문을 종료할 수 있습니다.
const season = 'summer';

switch (season) {
  case 'spring':
    console.log('봄에는 쑥을 드세요.');
    break;

  case 'summer':
    console.log('여름에는 수박을 드세요.');
    break;

  case 'autumn':
    console.log('가을에는 사과를 드세요.');
    break;

  case 'winter':
    console.log('겨울에는 딸기를 드세요.');
    break;

  default:
    console.log('계절을 입력해 주세요.');
}
// 결과
여름에는 수박을 드세요.
  • season의 값이 'summer'이므로, '여름에는 수박을 드세요.'가 출력됩니다.
  • 문장 출력 후 break를 만나 switch 문 전체가 종료됩니다.

 

➕ 여러 case에서 같은 코드를 실행해야 할 경우
  • 같은 코드를 실행하는 조건을 그룹화해서 중복 코드를 줄일 수 있습니다.
    • 같은 그룹의 case를 연속으로 나열하고, case의 본문을 생략합니다.
    • 그룹의 마지막 case 내에 공통으로 실행할 코드를 작성합니다.
    • 각 그룹의 마지막에 break를 작성해 switch 문을 종료합니다.
const grade = 'B';

switch (grade) {
  case 'A+':
  case 'A':
  case 'A-':
    console.log('훌륭합니다!');
    break;

  case 'B+':
  case 'B':
  case 'B-':
    console.log('잘했습니다!');
    break;

  default:
    console.log('노력이 필요합니다.');
}
// 결과
잘했습니다!

 

 

'자바스크립트' 카테고리의 다른 글

삼항연산자  (1) 2024.12.16
로또 번호 생성기 과제  (0) 2024.12.16
if 문 / if ...else 문/ else if 절  (0) 2024.12.11
비교 연산자  (0) 2024.12.10
산술연산자  (0) 2024.12.09

1️⃣ if 문

  • if 문은 조건의 참, 거짓에 따라 다르게 코드를 실행하는 기본적인 조건문입니다.
  • 조건은 ‘ ( ) ’안에 작성하며, 조건이 참일 때만 실행할 코드를 ‘ { } ’안에 작성합니다.
if (조건식) {
  // 조건식이 참일 때 실행될 코드
}
  • 조건이 참인 경우, if 절 블록 내의 코드가 실행됩니다.
const score = 80;

if (score >= 70) {
  console.log('합격하셨군요! 축하합니다!');
}
// 결과
합격하셨군요! 축하합니다!

 

 

  • 조건이 거짓인 경우, if 절 블록 내의 코드가 실행되지 않습니다.
const score = 50; 

if (score >= 70) {
  console.log('합격하셨군요! 축하합니다!');
}
// 결과 없음 

 

 

➕ 논리 연산자로 if 문 조건 설정하기

  • if 문의 조건에서 논리 연산자 &&와 ||를 사용해 여러 조건을 결합할 수 있습니다.
const score = 85;
const absence = 0;

if (score >= 80 && absence <= 4) {
  console.log('우수 학생');
}
// 결과
우수 학생
const score = 15;
const absence = 8;

if (score < 20 || absence >= 5) {
  console.log('재수강 필요');
}
// 결과
재수강 필요

1️⃣ if...else 문

  • if...else 문은 조건이 참일 때와 거짓일 때 각각 다른 코드를 실행하도록 하는 구문입니다.
if (조건) {
  // 조건이 참일 때 실행될 코드
} else {
  // 조건이 거짓일 때 실행될 코드
}
  • 조건이 참일 때, if 절의 코드가 실행됩니다.
const score = 70; 

if (score >= 70) {
  console.log('합격하셨군요. 축하합니다!');
} else {
  console.log('불합격하셨군요. 아쉽습니다!');
}
// 결과
합격하셨군요. 축하합니다!
  • 조건이 거짓일 때, else 절의 코드가 실행됩니다.
const score = 50; 

if (score >= 70) {
  console.log('합격하셨군요. 축하합니다!');
} else {
  console.log('불합격하셨군요. 아쉽습니다!');
}
// 결과
불합격하셨군요. 아쉽습니다!

 

⚠️ 여기서 잠깐!
  • if...else 문에서 if 절은 반드시 필요하지만, else 절은 생략이 가능합니다.
  • if 절 없이 else 절만 작성하면 에러가 발생합니다.
  • if 절과 else 절만 작성할 경우, 둘 중 하나는 반드시 실행됩니다.
  • if 절과 else 절이 모두 실행될 수는 없습니다.
else {
  console.log('else 절이 실행됐습니다.');
}
// 결과
SyntaxError: Unexpected token 'else'

 

 

 

1️⃣ else if 절

  • else if 절은 if와 else 사이에 여러 조건을 추가하는 데 사용됩니다.
  • else if 절은 여러 개 작성할 수 있습니다.
if (조건1) {
  // 조건1이 참일 때 실행될 코드
} else if (조건2) {
  // 조건1이 거짓이고, 조건2가 참일 때 실행될 코드
} else if (조건3) {
  // 조건1, 조건2가 거짓이고, 조건3이 참일 때 실행될 코드
} else if (조건4) {
  // 조건1, 조건2, 조건3이 거짓이고, 조건4가 참일 때 실행될 코드
} else {
  // 모든 조건이 거짓일 때 실행될 코드
}
  • 첫 번째 조건이 거짓일 경우, else if로 추가한 조건들을 순차적으로 평가합니다.
  • 조건이 참인 else if 절을 만나면, 해당 절의 코드를 실행하고 if...else 문을 종료합니다.
  • 모든 조건이 거짓일 경우 마지막 else 절이 실행됩니다.
const score = 10;

if (score >= 70) {
  console.log('학생은 합격입니다!');
} else if (score >= 50) {
  console.log('학생은 재시험을 보세요.');
} else {
  console.log('학생... 힘내요.');
}
// 결과
학생... 힘내요.

 

2️⃣ 중첩 if 문

  • if...else 문 내에 다른 if...else 문을 포함시킬 수 있습니다.
  • 중첩 if 문을 통해 세부적인 분기를 만들어, 보다 복잡한 조건을 처리할 수 있습니다.
const score = 85;

if (score >= 70) {
  if (score >= 90) {
    console.log('A학점입니다.');
  } else if (score >= 80) {
    console.log('B학점입니다.');
  } else {
    console.log('C학점입니다.');
  }
}
// 결과
B학점입니다.

 

 

if 구문 (score에서 점수를 입력하고) if 구문으로 score 값을 매기기 (if의 중첩문)

'자바스크립트' 카테고리의 다른 글

로또 번호 생성기 과제  (0) 2024.12.16
switch 함수  (0) 2024.12.12
비교 연산자  (0) 2024.12.10
산술연산자  (0) 2024.12.09
참조타입  (0) 2024.12.09

1️⃣ 비교 연산자

  • 비교 연산자는 두 값을 비교한 결과를 true(참) 또는 false(거짓)로 반환하는 연산자입니다.
  • 두 값의 크기를 비교하거나, 두 값이 같은지 또는 같지 않은지 비교합니다.
  • 조건문, 반복문, 데이터 필터링 등에 사용됩니다.

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

동등 연산자( == )

  • 동등 연산자는 두 피연산자의 값이 같으면 true를 반환합니다.
  • 비교하는 값의 타입이 서로 다르면 자동으로 타입을 변환해서 비교할 수도 있습니다.

 

일치 연산자( === )

  • 일치 연산자는 두 피연산자의 값과 타입이 모두 같아야 true를 반환합니다.
  • 타입 안정성을 유지하기 위해 일치 연산자 사용을 권장합니다.
const num1 = 10;
const num2 = '10';

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

 

 

 

 

 

 


3️⃣ 논리 연산자

  • 논리 연산자는 참 또는 거짓의 조건을 결합하거나 반전시키는 연산자입니다.
  • 피연산자가 두 개인 이항 논리 연산자와 피연산자가 하나인 단항 논리 연산자가 있습니다.
종류사용 방법설명
&& a && b a와 b 모두 true여야 true를 반환(AND)
|| a || b a와 b 둘 중 하나라도 true면 true를 반환(OR)

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

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️⃣ 논리 반전 연산자

  • 논리 반전 연산자( ! )는 피연산자의 값을 반전시키는 단항 논리 연산자입니다.
종류사용 방법설명
! !a true를 false로, false를 true로 반환

[표] 논리 반전 연산자

console.log(!true);
console.log(!!true);
// 결과
false
true

 

➕ 비트 연산자
  • 숫자를 이진수로 변환한 다음 각 비트에 대해 논리 연산을 수행하는 연산자입니다.
  • 비트는 Binary Digit의 줄임말로, 0 또는 1 두 가지 값만 가질 수 있는 단위입니다.
    • 이진수의 각 자릿수는 비트입니다.
    • 2비트는 4가지 값(00, 01, 10, 11)을 나타낼 수 있습니다.
    • n개의 비트를 결합하면 2ⁿ 가지 값을 나타낼 수 있습니다.
    • 비트 연산자는 두 이진수의 같은 위치의 비트에 대해 논리 연산을 수행합니다.
종류사용 방법설명
& a & b 두 비트가 모두 1이면 1 반환, 나머지 경우 0 반환
| a | b 두 비트가 모두 0이면 0 반환, 나머지 경우 1 반환

[표] 비트 AND와 비트 OR

  • 비트 연산자에서 &, | 기호를 사용하기 때문에 논리 연산자는 &&, ||를 사용합니다.
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

'자바스크립트' 카테고리의 다른 글

switch 함수  (0) 2024.12.12
if 문 / if ...else 문/ else if 절  (0) 2024.12.11
산술연산자  (0) 2024.12.09
참조타입  (0) 2024.12.09
자바스크립트 논리형  (0) 2024.12.05

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

산술 연산자

  • 산술 연산자는 피연산자가 2개인 이항(二項) 연산자입니다.
  • 덧셈( + ), 뺄셈( - ), 곱셈( * ), 나눗셈( / ), 나머지( % ), 거듭제곱( ** ) 등 연산자가 있습니다.
const num1 = 3 + 4;
const num2 = 11 % 2;
const num3 = 2 ** 3;

console.log(num1, num2, num3);
// 결과
7 1 8

 

 

피 연산자가 2개 일 경우에 이항 연산자 라고 합니다.

 

 

 

 

연산자의 우선순위는 곱셈,나눗셈 > 덧셈 뺄셈 순서이다.

 

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

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

 

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

 

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

 

연산 순위가 동일하다면 왼쪽부터 진행된다.

 

 

c=b에 대입하고 b=a에 대입하는 순서임.

 

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

대입 연산자( = )

  • 변수에 값을 대입할 때 사용하는 이항 연산자입니다.
  • 오른쪽 항의 값을 왼쪽 항의 변수에 대입(할당)합니다.
  • 한 줄에 여러 개의 대입 연산자가 있으면, 오른쪽에서 왼쪽으로 차례대로 대입이 이루어집니다.

 

복합 대입 연산자

  • 산술 연산자와 대입 연산자를 하나로 나타내는 이항 연산자입니다.
  • 산술 연산과 값 대입을 한 번에 처리할 수 있어 코드가 간결해지고 가독성이 높아집니다.
종류사용 방법설명
+= a += b a와 b를 더한 후 그 결과를 a에 할당 (a = a + b와 동일)
-= a -= b a에서 b를 뺀 후 그 결과를 a에 할당 (a = a - b와 동일)
*= a *= b a와 b를 곱한 후 그 결과를 a에 할당 (a = a * b와 동일)
/= a /= b a를 b로 나눈 후 그 결과를 a에 할당 (a = a / b와 동일)
%= a %= b a를 b로 나눈 나머지를 a에 할당 (a = a % b와 동일)
**= a **= b a를 b번 거듭제곱한 후 그 결과를 a에 할당 (a = a ** b와 동일)

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

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

결과값 a 값은 8이 나온다.

 

 

 

3️⃣ 증감 연산자

  • 변수의 값을 1씩 증가 또는 감소시키는 단항 연산자입니다.
  • 변수의 값을 1 증가시키는 증가 연산자( ++ )와 1 감소시키는 감소 연산자( -- )가 있습니다.
  • 증감 연산자는 위치에 따라 전위 연산자와 후위 연산자로 나뉘며, 동작 방식이 다릅니다.
    • 전위 연산자는 변수 앞에 붙는 연산자로, 증감 연산을 먼저 진행하고 값을 반환합니다.
    • 후위 연산자는 변수 뒤에 붙는 연산자로, 값을 먼저 반환하고 증감 연산을 진행합니다.
종류사용 방법설명
++ a++ a를 반환한 후 a에 1 더하기
-- a-- a를 반환한 후 a에서 1 빼기

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

let a = 5;
a++;
console.log(a);
// 결과
6
let a = 5;
a--;
console.log(a);
// 결과
4
종류사용 방법설명
++ ++a a에 1을 더한 후 a를 반환
-- --a a에서 1을 뺀 후 a를 반환

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

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의 값이 할당됩니다.

'자바스크립트' 카테고리의 다른 글

if 문 / if ...else 문/ else if 절  (0) 2024.12.11
비교 연산자  (0) 2024.12.10
참조타입  (0) 2024.12.09
자바스크립트 논리형  (0) 2024.12.05
자바스크립트의 숫자형  (0) 2024.12.05

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

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

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

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

 

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

 

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

 

 

'자바스크립트' 카테고리의 다른 글

비교 연산자  (0) 2024.12.10
산술연산자  (0) 2024.12.09
자바스크립트 논리형  (0) 2024.12.05
자바스크립트의 숫자형  (0) 2024.12.05
자바스크립트의 자료형  (0) 2024.12.05

+ Recent posts