02_JS_조건,반복,함수

조건문

 

어느 언어와 똑같이 if 조건식 안이 참인 경우에 실행되는 문법이다.

 

false,0,'',null,undefined,NaN 등이 들어오는 경우 false로 평가되게 된다.

 

위 값이 아닌경우는 모두 True로 평가되게 된다.

 

>> 빈 배열이나 블록( {} , [] )가 입력되어도 참으로 인식한다!

 

물론 else와 else if{}도 사용할 수 있다.

 

 

표현식 &&를 사용하면 if문처럼 실행시킬 수도 있다.

let n = 5;

n%5 === 0 && console.log('실행!')

 

||를 사용하면 오히려 앞표현식이 참이면 뒤표현식을 실행할 필요가 없어서 실행하지 않는다.

즉, 반대로 작동하게 된다.

 

삼항 연산자

 

let n = 5;

console.log(n%5 === 0 ? '5의배수':'5의배수가 아닙니다.');

const message = n%5 === 0 ? '5의배수':'5의배수가 아닙니다.';

console.log(message);

삼항연산자를 사용하여 위처럼 코드를 짤 수도있다.

 

이때 조건식 ? a:b 문법을 알아두면 좋을 것 같다.

 

switch

다른 언어와 똑같이 들어온 값에 경우에 따라 실행된다.

문법은 c와 같다.

 

역시 switch를 사용하려면 break를 사용해주면 된다!

 

 

 

반복문

 

c와 똑같다!

 

for(;;)로 두면 무한반복하게 된다.

 

while과 do while도 지원한다.

 

for of (iterable)

배열같은 경우에 사용가능

 

for in (모든 프로퍼티)

 

 

 

for (const i of [1,2,3]){
    console.log(i);
}

Object.prototype.test = function(){};

for ( const i in {a : 1 , b : 2, c : 3}) {
    console.log(i);
}

이때 for in은 사용하기위해 위처럼 먼저 선언도 해줘야 하고, 원하는 동작이 제대로 실행되지 않을 수 있기에 주의해서 사용해야 한다.

 

for in은 객체의 열거가능한 모든 속성을 나타내니까 주의해야 한다는 점을 알면 될 것 같다. 자세한건 객체를 배우고 다시 오도록 하자.

 

함수

 

일반적인 함수 작성방법과 같지만 조금 다른부분도 있다.

 

const mingyu = function(){
    console.log('mingyu');
};

mingyu();

const mingyu2 = function(name){
    console.log('mingyu2',name);
};

mingyu2('jeong');

const mingyu3 = function(name){
    return `mingyu3 ${name}`;
};

console.log(mingyu3('jeong'));

위와 같은 방식으로도 작성이 가능하다.

 

특히,

mingyu();
mingyu2(); // hoisting에 의해 올라는 가지만 변수로 인식해서 안된다.

function mingyu() {
    console.log('mingyu');  
}



var mingyu2 = function () {
    console.log('mingyu2');
}

hoisting속성과 관련해서 위처럼 실행하면 작동할 것 같지만,

var가 변수처럼 생각되어 작동하지 않는다.

물론 const를 사용하게 되면 is not a function이 아닌 not defined로동작한다. 즉, 아예 정의되지 않은것으로 뜬다!

 

new function

const sum = new Function('a','b','c', 'return a+b+c' );

console.log(sum(1,2,3)); //6출력

new를 사용하여 함수를 만들수도 있다 이때 특이한점은 코드안의 내용과 인자들이 모두 문자열로 들어간다.

 

new function과 그냥 선언은 아래와 같은 차이가 있다.

global.a = 0; //글로벌

{
    const a= 1;

    const test = new Function('return a');

    console.log(test());
}

{
    const a =2;
    const test = function() {
        return a;
    };

    console.log(test());
}

보통 첫번째 블록같은경우 지역변수가 사용되야할 것 같지만, 지역변수를 읽어오지 못한다. 그래서 일반적인 언어에서 사용하는 방식으로 함수를 쓰려면 아래와 같이 사용해야 한다.

 

Arrow생성자

=> 를 사용하면 함수를 보다 이쁘고 간결하게 작성할 수 있다.

 

const mingyu = () => {
    console.log('mingyu');
};


const mingyu2 = name =>{
    console.log('mingyu2',name);
};

const mingyu3 = (name,age) => {
    console.log('mingyu3',name,age);
};

const mingyu4 = name =>{
    return `mingyu4 ${name}`;
}

const mingyu5 = name => `mingyu5 ${name}`;

mingyu();
mingyu2('jeong');
mingyu3('jeong','24');
console.log(mingyu4('jeong'));
console.log(mingyu5('jeong'));

 

 

new 함수();

 

함수를 객체로 만들수 있는개념

다음 글의 객체 를 알아야 하지만, 우선 간단히 구현만 해보겠다.

 

function Person(name,age){
    this.name =name;
    this.age = age;
}

const a = new Person('mingyu',24);
console.log(a,a.name,a. age);

const b = new Person('old mingyu', 30);
console.log(b,b.name,b.age);

const cat = (name,age) => {
    this.name = name;
    this.age = age;
}

const c = new cat('나비',3);
console.log(c)

C언어에서 객체와 클래스 개념이 잡혀있기때문에 이해하기는 어렵지는 않았다. 다만, array를 사용하면 this를 지ㅜ언하지 않는다.

 

함수 안에서 함수를 만들어 리턴

특히 객체로 함수를 사용할 수 있기 때문에 함수안에서 함수를 사용해 리턴을 하는것도 가능하다.

function plus(base){
    return function(num){
        return base + num;
    }
}

const plus5 = plus(5);

console.log(plus5(12));  //17

const plus7 = plus(7);
console.log(plus7(7));   //14

함수를 호출할 때, 인자로 함수를 사용

function hello(c){
    console.log('hello');
    c();
}

hello(function(){
    console.log('민규');
});

// 출력결과
// hello
// 민규

역시 인자로도 사용이 가능하다.

 

 

다른거는 다른언어랑 다 비슷한데 함수를 사용하는 방법이 엄청 다양한 것 같다. 함수형 언어라는게 여기서 나온 것 같다.