Switch문

어떤 값을 가진 대상을 두고 조건값과 일치하는지를 확인하고 동작을 수행하는 방식

(if : 조건식을 두고 조건의 진위 여부에 다라 동작을 수행하는 방식)

  • 조금 더 간결하고 의미가 명확해 보인다는 장점
  • case가 값으로 딱 정해진 경우에만 사용가능
  • 조건이 비교식인 경우 사용불가
let food = "buger"

switch (food) {
  case 'pizza':
    console.log("피자 주세요")
    break;
  case 'buger':
    console.log("버거 주세요")
		break;
  default:
    console.log("메뉴에 없는 음식입니다")
}

//버거주세요

 case 키워드를 작성하고 조건값을 입력한 뒤 콜론(:)으로 case문의 끝 지점을 구분해 준다.

(참고로 이렇게 쓰는 문장을 라벨문, 레이블문, lable statement라고 부른다.)

case문 안에서, 해당 조건값과 일치했을 때 동작해야 될 코드를 작성하면 된다.

break 키워드는 switch 블록문을 빠져나가는 구문으로,

해당 조건을 만족한 뒤 필요한 동작을 한 다음은 블록문을 빠져나오는 것이 일반적이기 때문에

생략이 가능하지만, 작성해주는 경우가 더 많다.

let food = "buger"

switch (food) {
  case 'pizza':
    console.log("피자 주세요")
    break;
  case 'buger':
    console.log("버거 주세요")
		
  default:
    console.log("메뉴에 없는 음식입니다")
}

//버거주세요
//메뉴에 없는 음식입니다

default라는 키워드를 입력하고 콜론으로 default문을 구분한 뒤

모든 조건값들과 비교해서 일치하는 결과가 없을 경우에 필요한 동작을 작성하면 된다.

else문 같은 느낌으로, 반드시 필요한 구문은 아니기 때문에 얼마든지 생략도 가능함.

더보기
💡 Switch문은 조건식의 진위가 아니라, 조건값의 일치 여부를 판단하는 것!

 

삼항연산자

  • if문을 간단하게 표현할 수 있다.
  • 조건에 따라 실행하는 내용이 한 가지 일 때 쓰기 좋다.
  • 조건에 따라 실행하는 내용이 다르다.
  • 조건식 ? true : false 구조

삼항연산자 구문 표현

(조건)?value1:value2

조건이 참인 경우 물음표 다음에 있는 value1 실행되며, 거짓이면 value2가 실행된다.

삼항연산자 사용법

삼항연산자는 변수에 결과값을 담아 필요할 때마다 변수를 사용한다.

삼항연산자를 사용하면 긴 if문이 한 줄로 표현될 수 있기 때문에 아주 유용하다.

- if문

let menu = 8;

if (menu <= 3) {
  console.log("범위 안의 숫자입니다.")
} else {
  console.log("범위 밖의 숫자입니다.")
}

- 삼항연산자

let menu = 8;

let answer = menu <= 3 ? "범위 안의 숫자입니다." : "범위 밖의 숫자입니다."
console.log(answer);

 

위와 같이 if문을 간단하게 표현할 수 있음

let food = "buger"
let answer = food == "buger"? '햄버거 좋아':'햄버거 싫어'
console.log(answer); //햄버거 좋아

 

연산식을 붙여서 더 많은 조건 표현도 가능함

let food = "buger"
if (food == 'pizza') {
  console.log("피자좋아")
} else if (food == 'buger') {
  console.log("햄버거좋아")
} else {
  console.log("다 싫어")
}

//위의 if문을 삼항 연산자로 표현하면

let food = "pizza"
let answer = food == "pizza" ? "피자좋아" : food == 'buger' ? '햄버거 좋아' : "다 싫어"
console.log(answer); //피자좋아



'JS > JAVASCRIPT' 카테고리의 다른 글

변수 문제 풀기  (0) 2025.01.26
배열(Array)  (0) 2025.01.25
자바스크립트 변수, 변수 선언 방식  (0) 2025.01.24
function의 파라미터 문법  (1) 2025.01.23
조건문 If문, Switch문  (0) 2025.01.23
let a = 1;
let b = 2;
console.log(a,b);//1,2

let c = a;//c에 a값(1)을 담겠다.
a = b;//a에 b값(2)을 담겠다.
b = c; // b에 c값(1)을 담겠다.
console.log(a,b);//2,1​

 

어떤 코드를 넣어야

console.log ( a , b ) // 2,1 값이 나올까?

let a = 1

let b = 2 

console.log(a,b) // 1,2 

/* 코드 후에*/ 

console.log(a,b) //  2,1

 

처음에 잘 이해 되지 않았지만.

주석 처리한 문구처럼 생각하고 문제를 풀어보니 해결됨

 

 

'JS > JAVASCRIPT' 카테고리의 다른 글

Switch문과 삼항연산자  (1) 2025.01.29
배열(Array)  (0) 2025.01.25
자바스크립트 변수, 변수 선언 방식  (0) 2025.01.24
function의 파라미터 문법  (1) 2025.01.23
조건문 If문, Switch문  (0) 2025.01.23

배열 선언

let arr = [];

대부분 이 방법으로 배열을 선언한다.

인덱스

  • 배열의 순서를 나타낸다.
  • 0부터 시작된다.
  • 대괄호 안에 인덱스를 넣어주면

배열 내 특정 요소를 얻기

let fruit = ["apple", "orange","banana","mango"];

console.log(fruit[0]);//사과
console.log(fruit[1]);//오렌지
console.log(fruit[2]);//바나나
console.log(fruit[3]);//망고​

배열의 요소를 수정하기

let fruits = ["apple", "orange", "mango"];

fruits[2] = 'grape'; // 배열이 ["apple", "orange", "grape"]로 바뀜

 

새로운 요소를 배열에 추가하기

let fruits = ["apple", "orange","banana"]
fruits[3] = "mango" 
//배열이 ["apple", "orange","banana","mango"]로 바뀜​

배열 관련 함수

pop(); - 배열 끝에 있는 아이템을 제거, 그 아이템 값을 리턴

let fruits = ["apple", "orange","banana"]

fruits.pop(); // 마지막 배열에 있는 아이템을 삭제함
console.log(fruits); //   ["apple", "orange"]​

push(); 배열 끝에 아이템 추가, 배열의 최종 길이 리턴

let fruits = ["apple", "orange","banana"]


fruits.push("pineapple");//("")을 배열 마지막에 추가함
console.log(fruits); // ["apple", "orange", "banana", "pineapple"]​

includes(); - 배열에 아이템이 포함되어 있으면 true, 아니면 false 리턴

let fruits = ["apple", "orange","banana"]


fruits.includes("apple"); //("")을 포함하고 있어?
console.log(fruits.includes("apple")); //true​

indexOf(); - 아이템의 인덱스 번호를 리턴

let fruits = ["apple", "orange", "banana", "mango"]


fruits.indexOf("banana");//("banana")의 인덱스 번호가 뭐야?
console.log(fruits.indexOf("banana")); //2

slice(시작점, 끝점); - 시작점~끝점(미포함)까지 배열을 복사해서 리턴 (잘린 값이 반환) / 기존의 배열을 건드리지 않음, 새로운 배열을 만듦

let fruits = ["apple", "orange", "banana", "mango"]

console.log(fruits.slice(2)); //["banana", "mango"]
console.log(fruits.slice(1)); //[ "orange", "banana", "mango"]

console.log(fruits.slice(1,3)); //(시작점, 끝(이전까지))1번부터(포함) 3번이전까지
 // ["apple", "mango"]
 
let extraFruit = fruits.slice(1,3);
console.log(extraFruit ); //  ["apple", "mango"]

splice(시작점, 개수); - 시작점부터 개수만큼 실제 배열에서 아이템 제거(제거 한 값이 나옴) / 기존의 배열이 잘림

let fruits = ["apple", "orange", "banana", "mango"]

console.log(fruits.splice(1,3)); //["orange", "banana", "mango"]

fruits.splice(2, 2)
console.log(fruits); //["apple", "orange"]​

배열 문제 풀기

let animals= [
"Aardvark",
"Albatross",
"Alligator",
"Alpaca",
"Ant",
"Ape",
"Armadillo",
"Donkey",
"Baboon",
"Badger",
"Barracuda",
"Bat",
"Bear",
"Beaver",
"Bee",
"Bison",
"Cat",
"Caterpillar",
"Cattle",
"Chamois",
"Cheetah",
"Chicken",
"Chimpanzee",
"Chinchilla",
"Chough",
"Clam",
"Cobra",
"Cockroach",
"Cod",
"Cormorant",
"Dugong",
"Dunlin",
"Eagle",
"Echidna",
"Eel",
"Eland",
"Elephant",
"Elk",
"Emu",
"Falcon",
"Ferret",
"Finch",
"Fish",
"Flamingo",
"Fly",
"Fox",
"Frog",
"Gaur", 
"Gazelle",
"Gerbil",
"Giraffe",
"Grasshopper",
"Heron",
"Herring",
"Hippopotamus",
"Hornet",
"Horse",
"Kangaroo",
"Kingfisher",
"Koala",
"Kookabura",
"Moose",
"Narwhal",
"Newt",
"Nightingale",
"Octopus",
"Okapi",
"Opossum", 
"Quail",
"Quelea",
"Quetzal",
"Rabbit", 
"Raccoon",
"Rail",
"Ram",
"Rat",
"Raven",
"Red deer",
"Sandpiper",
"Sardine",
"Sparrow",
"Spider",
"Spoonbill",
"Squid",
"Squirrel",
"Starling",
"Stingray",
"Tiger",
"Toad",
"Whale",
"Wildcat",
"Wolf",
"Worm",
"Wren",
"Yak",
"Zebra"]​
// 어레이에 마지막 아이템 "Zebra" 제거하기
animals.pop();
console.log(animals);


//주어진 어레이에 "Dog"추가하기
animals.push("Dog");
console.log(animals);


//주어진 어레이에 "Mosquito","Mouse","Mule" 추가하기
animals.push("Mosquito","Mouse","Mule");
console.log(animals);


//해당 어레이에는 "Human"이 있는가?
console.log(animals.includes("Human"));


//해당 어레이에는 "Cat" 이 있는가?
console.log(animals.includes("Cat"));


//"Red deer"을  "Deer"로 바꾸시오 
animals.indexOf("Red deer")
	//--방법1
console.log(animals.indexOf("Red deer"));
console.log(animals[77]="Deer")
	//--방법2
animals[animals.indexOf("Red deer")] = "Deer"


//"Spider"부터 3개의 아이템을 기존 어레이에서 제거하시오
animals.splice(animals.indexOf("Spider"),3)
console.log(animals);


// "Tiger"부터 그 이후의 값을 제거하시오 (Tiger 포함임)
animals.splice(animals.indexOf("Tiger"))
console.log(animals);


//"B"로 시작되는 아이템인 "Baboon"부터 "Bison"까지 가져와 새로운 어레이에 저장하시오
let newList = animals.slice(animals.indexOf("Baboon"),animals.indexOf("Bison")+1)
console.log(newList);
 



'JS > JAVASCRIPT' 카테고리의 다른 글

Switch문과 삼항연산자  (1) 2025.01.29
변수 문제 풀기  (0) 2025.01.26
자바스크립트 변수, 변수 선언 방식  (0) 2025.01.24
function의 파라미터 문법  (1) 2025.01.23
조건문 If문, Switch문  (0) 2025.01.23

 

변수

변수는 어떤 값을 담아둘 수 있는 양동이.

변수는 var, let, const 키워드를 사용하여 선언한다.

변수 선언 방식

1. Var

ES5에서 변수를 선언할 수 있는 유일한 방법으로 한번 선언된 변수명에 데이터를 재할당, 동일한 변수명으로 재선언 가능

var a = 1;
var b = 5;
var z = a + b; // 6
coonsole.log("z출력값 : ",z);​

var는 몇 가지 문제점을 가지고 있음.

  • 중복선언 허용 : 의도하지 않은 변수 값 변경
  • 변수 호이스팅 : 번수를 선언하기 전에 참조가 가능

var의 문제점을 보완하기 위해 ES6에서 let const도입

 

2. let

변수를 선언하고 재할당도 가능 언제든 값을 바꿀 수 있음

한번 선언된 변수명에 데이터를 재할당은 가능하지만 동일한 변수명으로 재선언 불가

동일한 변수명으로 재선언이 불가하기때문에 변수명이 동일해서 발생하는 문제를 방지할 수 있음

let a = 1;
let b = 5;
let c = a + b;
console.log("c출력값 : ", c);

let a = 8; //SyntaxError: Identifier 'a' has already been declared

a = 10;
b = 20;
c = a + b;
console.log("c출력값 : ",c);​

변수 호이스팅이 발생하지 않음(let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조에러(reference Error)발생)

console.log(hs);
var hs = "ddururu" //undefined

console.log(ddu);
ler ddu; //SyntaxError: Unexpected identifier 'ddu'​

블록 레벨 스코프 (모든 코드 블록 내에서 선언된 변수는 코드 블록 안에서만 유효, 외부에서는 참조할 수 없음)

let a= "apple"; // 전역
{
let b = "bare"; // 지역
let c = "carrot"; // 지역
} 

console.log(a); // apple
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined

- 전역변수

블록 밖에서 선언을 한 어디서든 쓰일 수 있는 변수

- 지역변수

블록{} 안에서 선언된 변수, 블락안에서만 쓸 수 있음

3. Const

const : 변하지 않는 값 선언 시 사용함

변수를 선언하는 시점에 값을 할당하고, 값을 재할당하거나 동일한 변수명으로 재선언 불가

let과 마찬가지고 호이스팅이 발생되지 않으며, 블록 레벨스코프 지원

const PI = "3.14"; //절대값은 대문자
PI = 3.16 //Assignment to constant variable.​

정리

 
재선언
재할당
변수의 스코프
변수호이스팅
var
O
O
함수레벨스코프
O
let
X
O
블록레벨스코프
X
const
X
X
블록레벨스코프
X
더보기
💡 여전히 var 선언이 가능하지만 문제점으로 오류가 발생할 수 있어 ES6를 사용한다면

let, const로 선언하는 것이 좋다.

'JS > JAVASCRIPT' 카테고리의 다른 글

변수 문제 풀기  (0) 2025.01.26
배열(Array)  (0) 2025.01.25
function의 파라미터 문법  (1) 2025.01.23
조건문 If문, Switch문  (0) 2025.01.23
알림창 삭제, 띄우기  (1) 2025.01.20

+ Recent posts