JavaScript(JS) - 형변환, 연산자, Scope, 조건문, 반복문

조성주·2023년 2월 20일
JavaScriptjs
1

JavaScript

목록 보기
3/21

✅1. 형 변환

  • 자바스크립트는 느슨한 타입 언어 혹은 동적 타입 언어로 변수의 자료형을 명시적으로 선언할 필요가 없는 언어이다.
  • 연산자로 인한 계산이나 변수에 전달되는 값은 자동으로 암묵적 형 변환 수행한다.
  • 강제적 형 변환을 위해서는 자료형 함수를 이용해 명시적 형 변환을 수행한다.

1) 묵시적 형 변환

  • +"32" : 산술연산자 +를 사용하여 문자열 "32"를 숫자형으로 형 변환
  • !0 : 부정연산자 !를 사용하여 숫자 0을 불리언으로 형 변환

2) 명시적 형 변환

  • String(value) : value를 문자형으로 형 변환
  • Number(value) : value를 숫자형으로 형 변환
  • Boolean(value) : value를 불리언으로 형 변환

✅2. 연산자

  • 연산자는 프로그램에서 데이터를 처리하여 결과를 산출할 목적으로 사용되는 문자이다.
  • 연산의 대상 값은 피연산자라고 하며, 피 연산자의 개수에 따라 단항/이항/삼항 연산자의 종류로 존재한다.

1) 산술 연산자

  • 수학적 계산을 위해 제공하는 연산자
  • +, -, /, %, **

2) 대입 연산자

  • 계산한 결과를 하나의 변수에 저장하는 연산자
  • =

3) 복합 대입 연산자

  • 산술 연산자로 피 연산자를 계산해 결과값을 한번에 대입시켜주는 연산자
  • +=, -=, /=, %=, *=

4) 증가, 감소 연산자

  • 숫자 1만큼 증가시키거나 감소시킬 때 사용되는 연산자
  • 증가 연산자 : ++n(피연산자), n(피연산자)++
  • 감소 연산자 : --n(피연산자), n(피연산자)++

5) 비교 연산자

  • 좌항과 우항의 피연산자를 비교한 다음 결과값을 논리적 자료형으로 반환하는 연산자
  • == : 단순 값의 같음을 비교하는 동등연산자
  • === : 값과 자료형까지 같음을 판단하는 일치비교 연산자

6) 논리 연산자

  • 좌항과 우항의 피연산자 간 논리 값을 연산하여 참 또는 거짓을 결과로 얻는 연산자이다
  • || : OR
  • && : AND
  • ! : NOT
  • ^ : XOR

7) 삼항 연산자

  • (조건식) ? 참일경우 : 거짓일경우

✅3. Scope

변수 혹은 상수에 접근할 수 있는 범위를 뜻한다.
모듈/함수 내 코드에서 동일한 변수 사용 시 간섭을 줄이는 용도로 사용한다.
scope는 global scope와 local scope의 타입으로 구분한다.

global scope : 전역에 선언되어 어디에서든 접근 가능
local scope(block, function level scope) : 특정 지역에 선언되어, 해당 지역 내에서만 접근 가능

아래의 코드로 scope에 대해 알아보자.

// global scope
let num_1 = 1;
let num_2 = 2;

// local scope(function scope)
function testFunc() {
	let num_3 = 7;
	num_1 = 3;
    num_2 = 5;
}

num_3 = 8;

local scope 중 block scope에서 let과 const는 블록안에서 선언 시 밖에서 사용을 못하지만 var는 사용이 가능하다.

// local scope(block scope)
{
	var str = '30'
    let stri = '50'
    const strin = '60'
}

console.log(str)
console.log(stri)
console.log(strin)

위와 같은 코드를 작성했을 때 testFunc 함수에서는 num_1과 num_2의 값을 변경할 수 있다. 그 이유는 num_1과 num_2는 전역 변수이기 때문이다. 하지만 num_3는 testFunc함수에서 선언한 지역변수이기 때문에 testFunc안에서만 사용하거나 변경할 수 있고 그 이외에 지역에서는 사용과 변경이 불가능하다.
이런 지역을 Scope라고 말한다.

✅4. 조건문

1) if-else

  • 알고리즘에서 논리적 비교를 할 때 사용되는 조건식이다.
  • if, if else, else 키워드를 통해 구성되며, 조건식에 맞을 경우 중괄호 {} 내에 있는 명령문을 수행한다.
  • 단, 실행 문장이 단일 문장인 경우에는 { } 생략 가능하다.
const test = (param) => {
	if(param > 4){ 
    	console.log(`${param}은 4보다 큽니다.`);
    }else if(param < 2){
    	console.log(`${param}은 2보다 작습니다.`);
    }else{
    	console.log(`${param}은 2보단 크고 4보다 작습니다.);
    }
}

test(5);

2) switch

  • switch는 표현식을 평가하여 그 값이 일치하는 case문을 실행하는 조건문이다.
  • switch, case, break, default 키워드를 통해 구성되며, switch의 조건에 맞는 case 구문을 수행한다.
  • 일반적으로 하나의 case만 수행되도록 case끝을 break로 끝 맺는다.
const test = (param) => {
	switch(param){
    	case 1:
        console.log("param은 1입니다.");
        break;
        
        case 2:
        console.log("param은 2입니다.);
       	break; 
       
        case 3:
        console.log("param은 3입니다.");
        break;
        
        default:
        console.log("param은 3보다 큰 수입니다.");
        break;
    }
}

만약 case마다 break를 사용하지 않으면 case 조건에 맞더라도 다음 case로 이동한다. 즉, 멈추지 않는다.

const test = (param) => {
	switch(param){
    	case 1:
        console.log("param은 1입니다.");
        
        case 2:
        console.log("param은 2입니다.);
       
        case 3:
        console.log("param은 3입니다.");
        break;
        
        default:
        console.log("param은 3보다 큰 수입니다.");
        break;
    }
}

이렇게 되면 case 1에서 출력되는 console.log와 case 2에서 출력되는 console.log가 무조건 출력하게 된다.

✅5. 반복문

1) for

  • 선언문(Init Expression), 조건문(Test Expression), 증감문(Update Expression) 형태로 이루어진 반복문이다.
  • 조건문이 fail이 되기 전까지 코드 블록을 계속적으로 반복 수행한다.
  • 선언문, 조건문, 증감문 자리에 공백 입력이 가능하다.
for( 선언문 ; 조건문 ; 증감문 ){
	// 작성할 코드
}

for( let i=0; i<10; i++){
	console.log(i);  // output: 1,2,3,4,5,6,7,8,9
}

2) while

  • 조건문이 참일 때 코드 블록을 계속해서 반복 수행하는 반복문이다.
  • for문에 비해 선언문과 증강문 없이 loop를 수행하며, 무한 loop등 수행 시 많이 사용한다.
  • 조건문을 코드 블록보다 아래로 옮긴 do ... while 반복문도 존재한다. (최고 한번 수행이 필요할 때 많이 사용)
let i = 0;
while(i < 10){
	console.log(i);
    i++;
}

3) do~while

  • do~while문은 while문과 동일한데 하나 다른점으로는 코드를 한번은 무조건 실행한다.

무슨뜻인지 코드로 알아보자.

let i = 6;

do{
	console.log("i");
}while(i<5)

원래의 while문이였으면 console.log를 아예 한번도 실행하지 않았을 것이다. 하지만 do~while문은 do 안에 내용을 한번 무조건 실행하고 그 다음 조건을 확인한다. 따라서, 조건은 i < 5라 조건에 충족하지는 않지만 한번은 무조건 실행한다.

4) for .. in

  • for .. in문은 Object Type의 key를 반환한다. 배열일 경우에는 index를 객체일 경우 key를 출력한다.
  • 객체의 크기만큼 순회하면서 key를 반환한다.
const arr = ["apple", "banana", "cute"];
const obj = {
	name : "cho",
    age : 100,
    city : seoul,
}
for(let key in arr){
	console.log(key) // output : 0, 1, 2
}

for(let key of obj){
	console.log(key) // output : name, age, city
}

5) for .. of

  • Collection 객체 자체가 Symbol.iterator 속성(property)을 가지고 있어야 동작 가능한 유형이다.
  • ES6에 새로 추가된 Collection 기반의 반복 구문이다.
  • 객체의 크기만큼 순회하면서 element를 반환한다.
const arr = ["apple", "banana", "cute"];
for(let key of arr){
	console.log(key) // output : apple, banana, cute
}

✅6. 반복문 제어

1) break

  • 반복문 수행 시 코드 블록을 탈출할 때 사용되는 식별자이다.
  • 다중 반복문일 경우 가장 안쪽의 반복문을 종료한다.
  • label을 통하여 다중 반복문을 한번에 종료 가능하다.

2) continue

  • 반복문 수행 시 코드 블록 실행을 해당 라인에서 중지하고 블록 코드를 종료 시킨 후 반복문 내 명시된 조건을 판단한다.

3) label

  • 프로그램 내 특정 영역을 지정하여 별도 이름을 붙이는 식별자이다.
  • break와 continue를 사용하는 반복문 안에서만 사용 가능하며, break나 continue 지시자 위에 있어야 한다.
a:for(let i=0; i<5; i++){
	for(let j=0; j<4; j++){
    	console.log(j);
    }
    if(i == 3){
       break a;![](https://velog.velcdn.com/images/tjdwn9753/post/3f2605f6-403e-4e10-b630-1b5bf95e17fa/image.png)

    }
}

위의 코드처럼 작성하면 원래는 0 1 2 3이 5번 출력 반복하여 출력이 되어야하는데, 첫번째 for문에 a라는 label을 붙였기 때문에 i가 3이 되면 첫번째 for문이 break가 되면서 3번 반복만 된다.

profile
조성주
프론트엔드 개발자가 되기 위한 기록
이전 포스트

JavaScript(JS) - JS란?, 기본 입출력, 기본용어, 변수와 상수, 자료형

다음 포스트

JavaScript(JS) - 자료형(Number, String)

0개의 댓글