[ javascript ] 문자연산, 숫자연산, 증감연산, 대입연산, 비교연산, 삼항연산, if elseif else, switch, for, while, do while > javascript&jQuery

본문 바로가기
사이트 내 전체검색

javascript&jQuery

[ javascript ] 문자연산, 숫자연산, 증감연산, 대입연산, 비교연산, 삼항연산, if elseif else, switch, for, while, do while

페이지 정보

작성자 웹지기 댓글 0건 조회 2,119회 작성일 21-02-10 23:07

본문

문자연산, 숫자연산, 증감연산, 대입연산, 비교연산, 삼항연산, if elseif else, switch, for, while, do while

- 참고동영상 사이트 :  https://www.youtube.com/c/드림코딩by엘리/search?query=javascript 

 

1. 문자연산(String concatenation)

console.log('my' + ' cat');

console.log('1' + 2);

console.log(`String literals: 1+2 = ${1 + 2}`);


2. 숫자연산(Numeric operators)

console.log(1 + 1); //add

console.log(1 - 1); //substarct

console.log(1 / 1); //divide

console.log(1 * 1); //multiply

console.log(5 % 2); //remainder

console.log(2 ** 3); //exponentiation


3. 증감연산(Increment and decrement operators)

let counter = 2;

const perIncrement = ++counter;

//counter = counter+1;

//preIncrement = counter;

console.log(`preIncrement:${perIncrement}, counter: ${counter}`);

const postIncrement = counter++;

//postIncrement = counter;

//counter = counter+1;

console.log(`preIncrement:${postIncrement}, counter: ${counter}`);

const preDecrement = --counter;

console.log(`preDecrement : ${preDecrement}, counter : ${counter}`);

const postDecrement = counter--;

console.log(`postDecrement : ${postDecrement}, counter : ${counter}`);


4. 대입연산(Assignment oprators)

let x = 3;

let y = 6;

x += y; // x = x+y;

x == y;

x *= y;

x /= y;


5. 비교연산(Comparison operators)

console.log(10 < 6); // less than

console.log(10 <= 6); // less than or equal

console.log(10 > 6); //greater than

console.log(10 >= 6); //greater than of equal


6. Logical operators : || (or), && (and), ! (not)

//const value1 = false;

const value1 = true;

const value2 = 4 < 2; //false

//|| (or)

// 아래조건중 하나라도 true가 나오면 다른 문장과 상관없이 true를 반환

// 아래 코드에서 연산이 많은 함수나 조건은 뒤쪽에 나오게 해주는게 좋다.

// 심플한 조건을 먼저 불러서 부하를 막아주는게 효율적인 코드

console.log(`or : ${value1 || value2 || check()}`);

// && (and)

console.log(`and : ${value1 && value2 && check()}`);

// nullableObject && nullableObject.something

// nullableObject가 null 이면 false므로 뒷부분이 실행이 안되므로 다음의 코드로 사용가능

/*

if(nullableObject != null) {

    nullableObject.somthing;

}

*/

function check() {

    for (let i = 0; i < 10; i++) {

        //wasting time

        console.log('ㅡㅡ;;');

    }

    return true;

}


// !(not)

// 값을 반대로 바꿔준다.

console.log(!value1);


7. 비교연산(equality)

const stringFive = '5';

const numberFive = 5;


// == 비교연산 - 타입변경 비교(loose equality, with type conversion)

console.log(stringFive == numberFive);

console.log(stringFive != numberFive);


// === 비교연산 및 타입비교연산(strict equality, no type conversion)

console.log(stringFive === numberFive);

console.log(stringFive !== numberFive);


// object비교연산(object equality by reference)

const test1 = {name : 'test'};

const test2 = {name : 'test'};

const test3 = test1;

console.log(test1 == test2);

console.log(test1 === test2);

console.log(test1 === test3);


//연산 확인

console.log(" br \n");

console.log(0 == false); //true

console.log(0 === false); //false

console.log('' == false); //true

console.log('' === false); //false

console.log(null == undefined); //true

console.log(null === undefined); //false


8. if조건문(Conditional operatiors: if)

// if, else if, else

const name = 'test';

if(name === 'test'){

    console.log("값이 같고 타입도 같습니다.");

} else if(name === 'coder'){

    console.log('값이 다르거나 타입이 다릅니다.')

} else {

    console.log('성립하는 조건이 없습니다.');

}


9. 삼항연산(Ternary operator: ?)

//비교구문?값1:값2(condition) ? value1 : value2);

console.log(name==='test'?'yes':'no');


10. 스위치문(Switch statement)

//다수의 구문을 비교(use for multiple if checks)

//열거되는 값들을 비교(use for enum-like value check)

//다중유효성 검사(use for multifle type checks in TS)

const browser = 'IE';

switch(browser) {

    case 'IE':

        console.log('아직도 이런걸 사용하나요?');

        break;

    case 'Chrome':

    case 'Firefox':

        console.log('좋아요 좋지요');

        break;

    default:

        console.log('머지??');

        break;

}


11. 반복문(Loops)

//while반복문 : 조건이 참일 동안 실행

//(while loop, while the condition is truthy, body code is executed)

let i=3;

while(i>0){

    console.log(`while : ${i}`);

    i--;

}


//do~ while반복문 : do구문은 무조건 한번은 실행되고 while구문의 조건이 거짓일 때까지 반복문 실행

//do while loop, body code is excuted first, then check the condition

do{

    console.log(`do while : ${i}`);

    i--

} while(i>0);


//for구문(for loop, for(begin; condition; step))

for(i=0; i<3; i++) {

    console.log(`for : ${i}`);

}


//2씩 줄여가는 구문

for(let i=10; i>0; i-=2){

    console.log(`inline variable for : ${i}`);

}


//2중for문(nestd loops)

for(let i=0; i<5; i++){

    for(let j=0; j<5; j++) {

        console.log(`i : ${i}, j: ${j}`);

    }

}


//break, continue

for(let i=0; i<11; i++) {

    if(i%2 !== 0) {

        continue;

    }

    console.log(` i : ${i}`);

}


for(let i=0; i<11; i++){

    console.log(`i : ${i}`);

    if(i==8){

        break;

    }

}


※ false : 0, -0, null, '', false, undefined, let obj;

※ true : -1, 'hello', 'false', [], let obj = new Array(), let obj = [], let obj = {}

let num = 1;

if(num){

    console.log('true!');

} else {

    console.log('false!');

}


//아래 문장을 해석하면 num의 값이 true라면 출력해라로 해석이되며

//if문을 빼고 간단히 적을 수 가 있다.

num && console.log(` num : ${num}`);


let obj = {

    name : 'test',

};


obj && console.log(`obj.name : ${obj.name}`);


 

추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

Total 63건 1 페이지
  • 63 [ javascript ] CDATA 사용 이유
  • 1) CDATA로 감싼 JAVASCRIPT부분이 의도치 않게 XML Parser 에 의해 잘못 인식되는 것을 막기 위함. 2) XHTML이 아닌 HTML로 인식되는 경우에도 JAVASCRIPT가 문제없이 동작하도록 하기 위함. 3) javascript안에서 태그를 사용할 경우 CDATA 선을 해줘서 오류처리를 막기 위함. 사용예제 &lt;script&gt; //&lt;![CDATA[ JAVASCRIPT //]]&gt; &lt;/scri...
  • 웹지기 01-20 4328 0 0 댓글 0
  • 62 [ javascript ] promise 를 async & await 로 쉽게 써보자
  • promise 를 async &amp; await 로 쉽게 써보자 //promise는 chaning가 가능하다. //체인이 많아 지면 복잡해진다. //async await 동기식으로 순서를 작성하는 것 처럼 간편하게 작성가능 //기존에 존재하는 promise 위에 간단한 api를 제공하는데 //더 간편하게 제공하는 것을 syntactic sugar //프로토 타입을 베이스트로한 살짝 덭붙여진 것 //async &amp; await //clear style of ...
  • 웹지기 02-27 4257 0 0 댓글 0
  • 60 [ javascript ] promise
  • 'use strict' //promse 코드를 이용해서 비동기식으로 처리 하는 방법 //Promse is a JavaScript object for asynchronous operation. //state : pending(진행중) -&gt; fulfilled(성공적으로 종료) or rejected(파일을 찾을 수 없거나 문제가 생기면) //Producer(원하는 기능을 수행해서 해당데이터를 만듬) vs Consumer(해당 데이터를 소비) //1. Producer //...
  • 웹지기 02-21 4452 0 0 댓글 0
  • 59 [ javascript ] 콜백지옥 - callback
  • 'use strict' //JavaScript is synchronous. //Execute the code block by orger after hoisting. //hoisting: var, function declearation //1. 동기와 비동기 console.log('1'); //동기식 setTimeout(function(){ //비동기식 console.log('2');//브라우져에서 함수에 의해 대기했다가 실행(비동기 실행방법) },1000); // 여기서 f...
  • 웹지기 02-21 4586 0 0 댓글 0
  • 58 [ javascript ] json 사용법
  • JSON //simplest data interchange format. //lightweight text-abased structure. //easy to read. //key-value pairs. //used for serialization and transmission of data between the network the network the network connection. //independent programming language and platform. //J...
  • 웹지기 02-21 4022 0 0 댓글 0
  • 57 [ javascript ] 유용한 함수들 10가지
  • javascript 유용한 함수들 10가지 https://youtu.be/3CUjtKJ7PJg // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(result); } // Q2. make an array out of a string { ...
  • 웹지기 02-15 4030 0 0 댓글 0
  • 55 [ javascript ] object 생성, 사용방법
  • 'use strict'; 객체(Objects) //one of the JavaScript's data types. //a collection of related data and/or functionality. //Nearly all objects in JavaScript are instances of Objets. //object = { key : value }; //오브젝트는 키와벨류의 집합체 //변수에 접근가능한 property 와 값의 집합 1. 변수에 넣은 변하지 않는 데...
  • 웹지기 02-14 1825 0 0 댓글 0
  • 54 [ javascript ] 클래스 정의 및 사용
  • 객체지향 프로그래밍(Object-oriendted programming) class: template object: instance of a class JavaScript classes - introduced in ES6 - syntactical sugar over prototype-based inheritance js파일 상단에 선언(오류체크) 'use strict'; 1. 클래스선언(Class declarations) class Person {...
  • 웹지기 02-11 2071 0 0 댓글 0
  • 53 [ javascript ] 함수의 또다른 기능
  • 함수의 또다른 기능 함수는 다른 변수처럼 사용된다. 변수에 값으로 할당 할 수 있다. 다른 함수에 인수로 전달 가능 다른 함수에 의해 반환될 수 있다. First-class function functions are treated like any other variable can be assigned as a value to variable can be passed as an argument to other functions. can be returned by another func...
  • 웹지기 02-11 1974 0 0 댓글 0
  • 52 [ javascript ] 함수 선언 , 사용법
  • 함수(Function) 프로그램을 구성하는 빌딩블럭 서브프로그램이라고도 불리며 여러번 재사용이 가능 한가지의 작업이나 값을 계산할 때 사용 -fundamental building block in the program -subprogram can be used multiple times -performs a task or calculates a value 1. 함수 정의(Function declaration) function 함수명(파라미터1, 파라미터2) {비지니스로직.......
  • 웹지기 02-11 1893 0 0 댓글 0
  • 50 [ javascript ] 자바스크립트 변수 선언( var, let, const 차이)
  • ※ 자바스크립트 변수 선언 - 변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간. - 변수에 데이터 값은 한개만 저장되므로, 같은 변수를 두번 사용하게 되면 나중에 입력된 변수값으로 저장된다. - 변수의 첫글자에 사용할 수 있는 문자들은 $, _ (언더바), 영문자 만 사용가능 - 변수 선언시 'use strict'; 선언을 통해 오류를 보여주고 방지하자. 변수선언( var = function-scoped ) var 변수명; var 변수...
  • 웹지기 02-09 2687 0 0 댓글 0
  • 49 [ javascript ] 자바스크립트 코드 작성시 주의 사항
  • javascript 는 대문자와 소문자를 구분한다. 코드가 끝났으면 ; 을 통해서 라인이 끝났다고 표시를 해준다. 가독성을 위해 코드는 한줄씩 사용하는게 좋다. 문자형 데이터를 작성할 때는 " 와 ' 를 사용해서 한다. 중복될 때는 \를 사용해서 사용한다. 문자 사잉에 "와 " 겹치지 않게 사용해줘야 한다. document.write("동해물과 " 백수산이 " 마르고 닳도록 "); //오류구문 docume...
  • 웹지기 02-09 1832 0 0 댓글 0
게시물 검색

회원로그인

접속자집계

오늘
3,233
어제
11,951
최대
61,067
전체
11,128,225

그누보드5
Copyright © funyphp.com. All rights reserved.