[javascript] 객체 개념

[1121 배운 내용 복습] 

 

1. 변수명 정하는 규칙

• 단수/복수 규칙:

• 단수형: 하나의 값만 저장할 때 사용.

const input = document.querySelector('input'); // 하나의 입력 요소를 가리킴

 

• 복수형: 여러 값을 저장하거나 배열로 관리할 때 객체명 뒤에 s를 붙이는 것이 관례.

const inputs = document.querySelectorAll('input'); // 여러 입력 요소를 가리킴

• 이유: 변수명을 보고 데이터의 형태를 직관적으로 이해할 수 있음.

 

2. 배열의 특징과 사용법

• 배열은 순서가 있는 데이터의 집합을 관리한다.

• 배열의 첫 번째 요소는 [0]으로 접근.

const inputs = document.querySelectorAll('input'); 

console.log(inputs[0]); // 첫 번째 입력 요소

 

3. 백틱(Template Literal)

 

• 역할: 문자열과 자바스크립트 구문을 함께 사용.

• 문법: 백틱(`)을 사용하여 문자열을 감싸고, 변수나 표현식을 ${} 안에 삽입.

• 장점:

• 여러 줄 문자열 작성 가능.

• 문자열 내부에서 변수를 쉽게 삽입.

const name = "Alice";

console.log(`Hello, ${name}!`); // 출력: Hello, Alice!

 

4. Query Selector

• 정의: document.querySelector는 CSS 선택자 문법을 사용하여 HTML 요소를 찾는 메서드.

• 특징: 첫 번째로 발견된 단일 요소만 반환.

const button = document.querySelector('.btn'); // 클래스명이 'btn'인 요소 선택

 

5. 이벤트와 이벤트 리스너

• 이벤트 리스너: 특정 요소에 이벤트를 추가하여 사용자 동작을 감지.

• 메서드: addEventListener(이벤트명, 실행할 함수)

const input = document.querySelector('input');

input.addEventListener('keydown', function() {

  console.log('Key pressed!');

});

 

이벤트 종류

1. keydown: 사용자가 키보드를 누른 순간 발생.

2. keyup: 사용자가 키보드를 떼는 순간 발생.

3. click: 요소가 클릭될 때 발생.

 

6. 선언적 함수와 함수 표현식

선언적 함수

• 문법: function 함수이름() { ... }

• 특징: 호이스팅-> 함수 선언이 코드 실행 전에 상단으로 끌어올려짐.

• 어디에서든 호출 가능.

function greet() {

  console.log('Hello!');

}

greet(); // 실행 가능

 

 

함수 표현식

• 문법: const 변수명 = function() { ... };

• 특징:

• 함수 선언이 변수에 할당된 시점 이후에만 호출 가능.

• 호이스팅이 적용되지 않음.

const greet = function() {

  console.log('Hello!');

};

greet(); // 실행 가능

 

요약

• 변수명 규칙 단수형(단일 값)과 복수형(배열) 구분. 복수형에는 s를 붙이는 것이 관례.
• 배열 순서가 있는 데이터 집합. inputs[0]으로 첫 번째 요소 접근.
• 백틱(Template Literal) 백틱(`)을 사용해 문자열과 자바스크립트 구문을 함께 사용.
• Query Selector CSS 선택자를 사용해 단일 HTML 요소를 찾는 메서드. 첫 번째 요소만 반환.
• addEventListener 요소에 이벤트를 추가하는 메서드. keydown, keyup 등 다양한 이벤트 감지 가능.
• 선언적 함수 function 키워드로 정의. 코드 실행 전 어디서든 호출 가능. 호이스팅 적용됨.
• 함수 표현식 함수를 변수에 할당. 변수에 값이 할당된 이후부터 호출 가능. 호이스팅 적용되지 않음.

[1122 배운 내용 정리 🦁]

 

1. 터미널 명령어

 

2. 배열 다루기

• 결과: 위 코드는 배열의 숫자 3을 출력한다.

let arr = [1, 2, 3, 4, 5];
console.log(arr[2]); // 출력: 3

 

3. 반복문 (for)

반복문 기본 구조

for (초기화; 조건문; 증감식) {
    실행할 코드;
}

• 초기화: 반복을 시작하기 위한 초기값 설정.

• 조건문: 조건이 참일 경우 코드 실행.

• 증감식: 반복할 때마다 변수의 값을 증감.

 

• 배열 전체를 순회하려면 배열의 길이(arr.length)를 사용한다.

• 결과: 1, 2, 3, 4, 5를 순서대로 출력.

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

 

배열을 역순으로 출력

• 결과: 5, 4, 3, 2, 1을 순서대로 출력.

const nums = [1, 2, 3, 4, 5];
for (let i = nums.length - 1; i >= 0; i--) {
    console.log(nums[i]);
}

 

4. 조건문과 비교문

조건문의 기본 구조

if (조건식) {
    // 조건식이 참일 때 실행
} else {
    // 조건식이 거짓일 때 실행
}

 

예제: 두 수 비교

• 결과: 두 수 중 큰 값은 8. 출력.

let a = 8;
let b = 5;

if (a > b) {
    console.log(`두 수 중 큰 값은 ${a}.`);
} else {
    console.log(`두 수 중 큰 값은 ${b}.`);
}

 

5. 짝수/홀수 판별

기본 조건문을 사용한 방법 ( 나머지 연산자(%)를 사용하여 짝수/홀수를 구분.)

let c = 7;
if (c % 2 === 0) {
    console.log(`${c}는 짝수입니다.`);
} else {
    console.log(`${c}는 홀수입니다.`);
}

 

삼항 연산자 (조건을 짧게 표현할 때 사용.)

c % 2 === 0 ? console.log('짝수') : console.log('홀수');

 

논리 연산자 (조건을 논리 연산자로 결합.)

!(c % 2) && console.log('짝수') || console.log('홀수');

 

6. 반복문과 조건문 결합

• 배열의 모든 요소에 대해 짝수/홀수 판별.

const nums = [1, 2, 3, 4, 5];
for (let i = 0; i < nums.length; i++) {
    if (nums[i] % 2 === 0) {
        console.log(`${nums[i]}는 짝수입니다!`);
    } else {
        console.log(`${nums[i]}는 홀수입니다!`);
    }
}

 

결과 ->

1는 홀수입니다!
2는 짝수입니다!
3는 홀수입니다!
4는 짝수입니다!
5는 홀수입니다!

 

7. 삼항 연산자와 논리 연산자

삼항 연산자

• 구조: 조건식 ? 참일 때 실행 : 거짓일 때 실행.

• 설명:

• c % 2 == 0: c가 2로 나눠 떨어지면(짝수면) 참(true).

• console.log('even'): 참일 때 실행.

• console.log('odd'): 거짓일 때 실행.

• 결과: c가 짝수일 경우 “even”, 홀수일 경우 “odd” 출력.

c % 2 == 0 ? console.log('even') : console.log('odd');

 

논리 연산자

• 구조: 조건 && 실행 || 실행.

• 설명:

• !(c % 2): c가 짝수면 참(true)로 평가.

• &&: 왼쪽 조건이 참이면 오른쪽 코드 실행.

• ||: 왼쪽 조건이 거짓이면 오른쪽 코드 실행.

• 결과:

• c가 짝수면 “even” 출력.

• c가 홀수면 “odd” 출력.

!(c % 2) && console.log('even') || console.log('odd');

 

3. 삼항 연산자를 사용한 반대 상황

• 구조: 조건식 ? 참일 때 실행 : 거짓일 때 실행.

• 설명:

• c % 2: c가 2로 나눠 떨어지지 않으면(홀수면) 참(true).

• console.log('odd'): 참일 때 실행.

• console.log('even'): 거짓일 때 실행.

• 결과: c가 홀수일 경우 “odd”, 짝수일 경우 “even” 출력.

c % 2 ? console.log('odd') : console.log('even');

 

삼항 연산자와 논리 연산자를 활용한 짝수/홀수 판별

 

오늘 배운 내용은 터미널 명령어, 배열 순회, 조건문, 삼항 연산자와 논리 연산자 활용 등으로 요약할 수 있다.

 

터미널 명령어로는 cd를 통해 하위 폴더로 진입하거나 상위 폴더로 이동(cd ..)하는 법, clear로 창을 정리하고 Ctrl + C로 실행 중인 프로세스를 중지하는 방법을 배웠다. 배열 순회에서는 반복문을 사용하여 배열의 모든 요소를 출력하거나, 역순으로 순회하는 방법을 익혔다.

 

조건문(if-else)을 활용해 두 수 중 더 큰 값을 출력하거나, 나머지 연산자(%)를 사용해 짝수와 홀수를 구분하는 코드를 작성했다. 삼항 연산자와 논리 연산자(&&, ||)를 사용하여 조건에 따른 짝수/홀수 판별 코드를 간결하게 표현하는 법도 연습했다.

 

1. 터미널 명령어

• cd folder: 하위 폴더로 진입.

• cd ..: 상위 폴더로 이동.

• clear: 터미널 창 내용 정리.

• Ctrl + C: 실행 중인 프로세스를 종료.

• nodemon: 파일 변경 시 자동으로 재실행.

 

2. 배열

• 배열의 요소는 0부터 시작하는 인덱스를 가짐.

• 배열 순회 시 반복문을 사용하여 요소를 출력하거나, 배열을 역순으로 탐색 가능.

• 예: nums.length를 사용하여 배열의 길이에 맞게 반복.

 

3. 조건문 (if-else)

• 특정 조건에 따라 코드 실행 흐름을 제어.

• 구조: if (조건) { 실행 코드 } else { 실행 코드 }.

• **나머지 연산자 %**를 활용해 짝수/홀수를 판단 가능.

 

4. 삼항 연산자와 논리 연산자

• 삼항 연산자는 조건문을 간결하게 작성: 조건 ? 참 : 거짓.

• 논리 연산자는 &&, ||를 사용해 조건에 따른 코드 실행:

• &&: 조건이 참일 때만 실행.

• ||: 조건이 거짓일 때 실행.

 

5. 나머지 연산자 (%)

• 숫자를 나눈 뒤의 나머지를 반환.

• 짝수/홀수 판별:

• num % 2 === 0: 짝수.

• num % 2 !== 0: 홀수.

 

6. 반복문 (for)

• 주로 배열 순회나 특정 횟수만큼 반복할 때 사용.

• 구조: for (초기화; 조건; 증감) { 실행할 코드 }.

 

7. JavaScript 전개 연산자 (spread operator)

• 배열과 객체를 쉽게 합치거나 복사.

• 예: [...array1, ...array2].