ECODATALIST

[JavaScript] 자바스크립트의 기초_배열(Array)

DAILYSEEKER — Mon, 1 Sep 2025 16:23:31 +0900

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

현재 평점 4.9점 수강생 12,538명인 강의를 만나보세요. 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량

www.inflearn.com

배열 생성

배열
숫자, 불리언, 문자열, null, undefined와 같은 원시 타입뿐만 아니라
함수, 객체, 심지어 다른 배열까지 다양한 자료형의 값들을 함께 담을 수 있다.

• 배열 생성자: new Array()를 사용하여 배열을 생성할 수 있다.
• 배열 리터럴: 대괄호[]를 사용하며, 대부분의 경우에 사용되며 더 간결하게 표현 가능하다.

// 배열: 여러개의 값을 순차적으로 담을 수 있는 자료형
// 1. 배열 생성
let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴(대부분 사용)
let arrC = [1, 2, 3, true, "hello", null, undefined, () => {}, {}, []];

배열 요소 접근

배열 요소 접근
배열에 담긴 값들은 순서(인덱스)를 통해 접근할 수 있으며, 배열의 순서는 0부터 시작한다.
기존 배열의 특정 위치에 있는 요소를 변경하고 싶을 때는 인덱스를 사용하며, 해당 인덱스에 새로운 값을 재할당한다.

// 2. 배열 요소 접근
// 순서는 0부터 시작됨
let item1 = arrC[0];
let item2 = arrC[8];
// console.log(item1, item2);

arrC[0] = "바꾼값";
console.log(arrC);

[JavaScript] 자바스크립트의 기초_객체와 메서드

DAILYSEEKER — Mon, 1 Sep 2025 16:16:11 +0900

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

www.inflearn.com

객체 생성

객체(Object)
원시 타입(Number, String, Boolean, Null, Undefined)을 제외한 모든 것을 의미한다.
객체는 다양한 속성(property)와 기능(method)을 하나의 단위로 묶어 관리할 수 있다.

객체 생성
• 객체 생성자: new Object()를 사용하여 객체를 생성할 수 있다.
• 겍체 리터럴: 중괄호{}를 사용하는 방법으로 대부분의 경우에 사용되며 직관적으로 이해할 수 있다.

// 객체(Object): 현실세계에 존재하는 어떤 사물이나 개념 표현 용이

// 1. 객체 생성
let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴(대부분 사용)

객체 속성

객체 속성
각 프로퍼티(속성)은 키(key)와 값(value) 쌍으로 이루어져 있다.
예) person 객체는 name, age, hobby 등의 프로퍼티(속성)로 이루어져 있다.

프로퍼티(속성)에 접근
• 점 표기법: '객체이름.키' 형식으로 사용되며, 가장 간결하고 자주 사용한다.
• 괄호 표기법: '객체이름["키"]' 형식으로 사용되며, 키가 변수에 저장되어 있거나, 키에 띄어쓰기 등이 포함된 경우에 유용하다.

let name = person.name; // 간결해서 자주 사용
let age = person["age"];

let property = "hobby";
let hobby = person[property];

프로퍼티 추가, 수정, 삭제 및 속성 존재여부 확인

• 프로퍼티(속성) 추가: 객체에 새로운 프로퍼티를 추가할 때는 점 표기법 또는 괄호 표기법을 사용하여 값을 할당한다.
• 프로퍼티(속성) 수정: 이미 존재하는 프로퍼티의 값을 변경할 때도 추가하는 방법과 동일하게 값을 재할당한다.
• 프로퍼티(속성) 제거: delete 연산자를 사용하여 객체의 프로퍼티를 삭제할 수 있다.
• 프로퍼티(속성) 존재여부 확인: 특정 프로퍼티가 객체 내에 존재하는지 확인하려면 in연산자를 사용하며, true/false로 반환된다.

// 3-2. 새로운 프로퍼티를 추가하는 방법
person.job = "fe developer";
person["favoriteFood"] = "떡볶이";
let food = person.favoriteFood;
// console.log(name, age, hobby, food);

// 3-3. 프로퍼티를 수정하는 방법
person.job = "educator";
person["favoriteFood"] = "초콜릿";
let job = person.job;
// console.log(person);

//3-4. 프로퍼티를 삭제하는 방법
delete person.job;
delete person["favoriteFood"];
// console.log(person);

// 3-5. 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person;
let result2 = "cat" in person;
console.log(result1, result2);

상수 객체

상수 객체
const로 선언된 객체는 재할당이 불가능한 상수로, 변수 자체에 새로운 객체를 할당하려고 하면 오류가 발생한다.
객체 내부의 프로퍼티 값은 변경, 추가, 삭제가 가능하다.

// 1. 상수 객체
const animal = {
  type: "고양이",
  name: "나비",
  color: "black",
};

// animal = { a: 1 }; // 상수인 animal에 다른 객체 생성하면 오류 발생

animal.age = 2; // 추가
animal.name = "까망이"; // 수정
delete animal.color; // 삭제

// animal = 123; // 아예 새로운 값을 할당하는 것은 오류가 발생한다.
console.log(animal); // 객체 값의 프로퍼티를 변경하는 것은 문제 없음

메서드

메서드
객체 프로퍼티 중 값이 함수인 프로퍼티를 의미하며, 객체가 어떤 동작을 수행하도록 하는 기능으로 볼 수 있다.

// 2. 메서드: 객체 프로퍼티 중 값이 함수인 프로퍼티를 의미
const person = {
  name: "홍길동",
  // 메서드 선언
  sayHi() {
    console.log("안녕");
  },
};

person.sayHi();
person["sayHi"]();

[JavaScript] 자바스크립트의 기초_스코프(전역 스코프와 지역 스코프)

DAILYSEEKER — Mon, 1 Sep 2025 15:54:32 +0900

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

www.inflearn.com

스코프(Scope)

스코프(범위): 변수나 함수에 접근하거나 호출할 수 있는 범위를 의미한다.
스코프를 통해 변수가 언제 어디서 접근이 가능하고, 어떤 값을 가지는지 명확하게 파악할 수 있다.

• 전역 스코프: 전체 영역에서 접근 가능
• 지역 스코프: 특정 영역에서만 접근 가능하며, 해당 지역 내에서만 접근 및 호출이 가능하다.

전역 및 지역 스코프

전역 스코프: 전체 영역에서 접근 가능하며, 선언된 변수나 함수는 어디서든 접근하고 호출 가능하다.

지역 스코프: 특정 영역에서만 접근 가능하며, 해당 지역 내에서만 접근 및 호출이 가능하다.
• 함수 스코프: 함수 내부에 선언된 변수나 함수는 해당 함수 내부에서만 접근 가능하다.
• 블록 스코프: if, for, while문 등 중괄호{} 내부에서 선언된 변수들은 해당 블록 내에서만 접근 가능하다.

let a = 1; // 전역 스코프

function funcA() {
  let b = 2; // 지역 스코프
  console.log(a);

  function funcB() {}
}

funcA();

// 접근이 불가능한 영역에 있는 변수를 알 수 없음
// console.log(b);
// funcB(); // 지역 스코프로 인한 오류 발생

if (true) {
  let c = 1; // 중괄호(블럭) 내에서는 모두 지역 스코프를 가짐
}
// console.log(c); // 오류 발생

for (let i = 0; i < 10; i++) {
  let d = 1;
  function funcC() {}
}

// 반복문 안에서는 전역 스코프
funcC();

[JavaScript] 자바스크립트의 기초_콜백(Callback) 함수

DAILYSEEKER — Mon, 1 Sep 2025 15:43:49 +0900

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

www.inflearn.com

콜백함수

콜백 함수
자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미하며, 함수의 특정 시점에 실행될 다른 함수의 인수를 넘겨주는 방식이다.

콜백 함수 동작 원리
1. main 함수와 sub 함수가 존재한다.
2. main 함수를 호출하면서 sub 함수를 main 함수의 인수로 전달한다.
3. main 함수 내부에서는 전달받은 sub 함수를 value()와 같이 호출하여 실행한다.

// 1. 콜백함수: 자신이 아닌 다른 함수에, 인수로써 정달된 함수를 의미한다
function main(value) {
  console.log("start");
  value(); // 다른 함수를 값으로 사용하여 다른 함수 출력이 위 함수를 통해 진해됨
  console.log("end");
}

function sub() {
  console.log("I am sub");
}

// main(sub);

// 화살표 함수
main(() => {
  console.log("i am sub");
});

콜백함수의 활용

콜백 함수의 활용
반복적인 동작을 수행하거나, 특정 로직을 다양한 방식으로 처리해야 하는 경우 용이하다.

// 2. 콜백 함수의 활용
function repeat(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx);
  }
}

// repeat(5);

// 중복코드를 작성하게 되면 효율성이 낮아짐
function repeatDouble(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx * 2);
  }
}

// repeatDouble(5);

// 콜백함수 추가
function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

// 간결하게 나타낼 수 있음
repeat(5, (idx) => {
  console.log(idx * 2);
});

[JavaScript] 자바스크립트의 기초_함수의 활용

DAILYSEEKER — Mon, 1 Sep 2025 15:32:43 +0900

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

www.inflearn.com

함수 표현식

함수 표현식
함수를 값처럼 취급하여 변수에 할당하며, 함수에 이름이 있을 수도 있고 없을 수도 있다.

• 함수 자체를 변수에 할당하여, 그 변수를 통해 함수 호출이 가능하다.
• 함수 선언과 다르게, 함수 이름으로는 직접 호출이 불가능하고 변수 이름으로만 호출해야 한다.

// 1. 함수 표현식
function funcA() {
  console.log("funcA");
}

let varA = funcA;
// console.log(varA); // 함수 실행 코드 자체가 출력
varA(); // 함수 할당된 변수 자체를 함수처럼 활용 가능

// 선언식이 아니다 -> 함수 이름으로는 출력이 안되고 변수 이름으로 출력 가능
// 콜백 함수 같은 등등의 개념에서 유용하게 활용된다
let varB = function funcB() {
  //익명 함수
  console.log("funcB");
};

varB();
// funcB(); // 오류 발생

화살표 함수

화살표 함수
기존 함수 표현식보다 더 간결하게 함수를 정의할 수 있으며, function 키워드를 사용하지 않는다.

• return문이 하나인 경우: 함수에 return문만 존재한다면, 중괄호{} 와 return 키워드를 생략 가능하다.
• 매개변수가 하나이고 return문이 하나일 경우: 매개변수를 감싸는 소괄호()도 생략 가능하다.
• 여러 줄의 코드나 console.log 등이 포함될 경우: 중괄호{}를 생략할 수 없고 return도 표시 해야한다.

// 2. 화살표 함수: function을 없애고 화살표로 함수 선언
let varC = () => {
  return 1;
};

// console.log(varC());

// 중괄호도 지우고 작성 가능
let varD = (value) => value + 1;
// console.log(varD(10));

let varE = (value) => {
  console.log(value);
  return value + 1;
};
console.log(varE(10));

[JavaScript] 자바스크립트의 기초_함수(function)

DAILYSEEKER — Mon, 1 Sep 2025 15:21:19 +0900

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

www.inflearn.com

함수 선언

함수 선언: function 키워드를 사용하여 함수를 정의하고, 소괄호()와 중괄호{}를 통해 코드를 작성한다.

• 함수 호출: 함수는 선언만으로는 실행되지 않으며, 반드시 소괄호 ()와 함께 함수를 호출해야만 내부 코드가 실행된다.
• 자바스크립트 호이스팅 기능: 함수 선언보다 함수 호출이 코드 상단에 먼저 이루어져도 함수가 정상적으로 실행 가능하다.

// 함수선언: 중복으로 작성되는 코드들 -> 생산성이 낮아짐(리펙토링 문제 발생)
// 반드시 소괄호()와 함께 작성해야 한다 -> 함수 호출이 안됨
// 함수 호출이 위에서 함수 선어보다 먼저 이루어져도 실행된다 -> 자바스크립트의 호이스팅(끌어올린다) 기능
function greeting() {
  console.log("안녕하세요");
}

// 함수를 호출하는 경우에만 확인 가능
console.log("함수 호출 전");
greeting(); // 함수 내부의 코드 실행됨
console.log("함수 호출 후");

매개변수 활용

매개변수 활용
함수를 호출할 때 외부로부터 값을 받아 함수 내부에서 사용 가능하다.
아래의 getArea() 함수는 항상 고정된 값(10, 20)으로만 넓이를 계산하지만, 가로와 세로 값을 매개변수로 활용할 수 있다.

중첩함수:함수 안에 또 다른 함수를 선언하는 것이 가능하며, 특정 함수의 로직을 세분화하거나 접근을 조절하는 기능을 한다.

// 직사각형의 넓이를 구하는 함수
function getArea() {
  let width = 10;
  let height = 20;
  let area = width * height;

  console.log("직사각형 넓이 =", area);
}

getArea();

// 직접 가로 세로 입력 가능한 넓이 함수
// 매개변수(width, height) 활용
// 함수 안에 또 다른 함수 선언 가능
function getArea1(width, height) {
  let area = width * height;
  console.log("직사각형 넓이 =", area);

  function Name() {
    // 중첩 함수
    console.log("임의의 함수 선언 가능");
  }
  Name();
}

getArea1(30, 50);

함수의 결과값 반환

함수의 결과값 반환
return 사용하면 함수의 실행을 종료하고 지정된 값을 반환하며, return문 밑에 있는 코드는 실제로 수행되지 않는다.

// return: 반환값 = 결과값 -> 함수가 어떤 값을 반환하게 만드는 역할
// return 밑에 있는 코드는 실제로 수행되지 않는다
function getArea2(width, height) {
  let area = width * height;
  return area;
}

let area1 = getArea2(10, 60);
console.log(area1);

[JavaScript] 자바스크립트의 기초_반복문(For문)

DAILYSEEKER — Mon, 1 Sep 2025 15:05:37 +0900

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

www.inflearn.com

반복문

반복문: 어떤 동작을 반복해서 수행할 수 있도록 만들어 주는 문법
특정 작업을 여러 번 실행해야 할 때, 코드를 복붙 대신 사용하면 간결하고 효율적인 코드 작성이 가능하다.

For문

for 반복문: 일반적이고 강력한 반복문으로, 정해진 횟수만큼 코드를 반복 실행해야 하는 경우 사용된다.

for문 기본 형태: for(초기식; 조건식; 증감식){반복 실행될 코드}
• 초기식: 반복문이 시작될 때 단 한 번 실행되는 부분으로, 반복 횟수를 세는 변수를 초기화한다.
• 조건식: 매 반복 전에 평가되는 조건으로, 이 조건이 true일 경우에만 블록 내부 코드가 실행한다.
• 증감식: 한 번의 반복이 끝난 후 실행되는 부분으로, 주로 초기식에서 선언된 변수의 값을 변경한다.

break: 반복문을 중간에 조건식이 거짓이 되지 않는 경우에도 강제로 종료시킬 때 사용된다.
continue: 현재 반복 회차의 남은 코드를 건너뛰고 다음 반복을 즉시 시작할 때 사용된다.

// 반복문: 어떤 동작을 반복해서 수행할 수 있도록 만들어 주는 문법
// for(초기식; 조건식; 증감식){반복 실행될 코드}
for (let idx = 0; idx < 5; idx++) {
  console.log("반복");
}

// 반복문을 중간에 조건식이 거짓이 되지 않는 경우에도 강제 종료
for (let idx = 0; idx <= 10; idx++) {
  console.log(idx);

  // 5 이상부터 종료된 것을 확인 가능
  if (idx >= 5) {
    break;
  }
}

// idx 값이 짝수인 경우에는 아무것도 출력하지 말고 해당회차 건너뛰게 만드는 경우
for (let idx = 0; idx <= 10; idx++) {
  if (idx % 2 === 0) {
    continue; // 진행하지 않고 다음으로 넘어간다
  }
  console.log(idx);

  // 5 이상부터 종료된 것을 확인 가능
  if (idx >= 5) {
    break;
  }
}

[JavaScript] 자바스크립트의 기초_조건문(If문과 Switch문)

DAILYSEEKER — Mon, 1 Sep 2025 14:53:36 +0900

조건문

If문

Switch문

조건문

조건문: 특정 조건을 만족하는 경우에만 실행되는 문법
• If문:복잡한 다중 조건에 강력한 제어가 가능
• Switch문: 변수 값 기반의 직관적인 분기 처리 가능

If문

If 문: 복잡하고 여러 개의 조건을 다루는 경우 유용하며, 특정 조건이 참일 때와 거짓일 때 다른 코드 실행이 가능하다.

• 기본 구조: if로 시작하여 else로 마무리된다.
• else if로 조건 추가: 만약 여러 개의 다른 조건을 순차적으로 검사해야 하는 경우 유용하다.

// 1.  if 조건문 (if문): 복잡한 여러 개의 조건을 이용하는 경우 용이
let num = 9;

// if(조건식){조건 만족 시 실행 코드}
// else {조건 만족하지 않는 경우 실행 코드}
// 무조건 if로 시작해서 else로 종료되어야 한다.
if (num >= 10) {
  console.log("num은 10 이상입니다.");
  console.log("조건이 참 입니다.");
} else {
  console.log("조건에 맞지 않습니다.");
}

//else if: 새로운 조건을 추가하는 경우 사용
let num1 = 6;

if (num1 >= 10) {
  console.log("num은 10 이상입니다.");
  console.log("조건이 참 입니다.");
} else if (num1 >= 5) {
  console.log(num1);
  console.log("num이 10 미만 5 이상입니다.");
} else {
  console.log("조건에 맞지 않습니다.");
}

Switch문

Switch조건문: 특정 변수의 값을 기준으로 각각 다른 코드를 실행하는 경우 유용하다.
if문과 기능적으로는 동일하지만, 다수의 조건을 처리할 때 직관적이다.

• break의 중요성: 일치하는 case를 찾은 후 모든 case 코드가 실행되지 않도록 멈춰주는 역할을 수행한다.
• default의 역할: switch문 안의 어떤 case와도 변수의 값이 일치하지 않는 경우 default 블록의 코드가 실행된다.

// 2. Switch 조건문: 어떤 변수의 값을 기준으로 각각 다른 코드 실행하는 경우 용이
// if문과 기능 자체는 동일
// -> 다수의 조건 처리 시 if보다 직관적
let animal = "cat";

// 모든 값이 나오는 이유: case 일치하는 경우 나머지 코드 전부 실행한다.
// break: 스위치문을 원하는 케이스에서만 멈추는 역할
switch (animal) {
  case "cat": {
    console.log("고양이");
    break;
  }
  case "dog": {
    console.log("개");
    break;
  }
  case "bear": {
    console.log("곰");
    break;
  }
  case "snake": {
    console.log("뱀");
    break;
  }
  case "tiger": {
    console.log("호랑이");
    break;
  }
  default: {
    console.log("위 동물은 존재하지 않습니다."); // if문의 else 역할
  }
}

[JavaScript] 자바스크립트의 기초_연산자 활용

DAILYSEEKER — Mon, 1 Sep 2025 14:38:55 +0900

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

www.inflearn.com

Null 병합 연산자

Null 병합 연산자 (??)
null 또는 undefined가 아닌 값을 찾아내는 기능을 수행하며, 여러 값 중에서 null이나 undefined가 아닌 첫 번째 값을 반환한다.
활용: 사용자 이름(userName)이 존재하지 않을 경우 닉네임(userNicName)을 표시하는 것과 같은 상황에서 활용 가능하다.

// null, undefined가 아닌 값을 찾아내는 연산자
let var1;
let var2 = 10;
let var3 = 20;

// ??: 연산에 참여하는 값들 중에 null, undefined가 아닌 값을 찾아냄
let var4 = var1 ?? var2;
// console.log(var4);

let var5 = var1 ?? var3;
// console.log(var5);

let var6 = var2 ?? var3; // 아닌 값들 중 순서 상 앞에 있는 값이 출력
// console.log(var6);

let userName;
let userNicName = "human";

// 유저이름이 존재하고, 닉네임이 undefined라면 유저이름을 저장해라
// 동시에 닉네임이 존재하고, 유저이름이 undefined라면 닉네임으로 저장해라
let dispalyName = userName ?? userNicName;
console.log(dispalyName);

typeof 연산자

typeof 연산자
값의 타입을 문자열로 변환하여 반환하는 기능을 수행하며, 특정 변수나 값 뒤에 해당 요소의 현재 타입을 확인할 때 사용한다.
변수의 값이 변경됨에 따라 typeof연산자의 결과도 달라질 수 있다.

// 2. typeof 연산자: 값의 타입을 문자열로 변환하는 기능을 하는 연산자
let var7 = 1;
var7 = "hello";
var7 = true;

// 뒤에 나오는 변수나 값의 타입을 문자열로 변환
let t1 = typeof var7;
// console.log(t1);

삼항 연산자

삼항 연산자
항을 3개 사용하는 연산자로, 조건식을 이용해서 참인 경우와 거짓인 경우 값을 다르게 반환한다.
간단한 조건에 따른 값을 할당하는 경우 if-else문 대신 사용하면 코드를 간결하게 작성 가능하다.

// 3. 삼항 연산자: 항을 3개 사용하는 연산자
// 조건식을 이용해서 참, 거짓인 경우 값을 다르게 반환
let var8 = 10;

// 요구사항: 변수 res에 var8의 값이 짝수(짝), 홀수(홀) 출력
let res = var8 % 2 === 0 ? "짝수" : "홀수";
console.log(res);

[JavaScript] 자바스크립트의 기초_연산자

DAILYSEEKER — Sat, 30 Aug 2025 18:54:24 +0900

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

현재 평점 4.9점 수강생 12,515명인 강의를 만나보세요. 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량

www.inflearn.com

연산자

연산자: 프로그래밍에서 다양한 연산을 수행하기 위한 기호나 키워드를 의미한다.
덧셈, 뺄셈, 곱셈, 나눗셈과 같은 기본적인 산술 연산부터, 값의 할당, 비교, 논리적 판단까지 모든 부분에서 사용된다.

• 대입 연산자 (=)
• 산술 연산자 (+, -, *, /, %)
• 복합 대입 연산자 (+=, -=, *=, /=, %=)
• 증감 연산자 (++, --)
• 논리 연산자 (||, &&, !)
• 비교 연산자 (==, ===, !=, !==, >, <, >=, <=)

대입 연산자

대입 연산자: 오른쪽의 값을 왼쪽에 있는 변수에 할당하는 경우에 사용한다.

// 1. 대입 연산자(=)
let var1 = 1;
// console.log(var1);

산술 연산자

산술 연산자: 숫자 값을 가지고 사칙연산을 수행하는 데 사용된다.

산술 연산자 종류
+ (덧셈)
– (뺄셈)
* (곱셈)
/ (나눗셈)
% (나머지 연산, 모듈러 연산)
+ 연산자 우선순위 고려: 곱셈과 나눗셈은 덧셈과 뺄셈보다 우선순위가 높으며, 괄호()를 사용하면 우선순위 조절이 가능하다.

// 2. 산술 연산자
let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;

let num6 = 1 + 2 * 10;
// console.log(num6);

let num7 = (1 + 2) * 10;
// console.log(num7);

복합 대입 연산자

복합 대입 연산자: 산술 연산과 대입 연산을 결합한 형태로, 변수의 값을 변경하고 다시 할당하는 과정을 줄여준다.

// 3. 복합 대입 연산자(산술 + 대입)
let num8 = 10;
num8 += 20;
num8 -= 20;
num8 *= 20;
num8 /= 20;
num8 %= 20;
// console.log(num8);

증감 연산자

증감 연산자: 변수의 값을 1 증가시키거나 1 감소시킬 때 사용한다.

전위연산(++변수명, --변수명): 값을 먼저 증감시킨 후 다른 연산을 수행한다.
후위연산(변수명++, 변수명--): 현재 값을 먼저 사용한 후 값을 증감시킨다.

// 4. 중감 연산자
let num9 = 10;
++num9; // 전위연산
num9++; // 후위연산
// console.log(num9);

논리 연산자

논리 연산자: 불리언(boolean) 값을 가지고 논리적인 판단을 수행할 때 사용한다.

|| (OR): 둘 중 하나라도 true이면 true를 반환한다.
&& (AND): 둘 다 true여야 true를 반환한다.
! (NOT): 값을 반전시킨다. (true는 false로, false는 true로)

// 5. 논리 연산자
let or = true || false;
let and = true && false;
let not = !true;
// console.log(or, and, not);

비교 연산자

비교 연산자: 두 값을 비교하여 true 또는 false의 불리언 결과를 반환한다.

== (동등 연산자): 두 값의 값만 비교합니다. 자료형은 고려하지 않는다.
=== (일치 연산자): 두 값의 값과 자료형 모두 비교합니다. 자료형까지 일치해야 true를 반환한다.
!= (부등 연산자): 두 값의 값이 다르면 true를 반환한다.
!== (불일치 연산자): 두 값의 값 또는 자료형이 다르면 true를 반환한다.
> (보다 큼), < (보다 작음), >= (보다 크거나 같음), <= (보다 작거나 같음): 숫자의 크기를 비교한다.

// 6. 비교 연산자
// === 3번을 사용하는 경우에는 값의 자료형까지 고려한다
let comp0 = 1 == "1"; // 자료형은 고려되지 않아 true를 산출
let comp1 = 1 === 2;
let comp2 = 1 !== 2;
// console.log(comp0, comp1, comp2);

let comp3 = 2 > 1;
let comp4 = 2 < 1;
// console.log(comp3, comp4);

let comp5 = 2 >= 2;
let comp6 = 2 <= 2;
console.log(comp5, comp6);

ECODATALIST

[JavaScript] 자바스크립트의 기초_배열(Array)

사이드 프로젝트를 위한 자바스크립트

목차

배열 생성

배열 요소 접근

[JavaScript] 자바스크립트의 기초_객체와 메서드

사이드 프로젝트를 위한 자바스크립트

목차

객체 생성

객체 속성

상수 객체

메서드

[JavaScript] 자바스크립트의 기초_스코프(전역 스코프와 지역 스코프)

사이드 프로젝트를 위한 자바스크립트

목차

스코프(Scope)

전역 및 지역 스코프

[JavaScript] 자바스크립트의 기초_콜백(Callback) 함수

사이드 프로젝트를 위한 자바스크립트

목차

콜백함수

콜백함수의 활용

[JavaScript] 자바스크립트의 기초_함수의 활용

사이드 프로젝트를 위한 자바스크립트

목차

함수 표현식

화살표 함수

[JavaScript] 자바스크립트의 기초_함수(function)

사이드 프로젝트를 위한 자바스크립트

목차

함수 선언

매개변수 활용

함수의 결과값 반환

[JavaScript] 자바스크립트의 기초_반복문(For문)

사이드 프로젝트를 위한 자바스크립트

목차

반복문

For문

[JavaScript] 자바스크립트의 기초_조건문(If문과 Switch문)

조건문

If문

Switch문

[JavaScript] 자바스크립트의 기초_연산자 활용

사이드 프로젝트를 위한 자바스크립트

목차

Null 병합 연산자

typeof 연산자

삼항 연산자

[JavaScript] 자바스크립트의 기초_연산자

사이드 프로젝트를 위한 자바스크립트

목차

연산자

대입 연산자

산술 연산자

복합 대입 연산자

증감 연산자

논리 연산자

비교 연산자