44. javascript 기초 개념 정리

Mission: javascript 개념 정리

변수

어떤 정보에 이름을 붙여 저장할 수 있다.

• 변수 이름은 문자로 시작해야 한다.
• 변수 이름에는 숫자, 문자, 달러($), 밑줄(_)을 포함할 수 있다.
• 변수 이름은 대소문자를 구분한다.
• 예약어(JavaScript에서 이미 특정 용도로 예약된 단어)는 변수 이름으로 사용할 수 없다.
• 반적으로 모든 변수를 상수(const)로 선언하고 나중에 변경이 필요한 변수만 let을 사용하여 선언하는 것이 좋다.

// 유효한 변수명
let age = 30;
let name = "John";
let _variable = "Hello";
let $price = 50;
let myVar = true;
let user123 = "Alice";

// 잘못된 변수명
let 123user = "Error"; // 숫자로 시작해서 잘못된 변수 이름
let my-variable = "Error"; // 하이픈(-)은 변수 이름에 사용할 수 없음
let let = "Error"; // 예약어(let)를 변수 이름으로 사용할 수 없음
let function = "Error"; // 예약어(function)를 변수 이름으로 사용할 수 없음
let class = "Error"; // 예약어(class)를 변수 이름으로 사용할 수 없음

alert, prompt, confirm

자바스크립트에서는 alert, prompt, confirm 함수를 사용하여 메시지를 출력하거나 사용자와 상호작용할 수 있다.

• alert : 메시지를 띄우고 확인 버튼을 누를 때까지 대기한다.

alert("안녕하세요! 자바스크립트의 alert 함수를 사용해봅시다.");

• prompt : 사용자로부터 값을 입력받는 창을 띄우고,입력된 값은 기본적으로 문자열로 처리된다. 숫자로 사용하려면 명시적 형변환 필요하다.

let name = prompt("이름을 입력해주세요:", "홍길동");
if (name !== null) {
  alert("안녕하세요, " + name + "님!");
} else {
  alert("이름 입력이 취소되었습니다.");
}

• confirm : 사용자가 확인 또는 취소 버튼을 누르는 것으로, 불린 형태의 결과를 반환한다.

let result = confirm("계속 진행하시겠습니까?");
if (result) {
  alert("계속해서 작업을 진행합니다.");
} else {
  alert("작업을 취소합니다.");
}

• 자동형변환 : 변수나 값의 자료형을 자동으로 변환하는 것을 의미한다. 편리하지만 때로는 의도하지 않은 동작을 유발할 수도 있으므로 주의해야 한다.

let num = 5;
let str = "10";
let result = num + str; 
// 숫자 5가 문자열 "10"으로 자동 변환되어 "510"이 된다.

• 명시적 형변환 : 방법으로 String(), Number(), Boolean() 함수를 사용하여 숫자를 문자열로, 문자열을 숫자로, 불린 값을 문자열이나 숫자로 변환할 수 있다.

let num1 = "5";
let num2 = "10";
let sum = Number(num1) + Number(num2);
// 문자열을 숫자로 변환하여 더하기 연산

기본 연산자

덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%) 등으로 기본적인 연산을 수행한다.

• 연산자들은 우선순위가 있으므로 적절한 괄호를 사용하여 원하는 값을 얻을 수 있다.

let x = 10;
let y = 3;
let sum = x + y; // 덧셈 (결과: 13)
let difference = x - y; // 뺄셈 (결과: 7)
let product = x * y; // 곱셈 (결과: 30)
let quotient = x / y; // 나눗셈 (결과: 3.333...)
let remainder = x % y; // 나머지 (결과: 1)

거듭제곱

별(*)을 두 번 적어준다. (예: 2 ** 3은 2의 3제곱)

let a = 2;
let b = 3;
let result = a ** b; // 거듭제곱 (결과: 8)

줄여 쓰기

let num = 5;
num += 2; // num = num + 2; (결과: 7)
num -= 3; // num = num - 3; (결과: 4)
num *= 2; // num = num * 2; (결과: 8)
num /= 4; // num = num / 4; (결과: 2)

증가 연산자와 감소 연산자

변수의 값을 1만큼 증가시키거나 감소시킨다.

• 변수 앞 또는 뒤에 사용할 수 있으며, 위치에 따라 변수의 값이 변경되는 시점이 달라지므로 주의해야 한다.

let p = 5;
let q = 5;
let r = ++p; // r에는 6이 할당되고, p는 6이 됨
let s = q++; // s에는 5가 할당되고, q는 6이 됨

비교 연산자

두 값을 비교하여 true 또는 false를 반환한다. 주로 if문과 같은 조건문에서 사용되며, 두 값의 크기나 동등 여부를 확인할 때 활용한다.

let age = 20;
if (age >= 18) {
  console.log("성인입니다.");
} else {
  console.log("미성년자입니다.");
}
// 결과: "성인입니다." (age가 18 이상이므로 true 조건이 성립)

조건문

주어진 조건에 따라 다른 동작을 수행하는 제어 구조이다.

• 비교 연산자를 사용하여 조건을 설정하고, 조건이 참(true)인 경우에만 특정 코드 블록이 실행된다.

let score = 85;
if (score >= 90) {
  console.log("A 학점입니다.");
} else if (score >= 80) {
  console.log("B 학점입니다.");
} else if (score >= 70) {
  console.log("C 학점입니다.");
} else {
  console.log("D 학점입니다.");
}
// 결과: "B 학점입니다." (score가 85이므로 두 번째 조건이 성립)

AND(&&)

모든 값이 true일 때만 true를 반환한다. 하나라도 false가 있으면 false를 반환한다.

const isMale = true;
const isKorean = false;
if (isMale && isKorean) {
  console.log("스티브 잡스는 한국인이며 남자입니다.");
} else {
  console.log("스티브 잡스는 한국인이거나 남자가 아닙니다.");
}
// 결과: false

OR(||)

하나라도 true가 있으면 true를 반환한다. 모든 값이 false일 때만 false를 반환한다.

const name = "존";
const isAdult = true;
if (name === "토미" || isAdult) {
  console.log("토미이거나 성인입니다.");
} else {
  console.log("토미도 아니고 성인도 아닙니다.");
}
// 결과: true

NOT(!)

단일 값의 논리를 반대로 바꾼다. true면 false로, false면 true로 바꾼다.

const age = 20;
const isAdult = !(age < 18);
if (isAdult) {
  console.log("성인입니다.");
} else {
  console.log("미성년자입니다.");
}
// 결과: true

AND 연산자가 OR 연산자보다 우선순위가 높으므로, 필요에 따라 괄호를 사용하여 평가 순서를 명확하게 지정할 수 있다.

반복문

1. for 문

• 초기 값 설정
• 조건 확인 후 실행
• 작업 후 증가/감소

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

2. while 문

• 조건 확인후 실행
• 작업 후 증가/감소

let i = 1;
while (i <= 10) {
  console.log(i);
  i++;
}

3. do-while 문

• 작업 후 증가/감소
• 조건 확인 후 실행(최소 한 번은 실행)

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 10);

Switch 문

복잡한 조건에 따라 다양한 경우를 처리할 때 사용하는 제어 구조이다.

• 여러 개의 if문을 사용하는 것보다 더 간결하고 가독성이 좋은 코드를 작성하는데 도움된다.

switch (값) {
  case 값1:
    // 코드 블록1
    break;
  case 값2:
    // 코드 블록2
    break;
  //...
  default:
    // 값과 일치하는 케이스가 없을 때 실행될 코드 블록
}

let fruit = prompt("사고싶은 과일은?");
let price;
switch (fruit) {
  case "사과":
    price = 100;
    break;
  case "수박":
    price = 500;
    break;
  case "멜론":
  case "복숭아":
    price = 200;
    break;
  default:
    alert("해당하는 과일이 없습니다.");
}
alert(price + "원입니다.");

함수

프로그래밍에서 여러 작업을 묶어서 하나의 블록으로 만들어 재사용할 수 있는 코드 단위이다.

// 함수의 기본 구조
function 함수이름(매개변수1, 매개변수2, ...) {
  // 함수 내부에서 실행할 코드 작성
  return 결과값; // 함수가 값을 반환할 때 사용 (옵션이며 없을 수도 있음)
}

함수 표현식

함수를 이름 없이 변수에 할당하는 방식으로, 코드의 어디서든 호출할 수 있다.

const add = function(a, b) {
  return a + b;
};
console.log(add(3, 5)); // 출력 결과: 8

화살표 함수

함수 표현식보다 더 간결하게 함수를 작성할 수 있는 방법

// 화살표 함수
const add = (a, b) => a + b;
console.log(add(3, 5)); // 출력 결과: 8

객체

객체를 사용하여 정보와 기능을 효율적으로 관리할 수 있으며, 메서드를 활용하여 객체의 동작을 구현할 수 있다.

// 학생 객체 생성
const student1 = {
  name: '철수',
  age: 15,
  introduce: function() {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살입니다.`);
  }
};
const student2 = {
  name: '영희',
  age: 14,
  introduce: function() {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살입니다.`);
  }
};
// 학생 객체의 메서드 호출
student1.introduce(); // 출력 결과: 안녕하세요, 제 이름은 철수이고, 15살입니다.
student2.introduce(); // 출력 결과: 안녕하세요, 제 이름은 영희이고, 14살입니다.

배열(Array)

순서가 있는 리스트로, 여러 항목을 변수로 만들지 않고 하나의 배열에 저장하여 사용할 수 있다.

• 인덱스를 사용하여 각 요소에 접근하며, 인덱스는 0부터 시작한다.
• 배열의 길이를 알고 있기 때문에 for문과 같은 반복 구문을 사용하여 간단하고 효율적인 반복 작업을 수행할 수 있다.

// 배열 생성
const fruits = ['apple', 'banana', 'orange', 'grape'];
// 배열 요소에 접근하기
console.log(fruits[0]); // 출력 결과: "apple"
console.log(fruits[2]); // 출력 결과: "orange"

// 배열의 길이 구하기
const numbers = [10, 20, 30, 40, 50];
const length = numbers.length;
console.log(length); // 출력 결과: 5

// push 메서드를 사용하여 배열에 요소 추가하기
const animals = ['cat', 'dog', 'rabbit'];
animals.push('elephant');
console.log(animals);
// 출력 결과: ["cat", "dog", "rabbit", "elephant"]

// pop 메서드를 사용하여 배열의 마지막 요소 제거하기
const colors = ['red', 'blue', 'green', 'yellow'];
colors.pop();
console.log(colors); // 출력 결과: ["red", "blue", "green"]

// for 반복문을 사용하여 배열의 요소 출력하기
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// 출력 결과:
// 1
// 2
// 3
// 4
// 5

참고 영상

https://youtu.be/KF6t61yuPCY