📝
서은 STUDY_SCRIPT
  • JAVASCRIPT 기록
  • JAVASCRIPT 문법정리
    • 데이터 저장하기
    • 데이터 불러오기
    • 데이터 실행하기
    • 데이터 제어하기
    • 면접질문 정리
  • PHP를 이용한 사이트 작업
    • PHP와 MySQL
      • 댓글쓰기
      • 회원가입
      • 로그인
      • 게시판
        • 페이지네이션 & 게시글보기
        • 수정/삭제/목록/검색
  • 생활코딩 JavaScript
    • JavaScript 입문수업
      • Basic
        • 자바스크립트 기본 세팅
        • 데이터타입
        • 변수
        • 연산자
        • 조건문
        • 반복문
        • 함수
        • 배열
        • 객체
        • 모듈
        • 정규표현식
      • 함수지향
        • 유효범위
        • 값으로서 함수
        • 값으로서 콜백
        • 클로저
        • arguments
        • 함수의 호출
      • 객체지향
        • 생성자와 new
        • 전역객체
        • this
        • 상속
        • Prototype
        • 표준내장객체의 확장
        • Object
        • 데이터 타입
        • 복제 & 참조
    • JavaScript Basic
      • 자바스크립트란?
      • 데이터타입
      • 변수와 대입연산자
      • 제어할 태그 선택
      • 비교연산자와 불리언
      • 조건문 if
      • 리팩토링
      • 배열 [ ]
      • 반복문 while
      • 배열과 반복문
        • 배열과 반복문의 활용
      • 함수
        • 함수의 활용
      • 객체 { }
        • 객체와 반복문 for~in
        • 프로퍼티와 메소드
        • 객체의 활용
      • 파일로 쪼개서 정리정돈
      • 라이브러리 & 프레임워크
      • UI & API
    • Web Browser
      • JavaScript란?
      • BOM
        • 전역객체 window
        • 사용자와 커뮤니케이션
        • Location 객체
        • Navigator 객체
        • 창 제어
      • DOM
        • 제어 대상 찾기
        • jQuery
        • HTMLElement
        • Element 객체
          • 식별자 API
          • 조회 API
          • 속성 API
        • Node 객체
          • Node 관계 API
          • Node 종류 API
          • Node 변경 API
          • jQuery 노드 변경 API
          • 문자열로 노드 제어
        • HTMLCollection
      • 이벤트
        • 이벤트 등록
        • 이벤트 전파(버블링과 캡처링)
        • 이벤트 기본 동작 취소
        • 이벤트 타입
      • 네트워크 통신
        • Ajax
        • JSON
  • NOMAD JAVASCRIPT
    • VanillaJS
      • Why JS?
      • ES5, ES6
      • Basic
        • Alert & Console
        • Variable
        • Data Types
        • Array & Object
      • Function
      • DOM
        • Event & Event handler
        • Conditional
        • Function Practice
      • Momentum App
        • Making a JS Clock
        • Saving the User Name
        • To-Do List
        • Image Background
        • Getting Weather
  • DREAM CODING
    • 자바스크립트 기초 강의 (ES5+)
      • JavaScript 역사
      • async & defer / Strict Mode
      • Variable / Hoisting / Data Type
      • Operator / if / Loop
      • Function
        • 함수의 선언
        • 함수의 표현
      • Class
      • Object
      • Array
      • Array API
      • JSON
      • Callback
      • Promise
      • Async & Await
  • WEB BOS
    • #JavaScript30
Powered by GitBook
On this page
  • Operator : 연산자
  • 1. 문자열 + 문자열 : String concatenation
  • 2. 산술 연산자 : Numeric operators
  • 3. 증감 연산자 : Increment and decrement operators
  • 4. 할당 연산자 : Assignment operators
  • 5. 비교 연산자 : Comparison operators
  • 6. 논리 연산자 : Logical operators - || (or), && (and), ! (not)
  • 7. 동등/일치 연산자 : Equality
  • if : 조건문
  • 8. 조건 연산자 : Conditional operators: if
  • 9. 삼항 조건 연산자 : Ternary operator
  • 10. Switch문 : Switch statement
  • Loop : 반복문
  • 11. 반복문 : Loops

Was this helpful?

  1. DREAM CODING
  2. 자바스크립트 기초 강의 (ES5+)

Operator / if / Loop

연산자 / 조건문 / 반복문

Operator : 연산자

1. 문자열 + 문자열 : String concatenation

console.log('my' + 'cat'); // my cat
console.log('1' + 2); // 12
console.log(`string literals:1+2=${1 + 2}`); // string literals:1+2=3

2. 산술 연산자 : Numeric operators

console.log(1 + 1);  // add
console.log(1 - 1);  // substract
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 preIncrement = ++counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`); 
// preIncrement: 3, counter: 3
const postIncrement = counter++; // 3, 3
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`); // 3, 4
const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`); // 3, 3
const postDecrement = counter--;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`) // 3, 2

4. 할당 연산자 : Assignment operators

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 or equal

6. 논리 연산자 : Logical operators - || (or), && (and), ! (not)

const value1 = true;
const value2 = 4 < 2; // false

// || (or)
// value중 하나라도 true면 출력
console.log(`or: ${value1 || value2 || check()}`);

// && (and), finds the first falsy value
// value 모두가 true여야 출력
console.log(`and: ${value1 && value2 && check()}`);

function check(){
  for (let i = 0; i < 10; i++){
    //wasting time
    console.log('shock');
  }
  return true;
}

// !(not)
// 값을 반대로 바꿔서 출력
console.log(!value1); // false

7. 동등/일치 연산자 : Equality

const stringFive = '5';
const numberFive = 5;

// == loose equality, with type conversion
console.log(stringFive == numberFive); // true
console.log(stringFive != numberFive); // false

// === strict equality, no type conversion
console.log(stringFive === numberFive); // false
console.log(stringFive !== numberFive); // true

// object equality by reference : 객체는 메모리에 탑재될 때 reference형태로 저장됨
const ellie1 = {name: 'ellie'};
const ellie2 = {name: 'ellie'};
const ellie3 = ellie1;
console.log(ellie1 == ellie2);  // reference 값이 다르기 때문에 false
console.log(ellie1 === ellie2); // false
console.log(ellie1 == ellie3);  // true

// equality - puzzler
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

if : 조건문

8. 조건 연산자 : Conditional operators: if

// if, else if, else
const name = 'ellie';
if(name === 'ellie'){
    console.log('Welcome, Ellie!');
} else if (name === 'coder'){
    console.log('You are amazing coder');
} else{
    console.log('unknown')
}

9. 삼항 조건 연산자 : Ternary operator

// condition ? value1 : value2;
console.log(name === 'ellie' ? 'yes' : 'no');

10. Switch문 : Switch statement

const browser = 'IE';
switch(browser){
    case 'IE':
        console.log('go away');
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('love you'); // 같은 케이스면 묶어서 출력도 가능 - 가독성이 좋음
        break;
    defalut:
        console.log('same all!');
        break;
}

Loop : 반복문

11. 반복문 : Loops

let i = 3;
while (i > 0) {
    console.log(`while: ${i}`);
    i--;
}

// do-while loop
do{
    console.log(`do while: ${i}`);
    i--;
} while (i > 0);

// for loop, for(begin; condition; step)
for(i = 3; i > 0; i--){
    console.log(`for: ${i}`);
}
for(let i = 3; i > 0; i = i - 2){
    console.log(`inline variable for: $(i)`);
}

// nested loops - cpu에 좋지 않기 때문에 안 쓰는게 좋음
for(let i = 0; i < 10; i++){
    for(let j = 0; j < 10; j++){
        console.log(`i: ${i}, j:${j}`);
    }
}

// break, continue
// break는 loop를 완전히 끝내는 것 / continue는 지금 것만 skip하고 다음으로 넘어가는 것

// Q1. iterate from 0 to 10 and print only even numbers(use continue)
for(let i = 0; i < 11; i++){
    if(i % 2 === 0){
        continue;
    }
    console.log(`q1. ${i}`);
}

// Q2. iterate from 0 to 10 and print numbers until reaching 8(use break)
for(let i = 0; i < 11; i++){
    if(i > 8){
        break;
    }
    console.log(`q2. ${i}`);
}
PreviousVariable / Hoisting / Data TypeNextFunction

Last updated 3 years ago

Was this helpful?