본문 바로가기

🌌 | WEB DEV/Vanilla JS44

JS_기본 문법 (19)_ case문, 객체 활용 변형 case문 JS에서 활용하는 case문에 대해서 알아보자 1. case문 특정 값에 대한 여러 옵션이 존재할 때 주로 사용한다. const option = 1; switch (option) { case 1: console.log('1번'); break; case 2: console.log('2번'); break; case 3: console.log('3번'); break; default: console.log('무효'); } >>> 1번 switch ~ case 문을 이용한 예시는 위와 같다. break 주의할 점은 break 이다. break를 사용하지 않는다면 해당 case의 다음 case까지 연속적으로 수행이 된다. 따라서 설계의도대로 수행되도록 하기 위해서 이를 사용하면 된다. defalut defalut는.. 2023. 3. 7.

JS_기본 문법 (18)_ 제어문과 좋은 코드? JS에서 제공하는 if/else문을 이용하면 원하는 조건에 맞추어 연산을 처리할 수 있다. const x = 4; if (x % 2) { console.log('홀수'); } else { console.log('짝수'); } >>> 짝수 위의 예시는 아주 단순한 홀짝 판별 코드인데 이것보다 더 복잡한 조건을 적용한다면 당연히도 코드가 복잡해진다. 그에 따라 가독성이 낮은 코드가 작성될 수 있다. 예시) 홀수, 짝수, 4의 배수를 구분하는 코드 1) if/else문의 중첩을 활용할 경우 const x = 6; if (x % 4) { if (x % 2) { console.log('홀수'); } else { console.log('짝수'); } } else { console.log('4의 배수'); } >>>.. 2023. 3. 4.

JS_기본 문법 (17)_스코프 JS에서의 스코프에 대해서 알아보자! 1. 블록문 (Block) 블록문은 0개 이상의 statement(구문)을 묶은 것을 이야기하고, 한 쌍의 중괄호(brackets)로 감싸져있다. { ... } 일반적으로 제어문, 함수 등에 사용이 되고 블록문은 새로운 스코프를 생성한다 1) 스코프 (Scope) 스코프란 변수나 상수, 식별자들이 유효하게 사용될 수 있는 범위를 말한다. 즉, 블록문을 생성할 경우 새로운 범위를 생성하게 되는 것이다. 특징 1_ 블록 안에 선언된 변수와 상수를 그 밖에서 사용 불가 { let x = 1; console.log(x); } console.log(x); >>> 1 >>> Uncaught ReferenceError: x is not defined 위의 예시처럼 블록 안에 선언.. 2023. 3. 3.

JS_기본 문법 (16)_원시타입과 참조타입 JS에는 원시타입과 참조타입이 존재한다. 그 둘을 값의 복사의 측면에서 비교하며 알아보자! 1) 원시타입 원시타입은 값에 의한 복사가 이루어진다.(Copy by value) let n1 = 1; let s1 = 'A'; //n1, s1 복사 let n2 = n1; let s2 = s1; //새로운 값 할당 n2 = 2; s2 = 'B'; console.log(n1, s1); console.log(n2, s2); >>> 1 'A' >>> 2 'B' 위의 결과처럼 값 자체를 복사하는 것이므로 복사를 한 이후, 무슨 짓을 하든 서로에게 영향을 주지 않는다. 2) 참조타입 참조타입은 '주소값'이 복사가 된다. (Copy by reference) const ob1 = { num : 1, str : 'A' }; /.. 2023. 3. 1.

JS_기본 문법 (15)_연산자(쉼표, null병합(??) ) 지금까지 살펴본 것 외의 연산자들에 대해서도 알아보자! 1. 쉼표 연산자 왼쪽부터 차례로 실행되며, 가장 마지막 연산을 반환한다. console.log( (1,2,3) ); >>> 3 console.log( (10/2, 5%2, 1+1) ); >>> 2 이처럼 가장 마지막 연산의 값을 반환한다! 2. null 병합 연산자 ?? null 또는 undefined를 걸러낼 수 있는 연산자이다. 즉, 앞의 원소가 둘 중 하나일 경우 뒤의 원소로 대체가 가능하다! let x;//undefined x ?? console.log('Hello'); x = null;//null x ?? console.log('Hello'); x = 0; x ?? console.log('Hello'); //0을 반환하고 종료 x = 1;.. 2023. 2. 26.

JS_기본 문법 (14)_불리언에 사용되는 연산자들 불리언(boolean)에 관련된 연산자들에 대해서 알아보자! let a = 1 === 2;//false let b = 'abc' !== 'def'//true let c = a !== b;//true let d = typeof a === typeof b === true;//true 4번째 예시와 같이 연속 비교 시에는 우선순위에 따라 연산이 된다. (해당 예시는 같은 우선순위 이므로 앞의 연산이 먼저) 1. 연산자 1) 부정 연산자 ! 를 이용해 NOT 연산을 수행할 수 있다. !true //false !!true//true 이때 !!로 두개를 붙일 경우 !가 서로 치환되는데 이를 이용하여 현재 값을 boolean 값으로 변환 할 수 있다. console.log(!!'a') >>> true 2) AND O.. 2023. 2. 26.

JS_기본 문법 (13)_숫자에 사용되는 연산자들 숫자와 관련된 연산자들을 알아보자! 1. 숫자 자료형 number 1) 양과 음 JS에서는 정수와 실수 모두 number 자료형이다. 즉, 정수도 내부에서 실수를 표현하는 방식으로 처리된다. + 와 -로 양과 음을 나타낸다! 2) 무한대 Infinity 는 무한대를 표현하는 자료형으로 number의 범주에 속한다. 이 또한 양과 음이 존재한다. 3) NaN Not a Number의 약자로 숫자가 아닌 것을 의미한다. NaN 역시 number의 범주에 속한다. let x = 1 / 'a'; let y = 2 * 'a'; let z = NaN; console.log(x, typeof x); console.log(y, typeof y); console.log(z, typeof z); >>> NaN 'numbe.. 2023. 2. 26.

JS_기본 문법 (12)_문자열에 사용되는 연산자들 문자열에 사용되는 연산자들에 대해 알아보자! 1. 비교 연산자 연산자 의미 x == y 값이 같음 x === y 자료형과 값이 같음 x != y 값이 다름 x !== y 자료형 또는 값이 다름 x = y 사전 순 상으로 y가 먼저 오거나 같음 console.log('1' == 1, '1' === 1); >> true false == 은 자료형을 고려하지 않지만 ===은 자료형을 고려한다. 따라서 ===과 !==을 권장한다! console.log( 'A' >> true true false 비교 연산자를 이용할 경우 사전 상의 순서를 고려한다. 이때 대문자가 소문자보다 빠르다. 숫자 문자열의 비교.. 2023. 2. 26.

JS_기본 문법 (11)_템플릿 문자열 JS에서 문자열 내의 일정한 틀(template)을 이용하는 방법에 대해 알아보자. 변수에 저장된 값을 삽일할 수 있다. let name = 'KASSID' let month = 11 let day = 23 console.log(`${name}님의 등록일은 ${month}월 ${day}일 입니다.`) -------- KASSID님의 등록일은 11월 23일 입니다. 함수값을 바로 활용할 수 있다. let num = 3; let getTwice = (x)=>{ return x * 2 } console.log(`${num}의 두 배는 ${getTwice(num)}`) -------- 3의 두 배는 6 2022. 11. 23.

이전 1 2 3 4 5 다음

티스토리툴바