항해99

JavaScript 문법 종합반 1주차

Hyeon_E 2023. 5. 22. 18:46

[ JS언어의 특징 그리고 역사 ]

▶ JS의 역사

  • 1995년 자바스크립트 탄생
    • 넷스케이프 커뮤니케이션(LiveScript → Javascript)
    • 브라우저 동작 스크립트 언어
  • 1999년 자바스크립트 표준화(ECMA-262) 완료
  • 2005년 AJAX 등장
    • 비동기 웹 애플리케이션 개발 가능
    • 폭발적인 UX 향상 🚀
      • UX는 User Experience(사용자 경험)의 약자, 유저들이 얼마나 편리하게 프로그램을 사용하는지에 대한 경험
  • 2008년 V8 엔진 출시(google)
    • super fast(코드 실행 속도 상당부분 개선)
    • 🛠️ 컴파일러, 메모리관리 시스템 👍
  • 2009년 Node.js 등장, 서버 개발 활성화
    • 서버개발의 지각변동 : PHP, Ruby, Python, Java → Javascript(Node.js)
    • 하나의 언어 → FrontEnd + BackEnd + DB(MongoDB) = FullStack
  • 2015년 ECMAScript 6(ES6) 버전 출시 🚀
  • 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 🌟
  • 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있음

▶ JS 언어의 특징

· 객체 지향 프로그래밍 지원

자바스크립트는 객체 지향 프로그래밍이 가능한 언어로서, 객체를 생성하고 관리하는 데에 강점이 있음

자바스크립트에서 객체를 만들 때는 중괄호({})를 사용하여 객체를 만들고, 각 속성을 쉼표(,)로 구분하여 추가

속성은 이름과 값을 가지며, 이름은 문자열로 작성하고, 값은 다양한 데이터 타입을 사용할 수 있음

객체 내부의 함수를 메소드(method)라고 부르며, 속성의 값으로 함수를 추가할 수 있음

객체를 만들어서 필요한 속성과 메소드를 추가하여 사용

  • 절차지향: 순서에 따라 일을 처리(1 → 2 → 3 ...)
  • 객체지향: 데이터와 함수를 객체라는 그룹으로 묶어서 처리, 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성(property)라고 함
    • 객체로 단위로 묶으면 여러군데에서 재활용 할 수 있음

 

· 동적 타이핑

자바스크립트는 동적 타이핑을 지원하는 언어로서, 변수를 선언할 때 타입을 지정하지 않음

이것은 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다는 것을 의미

let myVariable = "Hello, world!"; // 변수 선언 및 문자열 데이터 타입으로 할당
console.log(typeof myVariable); // "string" 출력

myVariable = 123; // 숫자 데이터 타입으로 할당
console.log(typeof myVariable); // "number" 출력

myVariable = true; // 불리언 데이터 타입으로 할당
console.log(typeof myVariable); // "boolean" 출력

 

런타임이란?

런타임 시점이란, 프로그램이 실행되는 동안의 시점을 의미

즉, 코드가 실행되는 동안에 발생하는 시점을 말함. 반대의 의미로는 컴파일 시점이 있음

 

· 함수형 프로그래밍 지원

자바스크립트는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급 객체로 취급하고, 고차 함수를 지원

이를 통해 코드의 재사용성과 가독성을 높일 수 있음

 

일급 객체(first-class object)란?

함수를 일반 값과 마찬가지로 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 객체를 의미

// 함수를 변수에 할당
const add = function(a, b) {
  return a + b;
}

// 함수를 인자로 받는 함수
function calculate(func, a, b) {
  return func(a, b);
}

// 함수를 반환하는 함수
function getAddFunction() {
  return add;
}

// 함수를 일급 객체로 다루어 코드의 재사용성을 높임
console.log(calculate(add, 2, 3)); // 5
console.log(getAddFunction()(2, 3)); // 5

 

고차함수란?

함수를 인자로 받거나, 함수를 반환하는 함수를 의미

// 고차 함수 예시: 함수를 인자로 받는 함수
function operate(func, a, b) {
  return func(a, b);
}

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

console.log(operate(add, 2, 3)); // 5
console.log(operate(multiply, 2, 3)); // 6

 

· 비동기 처리

비동기 처리는 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식

 

· 클라이언트 측 및 서버 측 모두에서 사용가능

자바스크립트는 클라이언트 측에서만 사용되는 것이 아니라, Node.js를 이용하여 서버 측에서도 사용됨

이를 통해 웹 개발 전반에 걸쳐 자바스크립트를 활용할 수 있음

 

[ 기본 문법 ]

▶ 변수와 상수

모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 이용함. 내가 필요한 결과만 변수에 담아 내가 필요할때 재사용하는 것

 

변수의 5가지 주요 개념

  1. 변수 이름 : 저장된 값의 고유 이름
  2. 변수 값 : 변수에 저장된 값
  3. 변수 할당 : 변수에 값을 저장하는 행위
  4. 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
  5. 변수 참조 : 변수에 할당된 값을 읽어오는것

자바스크립트에서 변수는 var, let, const 세 가지 방법으로 선언할 수 있음

var은 예전부터 사용되던 방법이고 let과 const는 ECMAScript 6(ES6)에서 새로 도입된 방법

// var로 변수 선언
var myVar = "Hello World";
console.log(myVar); // "Hello World"

// let으로 변수 선언
let myLet = "Hello World";
console.log(myLet); // "Hello World"

// const로 상수 선언
const myConst = "Hello World";
console.log(myConst); // "Hello World"

 

var는 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언한 값으로 변수가 덮어씌워짐

let과 const는 같은 이름의 변수를 두 번 선언하면 오류가 발생

const는 선언 후에 값을 변경할 수 없는 상수를 선언할 때 사용함

// var로 변수 덮어쓰기
var myVar = "Hello";
var myVar = "World";
console.log(myVar); // "World"

// let으로 변수 덮어쓰기
let myLet = "Hello";
myLet = "World"; // 기존 값을 덮어쓰기
console.log(myLet); // "World"

// const로 상수 선언 후 값 변경하기
const myConst = "Hello";
myConst = "World"; // 오류 발생
console.log(myConst);

 

▶ 데이터 타입과 형 변환

·  데이터 타입(숫자)

정수형 숫자(Integer)

let num1 = 10;
console.log(num1); // 10
console.log(typeof num1); // "number"

 

실수형 숫자(Float)

let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"

 

지수형 숫자(Exponential)

let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

 

NaN(Not a Number)

let num4 = "Hello" / 2;
console.log(num4); // NaN
console.log(typeof num4); // "number"

 

- NaN(Not a Number)은 자바스크립트에서 숫자가 아님을 나타내는 값

보통 수학적으로 정의되지 않는 계산을 수행하거나, 숫자가 아닌 값을 숫자로 변환하려고 할 때 발생

 

Infinity

let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5); // "number"

let num6 = -1 / 0;
console.log(num6); // -Infinity
console.log(typeof num6); // "number"

 

·  데이터 타입(문자열)

문자열은 문자의 나열입니다. 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현

let name = 'Alice';
let message = "Hello, world!";

 

문자열 길이(length) 확인하기

let str = "Hello, world!";
console.log(str.length); // 13

 

 

문자열 결합(concatenation)

let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result); // "Hello, world!"

 

문자열 자르기(substr, slice)

let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"
console.log(str.slice(7, 12)); // "world"

 

문자열 검색(search)

없으면 결과값이 -1이 나옴

let str = "Hello, world!";
console.log(str.search("world")); // 7

 

문자열 대체(replace)

let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

 

문자열 분할(split)

let str = "apple, banana, kiwi";
let result = str.split(",");
console.log(result); // ["apple", " banana", " kiwi"]

 

·  데이터 타입(불리언(Boolean))

불리언은 참(true)과 거짓(false)을 나타내는 데이터 타입

let bool1 = true;
console.log(bool1); // true
console.log(typeof bool1); // "boolean"

let bool2 = false;
console.log(bool2); // false
console.log(typeof bool2); // "boolean"

 

 

불리언 데이터 타입은 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용됨

let x = 10;
let y = 5;

if (x > y) {
  console.log("x is greater than y");
} else {
  console.log("x is less than or equal to y");
}

let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

 

·  데이터 타입(undefined)

undefined는 값이 할당되지 않은 변수를 의미

let x;
console.log(x); // undefined

 

·  데이터 타입(null)

null은 값이 존재하지 않음을 의미합니다. undefined와는 다름

let y = null;

 

·  데이터 타입(객체)

자바스크립트에서는 객체가 매우 중요한 역할을 함. 객체는 속성과 메소드를 가지는 컨테이너

중괄호({})를 사용하여 객체를 생성

let person = { name: 'Alice', age: 20 };
person.name // 'Alice'
person.age // 20

 

·  데이터 타입(배열)

배열은 여러 개의 데이터를 순서대로 저장하는 데이터 타입

대괄호([])를 사용하여 배열을 생성

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

 

·  형변환(암시적 형 변환(implicit coercion))

암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생

 

문자열 변환

console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"

문자열과 다른 자료형이 연산자로 결합되어 있음

이 경우에는 자바스크립트는 다른 자료형을 문자열로 변환한 후 연산을 수행

 

숫자 변환

console.log(1 - "2");   // -1
console.log("2" * "3");   // 6
console.log(4 + +"5");   // 9

연산자를 사용할 때, 문자열을 숫자로 변환함

이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환됨

 

·  형변환(명시적 형 변환(explicit coercion))

명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말함

 

불리언 변환

Boolean() 함수를 사용하여 불리언 값으로 변환함

이때, 0, 빈 문자열(""), null, undefined, NaN은 false로 변환됨. 그 외의 값은 true로 변환됨

console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

 

문자열 변환

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String({}));        // "[object Object]"

String() 함수를 사용하여 다른 자료형을 문자열로 변환함

 

숫자 변환

console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

 

▶ 연산자

다양한 연산자를 제공하여 변수나 상수를 다양한 방법으로 조작할 수 있음

 

·  산술 연산자(arithmetic operators)

더하기 연산자(+)

console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"

더하기 연산자를 사용하여 숫자나 문자열을 더할 수 있음

이때, 더하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환함

 

곱하기 연산자(*)

console.log(2 * 3);       // 6
console.log("2" * "3");   // 6
console.log("2" * 3);     // 6
console.log(2 * "3");     // 6
console.log("two" * 3);   // NaN

곱하기 연산자를 사용하여 숫자를 곱할 수 있음

이때, 곱하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환함

 

나누기 연산자(/)

console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN

나누기 연산자를 사용하여 숫자를 나눌 수 있음

이때, 나누기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환함

 

나머지 연산자(%)

console.log(7 % 3);       // 1
console.log("7" % "3");   // 1
console.log("7" % 3);     // 1
console.log(7 % "3");     // 1
console.log("seven" % 3); // NaN

나머지 연산자를 사용하여 나눗셈의 나머지를 구할 수 있음

이때, 나머지 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환함

 

·  할당 연산자(assignment operators)

등호 연산자(=)

let x = 10;
console.log(x);   // 10

x = 5;
console.log(x);   // 5

등호 연산자를 사용하여 변수에 값을 할당

 

빼기 등호 연산자(-=)

let x = 10;
console.log(x);   // 10

x -= 5;
console.log(x);   // 5

빼기 등호 연산자를 사용하여 변수에서 값을 뺄 수 있음

 

곱하기 등호 연산자(*=)

let x = 10;
console.log(x);   // 10

x *= 5;
console.log(x);   // 50

곱하기 등호 연산자를 사용하여 변수에 값을 곱할 수 있음

 

나누기 등호 연산자(/=)

let x = 10;
console.log(x);   // 10

x /= 5;
console.log(x);   // 2

나누기 등호 연산자를 사용하여 변수에서 값을 나눌 수 있음

 

나머지 등호 연산자(%=)

let x = 10;
console.log(x);   // 10

x %= 3;
console.log(x);   // 1

나머지 등호 연산자를 사용하여 변수에서 값을 나눈 나머지를 구할 수 있음

 

·  비교 연산자(comparison operators)

일치 연산자(===)

console.log(2 === 2);   // true
console.log("2" === 2);   // false
console.log(2 === "2");   // false

일치 연산자를 사용하여 두 값이 같은지 비교할 수 있음. 이때, 일치 연산자는 자료형까지 비교함

 

불일치 연산자(!==)

console.log(2 !== 2);   // false
console.log("2" !== 2);   // true
console.log(2 !== "2");   // true

불일치 연산자를 사용하여 두 값이 다른지 비교할 수 있음. 이때, 불일치 연산자는 자료형까지 비교함

 

작다(<) 연산자

console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true

작다 연산자를 사용하여 두 값을 비교할 수 있음

이때, 작다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환함

 

크다(>) 연산자

console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false

크다 연산자를 사용하여 두 값을 비교할 수 있음

이때, 크다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환함

 

작거나 같다(<=) 연산자

console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true

작거나 같다 연산자를 사용하여 두 값을 비교할 수 있음

이때, 작거나 같다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환함

 

크거나 같다(>=) 연산자

console.log(2 >= 3);   // false
console.log(2 >= "3");   // false
console.log("2" >= 3);   // false
console.log(2 >= 2);   // true

크거나 같다 연산자를 사용하여 두 값을 비교할 수 있음

이때, 크거나 같다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환함

 

·  논리 연산자(logical operators)

논리곱(&&) 연산자

console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

논리곱 연산자를 사용하여 두 값을 비교할 수 있음

이때, 논리곱 연산자는 두 값이 모두 true일 경우에만 true를 반환함

 

논리합(||) 연산자

console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

논리합 연산자를 사용하여 두 값을 비교할 수 있음

이때, 논리합 연산자는 두 값 중 하나라도 true일 경우 true를 반환함

 

논리부정(!) 연산자

console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

논리부정 연산자를 사용하여 값을 반대로 바꿀 수 있음

이때, 논리부정 연산자는 true를 false로, false를 true로 바꿈

 

·  삼항 연산자(ternary operator)

삼항 연산자(?:)

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

삼항 연산자를 사용하여 조건에 따라 값을 선택할 수 있음

이때, 삼항 연산자는 조건식 ? true일 때의 값 : false일 때의 값 형태로 사용함

 

·  타입 연산자(type operators)

typeof 연산자

console.log(typeof 123);   // "number"
console.log(typeof "123");   // "string"
console.log(typeof true);   // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);   // "object"
console.log(typeof {});   // "object"
console.log(typeof []);   // "object"
console.log(typeof function(){});   // "function"

typeof 연산자를 사용하여 값의 자료형을 확인할 수 있음

typeof 연산자는 원시 자료형의 경우,해당 자료형의 이름을, 객체나 함수의 경우, "object" 또는 "function"을 반환함

typeof null의 경우 "object"를 반환하는 버그가 있음

 

▶ 함수

자바스크립트에서는 함수를 정의하여 코드의 재사용성을 높일 수 있음

 

·  함수 정의하기

함수 선언문(function declaration)

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 function 키워드를 사용하여 add라는 함수를 선언했음

함수 선언문을 사용하면 함수를 미리 정의해두고, 필요할 때 호출할 수 있음

 

함수 표현식(function expression)

let add = function(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 function 키워드를 사용하여 add라는 변수에 함수를 할당했음

함수 표현식을 사용하면 함수를 변수에 할당하여 익명 함수를 생성할 수 있음

 

·  함수 호출하기

함수 호출하기

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 add라는 함수를 호출하여 결과값을 반환함

함수를 호출할 때는 함수 이름 뒤에 괄호를 사용함

 

·  함수 매개변수와 반환값

함수 매개변수

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들임

함수를 호출할 때는 매개변수에 값을 전달함

 

함수 반환값

function add(x, y) {
  return x + y;
}

let result = add(2, 3);
console.log(result);   // 5

위의 예제에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들이고, 이를 더한 값을 반환함

함수를 호출한 결과값을 변수에 할당하여 사용할 수 있음

 

·  함수 스코프

scope의 뜻은 범위를 뜻함. 즉 JS에 함수 스코프는 변수의 영향 범위를 뜻함

 

전역 스코프(global scope)

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

위의 예제에서는 전역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조함

전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있음

 

지역 스코프(local scope)

function printX() {
  let x = 10;
  console.log(x);
}

printX();   //

위의 예제에서는 지역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조함

지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있음

 

블록 스코프(block scope)

if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

위의 예제에서는 if문 내에서 변수 x를 선언하고, 이를 출력함

if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있음

 

·  화살표 함수

기본적인 화살표 함수

let add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));   // 5

위의 예제에서는 화살표 함수를 사용하여 add라는 함수를 선언했음

화살표 함수를 사용하면 함수의 선언이 간결해짐

 

한 줄로 된 화살표 함수

let add = (x, y) => x + y;

console.log(add(2, 3));   // 5

위의 예제에서는 한 줄로 된 화살표 함수를 사용하여 add라는 함수를 선언했음

함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있음

 

매개변수가 하나인 화살표 함수

let square = x => x * x;

console.log(square(3));   // 9

위의 예제에서는 매개변수가 하나인 화살표 함수를 사용하여 square라는 함수를 선언했음

매개변수가 하나일 경우에는 괄호를 생략할 수 있음

 

[ 문 ]

▶ 조건문(if, else if, else, switch)

조건문을 사용하여 특정 조건을 만족하는 경우에만 코드를 실행할 수 있음

 

·  if문

기본적인 if문

let x = 10;
if (x > 0) {
  console.log("x는 양수입니다.");
}

변수 x가 양수인지를 판별하여, 양수인 경우 "x는 양수입니다."라는 메시지를 출력

if문은 조건이 참인 경우에만 코드를 실행

 

if-else문

let x = -10;
if (x > 0) {
  console.log("x는 양수입니다.");
} else {
  console.log("x는 음수입니다.");
}

변수 x가 양수인지를 판별하여, 양수인 경우 "x는 양수입니다."라는 메시지를 출력하고, 그렇지 않은 경우 "x는 음수입니다."라는 메시지를 출력

if-else문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행

 

if-else if-else문

let x = 0;
if (x > 0) {
  console.log("x는 양수입니다.");
} else if (x < 0) {
  console.log("x는 음수입니다.");
} else {
  console.log("x는 0입니다.");
}

변수 x가 양수인지, 음수인지를 판별하여, 0인 경우를 포함해 각각 다른 메시지를 출력

if-else if-else문은 여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드를 실행

 

·  switch문

let fruit = "사과";
switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break;
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break;
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}

switch문을 사용하여 과일의 종류에 따라 색상을 출력

switch문은 변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택하여 해당하는 코드를 실행

default는 모든 경우에 맞지 않는 경우에 실행되는 코드를 작성

 

·  삼항 연산자

let age = 20;
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message);   // "성인입니다."

삼항 연산자를 사용하여 변수 age가 18세 이상인 경우 "성인입니다."

그렇지 않은 경우 "미성년자입니다."라는 메시지를 출력

삼항 연산자는 if문과 비슷한 역할을 하며, 조건이 참인 경우와 거짓인 경우 각각 다른 값을 반환

 

·  조건문의 중첩

let age = 20;
let gender = "여성";
if (age >= 18) {
  if (gender === "남성") {
    console.log("성인 남성입니다.");
  } else {
    console.log("성인 여성입니다.");
  }
} else {
  console.log("미성년자입니다.");
}

중첩된 if문을 사용하여 성별에 따라 성인 여부를 판별

조건문 안에 또 다른 조건문을 사용하여 복잡한 조건을 판별

 

·  조건부 실행

let x = 10;
(x > 0) && console.log("x는 양수입니다.");

조건부 실행을 사용하여 변수 x가 양수인 경우에만 "x는 양수입니다."라는 메시지를 출력

&& 연산자를 사용하여 조건부 실행

 

·  삼항 연산자와 단축 평가

let x;
let y = x || 10;
console.log(y);   // 10

삼항 연산자를 사용하여 변수 x가 존재하지 않는 경우 기본값으로 10을 사용

|| 연산자를 사용하여 단축 평가(short-circuit evaluation)를 할 수 있음

변수 x가 존재하지 않는 경우, || 연산자는 false 값을 반환하고, 기본값으로 지정한 10을 반환

 

·  falsy한 값과 truthy한 값

if (0) {
  console.log("이 코드는 실행되지 않습니다.");
}

if ("") {
  console.log("이 코드는 실행되지 않습니다.");
}

if (null) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (undefined) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (NaN) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (false) {
  console.log("이 코드는 실행되지 않습니다.");
}

falsy한 값들을 사용하여 if문의 조건을 만족시키지 못하도록 함

0, 빈 문자열, null, undefined, NaN, false는 falsy한 값으로, if문의 조건을 만족시키지 못함

그 외의 값들은 모두 truthy한 값으로, if문의 조건을 만족시킴

 

▶ 반복문

반복문을 사용하여 특정 코드를 반복해서 실행할 수 있음

 

·  for문

기본적인 for문

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

for문을 사용하여 0부터 9까지의 숫자를 출력

for문은 초기값, 조건식, 증감식을 사용하여 반복 횟수를 제어함

 

배열과 함께 사용하는 for문

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

배열 numbers와 함께 for문을 사용하여 배열의 요소를 출력

배열의 요소 개수만큼 반복하여 실행함

 

for...in문

let person = { name: "John", age: 30, gender: "male" };
for (let key in person) {
  console.log(key + ": " + person[key]);
}

for...in문을 사용하여 객체 person의 프로퍼티를 출력

for...in문은 객체의 프로퍼티를 순서대로 접근할 수 있음

 

·  while문

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

while문을 사용하여 0부터 9까지의 숫자를 출력

while문은 조건식이 참인 경우에만 코드를 반복해서 실행

 

·  do...while문

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

do...while문을 사용하여 0부터 9까지의 숫자를 출력

do...while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정

 

·  break문과 continue문

break문

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

for문과 함께 break문을 사용하여 0부터 4까지의 숫자만 출력

break문은 반복문을 종료

 

continue문

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

for문과 함께 continue문을 사용하여 5를 제외한 0부터 9까지의 숫자를 출력

 

[ 배열, 객체 기초 ]

▶ 객체와 객체 메소드

객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있음

 

·  객체 생성

기본적인 객체 생성

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

객체 person을 생성

객체를 만들 때는 중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성

각 속성과 값은 쉼표(,)로 구분

 

생성자 함수를 사용한 객체 생성

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");

생성자 함수 Person()을 사용하여 객체 person1과 person2를 생성

생성자 함수를 사용하면 객체를 일괄적으로 생성할 수 있음

 

·  객체 속성 접근

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

객체 person의 속성에 접근하여 값을 출력

객체의 속성에 접근할 때는 점(.)을 사용하여 속성 이름을 입력

 

·  객체 메소드

Object.keys() 메소드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

Object.keys() 메소드를 사용하여 객체 person의 속성 이름을 배열로 반환

Object.keys() 메소드는 객체의 속성 이름을 배열로 반환

 

Object.values() 메소드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let values = Object.values(person);

console.log(values);   // ["홍길동", 30, "남자"]

Object.values() 메소드를 사용하여 객체 person의 속성 값들을 배열로 반환

Object.values() 메소드는 객체의 속성 값들을 배열로 반환

 

Object.entries() 메소드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

Object.assign() 메소드를 사용하여 새로운 객체 newPerson을 만듬

Object.assign() 메소드는 기존 객체를 복사하여 새로운 객체를 만듬

 

객체 비교

let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

두 개의 객체를 생성하고, 객체 비교를 함

객체를 비교할 때는 일반적으로 === 연산자를 사용할 수 없음

대신 JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교를 함

 

객체 병합

let person1 = {
  name: "홍길동",
  age: 30
};

let person2 = {
  gender: "남자"
};

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

객체 병합을 함. 객체 병합을 할 때는 전개 연산자(...)를 사용

 

▶ 배열과 배열 메소드

자바스크립트에서는 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있음

 

·  배열 생성

기본적인 배열 생성

let fruits = ["사과", "바나나", "오렌지"];

배열 fruits를 생성. 배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분함

 

배열의 크기 지정

let numbers = new Array(5);

크기가 5인 배열 numbers를 생성. new Array()를 사용하여 배열의 크기를 지정할 수 있음

 

·  배열 요소 접근

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

배열 fruits의 첫 번째 요소부터 세 번째 요소까지 출력

배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣음

 

·  배열 메소드

push() 메소드

let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits);   // ["사과", "바나나", "오렌지"]

push() 메소드를 사용하여 배열 fruits의 끝에 "오렌지"를 추가

push() 메소드는 배열의 끝에 요소를 추가

 

pop() 메소드

let fruits = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits);   // ["사과", "바나나"]

pop() 메소드를 사용하여 배열 fruits의 마지막 요소를 삭제

pop() 메소드는 배열의 마지막 요소를 삭제

 

shift() 메소드

javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits);   // ["바나나", "오렌지"]

shift() 메소드를 사용하여 배열 fruits의 첫 번째 요소를 삭제

shift() 메소드는 배열의 첫 번째 요소를 삭제

 

unshift() 메소드

let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits);   // ["사과", "바나나", "오렌지"]

unshift() 메소드를 사용하여 배열 fruits의 맨 앞에 "사과"를 추가

unshift() 메소드는 배열의 맨 앞에 요소를 추가

 

splice() 메소드

let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도");
console.log(fruits);   // ["사과", "포도", "오렌지"]

splice() 메소드를 사용하여 배열 fruits의 두 번째 요소를 삭제하고, 그 자리에 "포도"를 추가

splice() 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있음

 

slice() 메소드

let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits);   // ["바나나"]

slice() 메소드를 사용하여 배열 fruits의 두 번째 요소부터 세 번째 요소까지 새로운 배열로 만듬

slice() 메소드는 배열의 일부분을 새로운 배열로 만듬

 

forEach() 메소드

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

forEach() 메소드를 사용하여 배열 numbers의 모든 요소를 출력

orEach() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행

 

map() 메소드

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
  return number * number;
});
console.log(squaredNumbers);   // [1, 4, 9, 16, 25]

map() 메소드를 사용하여 배열 numbers의 모든 요소를 제곱한 새로운 배열을 만듬

map() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환

 

filter() 메소드

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers);   // [2, 4]

filter() 메소드를 사용하여 배열 numbers에서 짝수만 추출한 새로운 배열을 만듬

filter() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환

 

reduce() 메소드

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum);

 

find() 메소드

let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function(number) {
  return number > 3;
});
console.log(foundNumber);   // 4

find() 메소드를 사용하여 배열 numbers에서 3보다 큰 첫 번째 요소를 찾음

find() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환

 

some() 메소드

let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});
console.log(hasEvenNumber);   // true

some() 메소드를 사용하여 배열 numbers에서 짝수가 있는지 확인

some() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인

 

every() 메소드

let numbers = [2, 4, 6, 8, 10];
let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});
console.log(isAllEvenNumbers);   // true

every() 메소드를 사용하여 배열 numbers의 모든 요소가 짝수인지 확인

every() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인

 

sort() 메소드

let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

sort() 메소드를 사용하여 배열 numbers를 오름차순으로 정렬

sort() 메소드는 배열의 요소를 정렬

 

reverse() 메소드

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers);   // [5, 4, 3, 2, 1]

reverse() 메소드를 사용하여 배열 numbers의 순서를 뒤집음

reverse() 메소드는 배열의 요소를 역순으로 정렬