[JS] 개요 - 숫자와 문자열, 변수, 비교연산자, 조건문, 반복문

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

[강의 출처] opentutorials.org/course/743

JavaScript - 생활코딩

---

숫자 객체(Number Object):

따옴표 없이 숫자를 입력할 경우 숫자 객체로 처리된다.

python 및 타 언어의 경우처럼 int, float가 구분되지 않고, 입력값의 소수점 유무에 따라 적당하게 처리된다.

연산자는 +, -, *, /(나머지 연산자 %)를 사용하며,

보다 복잡한 연산 처리를 위해서는 Math 객체의 메소드를 사용하면 된다.

Math.pow(3,2); // 9 === 3**2
Math.round(10.6); // 11
Math.ceil(10.2); // 11, 소수점 올림
Math.floor(10.2); // 10, 소수점 내림
Math.sqrt(9); // 3 9**(1/2)
Math.random(); // 0 ~ 1 사이의 난수 생성
/* 위 특성을 이용해 아래처럼 1 ~ 100 사이의 랜덤 정수 생성 가능 */
Math.round(100 * Math.random());

 

 

문자열 객체(String Object):

따옴표("", '')로 감싸서 텍스트를 입력하면 문자열 객체로 처리된다.

이스케이프 문자는 백슬래시'\', 줄바꿈은 '\n'로 표시한다.

문자열은 '+' 연산으로 연결할 수 있다.

문자열 + 숫자 연산을 시도하면, 숫자를 문자열로 변환 후 연산한 결과인 '문자열숫자'라는 문자열을 얻게 된다.

문자열 메소드를 이용해 필요한 값을 얻을 수 있다.

'code'.length;       // 4
'code'.indexOf("c"); // 0
'code'.indexOf("o"); // 1

 

변수(Variable):

변수는 var 변수명 = 값; 처럼 선언한다.

var a = 'coding', b = 'everybody'; 처럼 한 줄에 여러 변수를 선언할 수 있다.

var a; 처럼 빈 변수 생성도 가능하다. undefined 값을 가진다.

이미 값을 대입한 변수는 다시 var a;를 선언해주어도 값이 undefined로 초기화되지 않는다.

var a = 1;

 

비교 연산자(Comparison Operators):

boolean은 true, false로 표시된다.

==는 값이 같은 경우, ===는 값과 데이터타입이 모두 같은 경우 true를 반환한다.

아래와 같은 이슈 때문에 ===와 !== 사용이 바람직하다. [연산 결과는 이쪽을 참조]

null == undefined;  // true
null === undefined; // false

true == 1;          // true
true == "1";        // true
true === 1;         // false

크거나 같다 등은 <=, >=

 

변수 생성시 타입에 유의해서 생성해야 한다.

var a = new String('문자열'); // typeof a === 'object'
var b = String('문자열');     // typeof(b) === 'string'
var c = '문자열';             // typeof(c) === 'string'

a === b // false # 타입이 다르기 때문
a == b  // true  # 타입은 다르나 자료값은 같기 때문
b === c // true

 

조건문(Conditional statement):

주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 구문

 

대화상자(Msgbox):

-alert: 메시지창을 띄움

-confirm: true(OK)/false(cancel) 선택 가능한 대화상자를 띄움

-prompt: input 박스가 들어있는 메시지 박스. 유저 인풋을 받아서 리턴. 사용자가 cancel하면 'null'이 리턴

var id = prompt('아이디를 입력해주세요.');
if(id === 'Userid'){
    var pw = prompt('비밀번호를 입력해주세요.');
    if(pw === 'pw'){
        alert('로그인 되었습니다. ' + id + '님 반갑습니다.');
    } else {
        alert('비밀번호가 다릅니다.');
    };
} else if(id === 'userid') {
    alert('아이디의 대소문자를 확인해주세요.');
} else {
    alert('아이디가 일치하지 않습니다.');
};

// switch문
function func(){
    switcch(this){
        case o:
            console.log('o');
            break;
        case p:
            console.log('p');
            break;
        case window:
            console.log('window');
            break;
    }
}

 

논리 연산자(logical Operators):

&&(and)

||(or)

!(not), !false === true

var id = prompt('아이디를 입력해주세요.');
var pw = prompt('비밀번호를 입력해주세요.');
if(id === 'Userid' && pw === 'pw'){
    alert('로그인 되었습니다. ' + id + '님 반갑습니다.'); 
} else if(id === 'Userid') {
    alert('비밀번호가 일치하지 않습니다.');
} else {
    alert('아이디가 일치하지 않습니다.');
};

 

false로 간주되는 데이터형:

'' == false;          // true
'' === false;         // false
!'' === true;         // true
undefined == false;   // false
!undefined === true;  // true
null == false;        // false
!null === true;       // true
NaN == false;         // false
!NaN === true;        // true


if(''){
    console.log('이 구문은 실행되지 않습니다');
} else if(!''){
    console.log('이 구문은 실행됩니다.');
} else {
    console.log('');
};

if(undefined){
    console.log('이 구문은 실행되지 않습니다');
} else if(!undefined){
    console.log('이 구문은 실행됩니다.');
} else {
    console.log('');
};

 

반복문(iterate, Loop):

while문

var i = 0;
while(i<5){
    console.log(i);
    i++;
};

for문

for(var i = 0; i < 5; i++){     // 초기화(initial); 반복조건(condition); 증감(increment)
    console.log(i);             // 초기화는 반복문 시작 시점에 1회만 실행
};                              // 반복조건 검사 후 true면 for문의 내용이 실행된 후,
                                // 마지막으로 증감 부분이 실행

continue, break

for(var i = 0; i < 10; i++){
    if(i % 2 === 0){
        continue;                     // 이 이후 구문은 스킵하고 다음 턴 진행
    } else if(i === 9){
        break;                        // 반복문 종료
    };
    console.log((i+1)+'번째 출력중입니다');
};

중첩

for(var i = 0; i < 10; i++){
    for(var j = 0; j < 10; j++){
        console.log('문자열과 숫자를 더하면 숫자로 처리되므로 그냥 더하면 됨: '+i+j);
    };
};

브라우저 디버거로 아래처럼 진행현황을 확인할 수 잇음

(Watch expressions, Breakpoints 확인)

위의 i, j for문을 디버거로 확인한 결과

-객체에 대해서 반복을 수행하는 경우

 Value에 대해서는 for ... of 문: 반복가능한 객체(Array, String, arguments, ... )

const array1 = ['a', 'b', 'c'];

for (const element in array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

 

 키 혹은 인덱스에 대해서는 for ... in 문: (딕셔너리 형태) 을 사용한다

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in