JavaScript 기초 - 조건문, 반복문, 함수

1. 조건문

01. 조건문-1

• 블록에 코드가 한줄이면, 중괄호{}는 생략 가능하다.
• 표현식이 거짓으로 평가될 때 Falsy (ex. false, 0, ",null, undefinded, NaN)
• 표현식이 참으로 평가될 때 Truethy (Falsy의 반대)

/*
if (표현식){
    표현식이 참으로 평가될 때, 실행되는 블럭(문장들의 모음)
}
*/

if (true){
    console.log('항상 실행');
}

 

•  Falsy한 값들, Truthy는 Falsy의 반대

//false
//0
//' '
//null
//undefined
//NaN

if (false) console.log(false);
if (0) console.log(false);
if('') console.log('');
if(undefined) console(undefined);
if(NaN) console.log(NaN);

 

• else {} : if에 해당하지 않을 때

const n = 37;
if (n >0 ) console.log('n이 0보다 큰 경우');

else  console.log('n이 0보다 크지 않은 경우');

 

 

02. 조건문-2

• else if {} : if에 해당하지 않을 때

const n = 37;

//n이 3의 배수이면서 5의 배수이면?
if (n % 3 ===0 && n % 5 === 0) console.log('n은 15의 배수');
else if (n % 3 === 0) console.log('n은 3의 배수');
else if (n % 5 === 0 ) console.log('n은 5의 배수');
else console.log('n은 3의배수도 아니고 5의 배수도 아님');

 

 

03. 조건문 -3

• 논리 연산자를 이용한 조건문 평가 &&, ||, !

if (true && true) console.log('둘다 참이면 참');

if (true || true) console.log('한개만 참이면 참');

if (!true) console.log('참이면 거짓, 거짓이면 참');

 

• 논리 연산자를 이용한 조건부 실행

//표현식 && 표현식
//둘다 참일 때만 참이다.
// 앞 표현식이 참일 경우만, 뒤 표현식을 평가

let n = 5;
(n % 5 === 0) && console.log('5로 나누어 떨어질때만 실행'); //출력됨

n = 6;
n % 5 ===0 && console.log('5로 나누어 떨어질때만 실행'); //출력안됨

// 표현식 || 표현식
// 둘 중 하나만 참이면 참
// 앞 표현식이 참이면, 뒤 표현식을 평가할 필요가 없어 실행하지 않는다.

n = 5;
n % 5 === 0 || console.log('5로 나누어 떨어질때만 실행'); //출력안됨

n = 6;
n % 5 === 0 || console.log('5로 나누어 떨어질때만 실행'); //출력됨

 

 

04. 조건문 -4

• 삼항 연산자를 이용한 조건부 실행

// 조건 ? 조건이 참일경우의 표현식 : 거짓일 경우의 표현식
// 중괄호 {}를 사용할 수 없기 때문에 하나의 표현식만 가능

let n = 5;
console.log(n % 5 === 0? '5의 배수' : '5의 배수 아님');

//표현식의 결과를 변수에 할당 할 수 있다.
const message = n % 5 === 0? '5의 배수' : '5의 배수 아님';
console.log(message);

 

• switch를 이용한 조건문

// switch 뒤 괄호 안에 있는 값이 무엇인지 중괄호 안에 있는 코드들을 비교해서 실행
// 이중에 default: 뒤에 있는 문장은 참이어서 실행되는 블럭이다.
// 문장이 한 줄 이라서 중괄호는 생략
let n = 5;
switch (n){
    default:
        console.log(n);
}

// n이 5로 나눈 나머지가 0인 경우 실행되는 블럭 추가
// case '비교할 값' : 을 이용해서 맞으면 실행
// case 0:인 경우와 default:인 경우 두 블럭 모두 순서대로 실행 
// 만약에 해당 블럭이 실행된 후 다음 블럭을 거치지 않고 switch문을 나가고 싶으면 break; 사용
switch (n % 5){
    case 0:{
        console.log('5의 배수');
        break;
    }
    default:
        console.log(n);
}

// break와 case문의 순서를 잘 조정하여, 원하는 코드를 만들어 낼 수 있도록 해야함

 

---

2. 반복문

01. 반복문-1

- for문

• for(초기화;반복조건;반복이 된 후 실행되는 코드){ 반복이 되는 코드 블럭}
• for (;;){ d} : 무한루프

02. 반복문-2

- while문

• while(조건){ 조건이 거짓이 될 때까지 반복 실행}

- do while문 

• do { 조건이 거짓이 될 때까지 반복 실행} while(조건);

do{
    console.log('hello');
} while(Math.random() * 100 <= 90);

- for of

• iterable한 객체에 사용 가능 

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

- for in

• 모든 프로퍼티에 사용 가능

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

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

 

---

3. 함수

01. 함수A

- 선언적 function(){}

//function
//이름이 hello1인 함수를 선언
function hello1(){
    console.log('hello1');
}
console.log(hello1, typeof hello1); //객체의 한 종류

//함수의 매개변수
//함수를 호출할 때 값을 지정
function hello2(name){
    console.log('hello2', name);
}

// 함수의 리턴
// 함수를 실행하면 얻어지는 값
function hello3(name){
    return `hello3 ${name}`;
}
console.log(hello3('Mark'));

 

- 익명 함수 :  const hello = function(){}

//function
//이름이 hello1인 함수를 선언
const hello1 = function(){
    console.log('hello1');
}
console.log(hello1, typeof hello1);

//함수의 매개변수
//함수를 호출할 때 값을 지정
const hello2 = function(name){
    console.log('hello2',name);
}

// 함수의 리턴
// 함수를 실행하면 얻어지는 값
const hello3 = function(name){
    return `hello3 ${name}`;
}

 

- 선언적 function과 익명 함수를 만들어 변수에 할당의 차이점

hello1(); //호이스팅 , 출력 됨
// hello2(); 오류, hello2 is not a function, var hello2만 호이스팅됨
// hello3(); 오류, hello3 is not defined

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

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

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

 

 

02. 함수B

- 생성자 함수로 함수 만드는 방법

• const hello = new Function();

// new Function(/*인자1, 인자2, ..., 함수의 바디*/);
const sum = new Function('a','b','c','return a + b + c');
console.log(sum(1,2,3));

 

- function과 new Function();의 차이점

globalThis.a = 0; //전역변수, 접근 가능
{
    const a = 1; //접근 불가함
    const test = new Function('return a');
    console.log(test());  //a is defined --> 0 출력
}

{
    const a = 2;
    const test = function(){
        return a;
    }
    console.log(test()); //2출력
}

 

- () => {} : arrow function

//사용법
const hello1 = ()=>{ //선언적 방식으로 사용 불가, 익명함수
    console.log('hello1');
}

//매개변수 
console hello2 = (name) => {
    console.log('hello2', name);
}
const hello3 = (name, age) => {
    console.log('hello3',name,age);
}

//함수의 리턴, 매개변수가 하나일 때 괄호 생략가능
const hello4 = name =>{
    return `hello4 ${name}`;
}

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

 

 

03. 함수C

- 생성자 함수 : new 함수();

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

const p = new Person('Mark',37);
console.log(p,p.name,p.age);

const a = new Person('Anna', 26);
console.log(a,a.name,a.age);

- 오류!

//생성자 함수로 사용되는 모든 함수는 function 키워드를 사용함 함수
const Cat = (name,age) => { //arraw 함수 내에는 this생성 불가
    console.log(this);
    this.name = name;
    this.age = age;
}
const c = new Cat('냥',1); //Cat is not a constructor, this에 값을 넣을 수가 없음

 

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

function plus(base){
    return function(num){
        return base + num;
    }
}
const plus5 = plus(5);
console.log(plus5(10)); //num 매개변수에 들어가는 값 ,15

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

 

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

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

hello(function(){
    console.log('콜백');
});