3. 문

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

1. if문

1-1. 기본적인 if문

let x = 10;

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

위의 예제에서는 변수 x가 양수인지를 판별하여, 양수인 경우 "x는 양수입니다."라는 메시지를 출력합니다. if문은 조건이 참인 경우에만 코드를 실행

1-2. if-else문

let x = -10;

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

위의 예제에서는 변수 x가 양수인지를 판별하여, 양수인 경우 "x는 양수입니다."라는 메시지를 출력하고, 그렇지 않은 경우 "x는 음수입니다."라는 메시지를 출력 if-else문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행

1-3. 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문은 여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드를 실행

2. 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는 모든 경우에 맞지 않는 경우에 실행되는 코드를 작성

3. 삼항 연산자

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

위의 예제에서는 삼항 연산자를 사용하여 변수 age가 18세 이상인 경우 "성인입니다.", 그렇지 않은 경우 "미성년자입니다."라는 메시지를 출력 삼항 연산자는 if문과 비슷한 역할을 하며, 조건이 참인 경우와 거짓인 경우 각각 다른 값을 반환

4. 조건문의 중첩

let age = 20;
let gender = "여성";

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

위의 예제에서는 중첩된 if문을 사용하여 성별에 따라 성인 여부를 판별 조건문 안에 또 다른 조건문을 사용하여 복잡한 조건을 판별할 수 있음

5. 조건부 실행

let x = 10;

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

위의 예제에서는 조건부 실행을 사용하여 변수 x가 양수인 경우에만 "x는 양수입니다."라는 메시지를 출력합니다. && 연산자를 사용하여 조건부 실행을 할 수 있음

6. 삼항 연산자와 단축 평가

let x;
let y = x || 10;

console.log(y);   // 10

위의 예제에서는 삼항 연산자를 사용하여 변수 x가 존재하지 않는 경우 기본값으로 10을 사용
|| 연산자를 사용하여 단축 평가(short-circuit evaluation)를 할 수 있음 변수 x가 존재하지 않는 경우, || 연산자는 false 값을 반환하고, 기본값으로 지정한 10을 반환

7. 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문의 조건을 만족

(2) 반복문

자바스크립트에서는 반복문을 사용하여 특정 코드를 반복해서 실행

1. for문

1-1. 기본적인 for문

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

위의 예제에서는 for문을 사용하여 0부터 9까지의 숫자를 출력 for문은 초기값, 조건식, 증감식을 사용하여 반복 횟수를 제어

1-2. 배열과 함께 사용하는 for문

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

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

위의 예제에서는 배열 numbers와 함께 for문을 사용하여 배열의 요소를 출력 배열의 요소 개수만큼 반복하여 실행

1-3. 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문은 객체의 프로퍼티를 순서대로 접근할 수 있음

2. while문

let i = 0;

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

위의 예제에서는 while문을 사용하여 0부터 9까지의 숫자를 출력 while문은 조건식이 참인 경우에만 코드를 반복해서 실행

3. do...while문

let i = 0;

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

위의 예제에서는 do...while문을 사용하여 0부터 9까지의 숫자를 출력 do...while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정

4. break문과 continue문

4-1. break문

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

위의 예제에서는 for문과 함께 break문을 사용하여 0부터 4까지의 숫자만 출력 break문은 반복문을 종료

4-2. continue문

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

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

4. 배열, 객체 기초

객체와 객체 메소드

자바스크립트에서는 객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있음

1. 객체 생성

1-1. 기본적인 객체 생성

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

위의 예제에서는 객체 person을 생성 객체를 만들 때는 중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성 각 속성과 값은 쉼표(,)로 구분

1-2. 생성자 함수를 사용한 객체 생성

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를 생성 생성자 함수를 사용하면 객체를 일괄적으로 생성할 수 있음

2. 객체 속성 접근

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

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

위의 예제에서는 객체 person의 속성에 접근하여 값을 출력 객체의 속성에 접근할 때는 점(.)을 사용하여 속성 이름을 입력

3. 객체 메소드

3-1. Object.keys() 메소드

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

let keys = Object.keys(person);

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

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

3-2. Object.values() 메소드

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

let values = Object.values(person);

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

위의 예제에서는 Object.values() 메소드를 사용하여 객체 person의 속성 값들을 배열로 반환 Object.values() 메소드는 객체의 속성 값들을 배열로 반환합

3-3. Object.entries() 메소드

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

let entries = Object.entries(person);

console.log(entries);

위의 예제에서는 Object.entries() 메소드를 사용하여 객체 person의 속성 이름과 속성 값들을 2차원 배열로 반환 Object.entries() 메소드는 객체의 속성 이름과 속성 값들을 2차원 배열로 반환

3-4. Object.assign() 메소드

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() 메소드는 기존 객체를 복사하여 새로운 객체를 만듬

3-5. 객체 비교

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() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교

3-6. 객체 병합

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

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

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

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

위의 예제에서는 객체 병합 객체 병합을 할 때는 전개 연산자(...)를 사용

배열과 배열 메소드

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

1. 배열 생성

1-1. 기본적인 배열 생성

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

위의 예제에서는 배열 fruits를 생성 배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분

1-2. 배열의 크기 지정

let numbers = new Array(5);

위의 예제에서는 크기가 5인 배열 numbers를 생성 new Array()를 사용하여 배열의 크기를 지정할 수 있음

2. 배열 요소 접근

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

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

위의 예제에서는 배열 fruits의 첫 번째 요소부터 세 번째 요소까지 출력 배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣음

3. 배열 메소드

3-1. push() 메소드

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

fruits.push("오렌지");

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

위의 예제에서는 push() 메소드를 사용하여 배열 fruits의 끝에 "오렌지"를 추가
push() 메소드는 배열의 끝에 요소를 추가

3-2. pop() 메소드

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

fruits.pop();

console.log(fruits);   // ["사과", "바나나"]

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

3-3. shift() 메소드

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

fruits.shift();

console.log(fruits);   // ["바나나", "오렌지"]

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

3-4. unshift() 메소드

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

fruits.unshift("사과");

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

위의 예제에서는 unshift() 메소드를 사용하여 배열 fruits의 맨 앞에 "사과"를 추가 unshift() 메소드는 배열의 맨 앞에 요소를 추가

3-5. splice() 메소드

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

fruits.splice(1, 1, "포도");

console.log(fruits);   // ["사과", "포도", "오렌지"]

위의 예제에서는 splice() 메소드를 사용하여 배열 fruits의 두 번째 요소를 삭제하고, 그 자리에 "포도"를 추가 splice() 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있음

3-6. slice() 메소드

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

let slicedFruits = fruits.slice(1, 2);

console.log(slicedFruits);   // ["바나나"]

위의 예제에서는 slice() 메소드를 사용하여 배열 fruits의 두 번째 요소부터 세 번째 요소까지 새로운 배열로 만듬 slice() 메소드는 배열의 일부분을 새로운 배열로 만듬

3-7. forEach() 메소드

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

numbers.forEach(function(number) {
  console.log(number);
});

위의 예제에서는 forEach() 메소드를 사용하여 배열 numbers의 모든 요소를 출력
forEach() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행

3-8. 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() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행 그 결과를 새로운 배열로 반환

3-9. 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인 요소만 새로운 배열로 반환

3-10. reduce() 메소드

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

let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum);

3-11. 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인 첫 번째 요소를 반

3-12. 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인 요소가 하나라도 있는지 확인

3-13. 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인 요소가 모든 요소인지 확인

3-14. 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() 메소드는 배열의 요소를 정렬

3-15. reverse() 메소드

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

numbers.reverse();

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

위의 예제에서는 reverse() 메소드를 사용하여 배열 numbers의 순서를 뒤집음 reverse() 메소드는 배열의 요소를 역순으로 정렬