자바스크립트 기본 문법 강의 2

 

자바스크립트는 개발자가 웹 사이트의 대화형 프론트엔드 요소를 구축할 때 웹 요소를 완벽하게 제어하기 위해 사용하는 객체 지향 프로그래밍 언어입니다. 대부분의 브라우저는 내장된 실행 환경으로 인해 이 적응형 언어를 지원합니다. 개발자는 이를 HTML, CSS, JS 프레임워크와 결합하여 강력한 웹 프로그램을 만들 수 있습니다.

 

JS를 처음 시작하는 사람은 몇 가지 자바스크립트 프로젝트를 통해 자신의 기술과 지식을 테스트해야 합니다. 이를 통해 실무 경험을 쌓고 작동 원리에 대한 실질적인 아이디어를 얻을 수 있습니다. 

 

 

 

If and Switch

 

/**
 * If and Switch
 */
let number = 5;

if (number % 2 === 0) {
    console.log('number 변수는 짝수입니다.');
} else {
    console.log('number 변수는 홀수입니다.');
}

if (number % 2 === 0) {
    console.log('2의 배수입니다.');
} else if (number % 3 === 0) {
    console.log('3의 배수입니다.');
} else if (number % 4 === 0) {
    console.log('4의 배수입니다.');
} else if (number % 5 === 0) {
    console.log('5의 배수입니다.');
} else {
    console.log('2, 3, 4, 5의 배수가 아닙니다.');
}

const englishDay = 'saturday';

let koreanDay;

switch(englishDay){
    case 'monday':
        koreanDay = '월요일';
        break;
    case 'tuesday':
        koreanDay = '화요일';
        break;
    case 'wednesday':
        koreanDay = '수요일';
        break;
    case 'thursday':
        koreanDay = '목요일';
        break;
    case 'friday':
        koreanDay = '금요일';
        break;
    default:
        koreanDay = '주말';
        break;
}

console.log(koreanDay);

 

 

Loops for, while

 

 

/**
 * Loops
 * 
 * 1) for
 * 2) while
 */
for (let i = 0; i < 10; i++) {
    console.log(i);
}

console.log('------------');

for (let i = 10; i > 0; i--) {
    console.log(i);
}

console.log('------------');

for (let i = 0; i < 3; i++) {
    for (let j = 3; j > 0; j--) {
        console.log(i, j);
    }
}

// *을 이용해서 6x6의 정사각형를 출력해라
let square = '';
let side = 6;

for (let i = 0; i < side; i++) {
    for (let j = 0; j < side; j++) {
        square += '*';
    }
    square += '\n';
}

console.log(square);

/**
 * for...in
 */
const yuJin = {
    name: '안유진',
    year: 2003,
    group: '아이브',
}

console.log('------------');

for (let key in yuJin) {
    console.log(key);
}

const iveMembersArray = ['안유진', '가을', '레이', '장원영', '리즈', '이서'];

console.log('------------');

for (let key in iveMembersArray) {
    console.log(key);
    console.log(`${key}:${iveMembersArray[key]}`);
}

/**
 * for...of
 */
for (let value of iveMembersArray) {
    console.log(value);
}

/**
 * While
 */
let number = 0;

while (number < 10) {
    number++;
}

console.log(number);

/**
 * do...while
 */
number = 0;

do {
    number++;
} while (number < 10);

console.log(number);

/**
 * break
 */
console.log('--------------');
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

console.log('-------------');
number = 0;

while(number < 10){
    if(number === 5){
        break;
    }

    number ++;
    console.log(number);
}

/**
 * continue
 */
console.log('---------------');
for(let i = 0; i < 10; i++){
    if(i === 5){
        continue;
    }
    console.log(i);
}


console.log('----------------');
number = 0;

while(number < 10){
    number ++;

    if(number === 5){
        continue;
    }

    console.log(number);
}

 

 

타입 변환

 

/**
 * 타입 변환
 * Type Conversion
 * 
 * 1) 명시적
 * 2) 암묵적
 */
let age = 32;

// 명시적
let stringAge = age.toString();
console.log(typeof stringAge, stringAge);

// 암묵적
let test = age + '';
console.log(typeof test, test);

console.log('98' + '2');
console.log(98 * 2);
console.log('98' - 2);

console.log('------------');
/**
 * 명시적 변환 몇가지 더 배우기
 */
console.log(typeof (99).toString(), (99).toString());
console.log(typeof (true).toString(), (true).toString());
console.log(typeof (Infinity).toString(), (Infinity).toString());

// 숫자 타입으로 변환
console.log(typeof parseInt('0'), parseInt('0.99'));
console.log(typeof parseFloat('0.99'), parseFloat('0.99'));
console.log(typeof +'1', +'1');

console.log('-------------------_');
/**
 * Boolean 타입으로의 변환
 */
console.log(!!'asdkfjhalksdfjasdfx');

console.log(!!'');

console.log(!!0);
console.log(!!'0');
console.log(!!'false');
console.log(!!false);
console.log(!!undefined);
console.log(!!null);

console.log(!!{});
console.log(!![]);

/**
 * 1) 아무 글자도 없는 String
 * 2) 값이 없는 경우
 * 3) 0
 * 
 * 모두 false를 반환한다.
 */

 

 

함수 Function

 

/**
 * function -> 함수
 */

/**
 * 만약에 2라는 숫자에 * 10/ 2 % 3 스트링으로 변환해서
 * 반환받고싶다면 어떻게 해야할까?
 */
console.log((((2 * 10) / 2) % 3).toString());
console.log((((3 * 10) / 2) % 3).toString());

/**
 * DRY
 * D -> Don't
 * R -> Repeat
 * Y -> Yourself
 */
function calculate() {
  console.log((((3 * 10) / 2) % 3).toString());
}

// calculate();

function calculate(number) {
  console.log((((number * 10) / 2) % 3).toString());
}

/**
 * 함수에서 입력받는 값에대한 정의를 Parameter라고한다.
 *
 * 실제 입력하는 값은 argument라고 한다.
 */
calculate(4);
calculate(5);

function multiply(x, y) {
  console.log(x * y);
}

multiply(2, 4);

function multiply(x, y = 10) {
  console.log(x * y);
}

multiply(2, 4);
multiply(2);

/**
 * 반환받기
 * return 받기
 */
console.log("---------------");
function multiply(x, y) {
  return x * y;
}

const result1 = multiply(2, 4);
console.log(result1);

const result2 = multiply(4, 5);
console.log(result2);

/**
 * Arrow 함수
 */
const multiply2 = (x, y) => {
  return x * y;
};
console.log(multiply2(3, 4));

const multiply3 = (x, y) => x * y;
console.log(multiply3(4, 5));

const multiply4 = (x) => x * 2;
console.log(multiply4(2));

//함수 반환

const multiply5 = (x) => (y) => (z) => `x: ${x} y: ${y} z:${z}`;
console.log(multiply5(2)(5)(7));

function multiply6(x) {
  return function (y) {
    return function (z) {
      return `x: ${x} y: ${y} z:${z}`;
    };
  };
}
console.log(multiply6(3)(4)(5));

const multiplyTwo = function (x, y) {
  return x * y;
};
console.log(multiplyTwo(4, 5));

const multiplyThree = function (x, y, z) {
  console.log(arguments);
  return x * y * z;
};

console.log("-----------------");
console.log(multiplyThree(4, 5, 6));

const multiplyAll = function (...arguments) {
  return Object.values(arguments).reduce((a, b) => a * b, 1);
};

console.log(multiplyAll(3, 4, 5, 6, 7, 8, 9, 10));

// immediately invoked function
(function (x, y) {
  console.log(x * y);
})(4, 5);

console.log(typeof multiply);
console.log(multiply instanceof Object);