오름캠프 학습일지(2024/02/02) - 6주차 5일

오늘부터 본격적으로 JavaScript 강의가 시작되었습니다.
파이썬과 비슷한 부분과 다른 부분을 강의를 통해 봤습니다.
강의중에 누군가 JavaScript가 기괴하다는 말을 들었다고 댓글을 남겼는데 동의(?)하는 부분이 있었습니다.
그동안 JavaScript 언어를 제대로 배우지는 못했지만 여러 경로로 코드를 봤습니다.
그때 느꼈던 기분이 그런 뭔가 코드가 이상한데 라는 느낌이었는데 그렇게 느끼게된 이유를
강의를 들으면서 알 수 있었습니다.


선언되지 않은 변수를 사용하고, 아래 변수 정의를 한다거나 () 심지어 return 까지 많이
생략되는 콜백? 함수, 사용 가능한데 사용하지 않도록 권고하는 것들(그냥 안 되게 하면 되잖아요^^),
잘못 코드를 치거나 일부 코드가 누락 되도 실행되는 것들도 신기했습니다.
그래도 JavaScript 가 계속 사용되는 이유가 있겠죠?
오늘은 파이썬과 비슷한 부분은 최대한 제외하고, JavaScript에서 익숙하지 않거나 처음 보는 것들을
위주로 정리해 보려고 합니다.

변수

변수는 변할 수 있는 값이고, 선언하고 할당하고, 사용할 수 있습니다.
JavaScript 에서 변수를 선언할 때는 var, let, const 의 키워드를 사용할 수 있습니다.
var, let 은 변수를 const는 변경할 수 없는 수, 즉 상수를 의미합니다.


var 는 초기화가 필요 없고, 재할당이 가능합니다. 또한 생략도 가능합니다.
하지만 엄격모드(strict mode) 에서는 에러가 발생해서 권장되지 않습니다.


let과 const는 블록-레벨 선언으로 불리며, 선언된 코드 블록 밖에서 접근할 수 없습니다.
특히 const의 경우에는 재정의가 불가능한 특징을 가지고 있고, 반드시 초기화를 해줘야 합니다.

'use strict';  // 자바스크립트를 엄격모드에서 실행

valueA;        // 변수 키워드 생략은 엄격모드에서 에러발생!
var valueA;
var valueA;
let valueA;    // 재정의로 인한 에러발생!
const my_name; // 초기화가 없어서 에러발생!

valueA = 1;
const my_name ="WADE";

if(true){ // -- 코드블록의 시작입니다. -- //

    let valueB = 'Hello!';
    const my_name ="WADE";       // 코드블록 밖의 my_name과 별개의 상수입니다.

} // -- 코드블록의 끝입니다. -- //

valueB = 'nice to meet you!';  // 변수 정의 이전에 값을 할당 할 수 없습니다! 
                               // var는 가능하지만^^ 엄격모드에서는 에러입니다.
let valueB = 'Hi!';            // 코드블록 안의 valueB와 별개의 변수입니다.

let은 재할당이 가능한 변수를 선언할 때 사용됩니다. 변수의 값이 언제든지 변경될 수 있습니다.
let은 블록 스코프를 가지므로 변수를 선안한 블록 안에서만 유효합니다.
const는 재할당이 불가능한 상수를 선언할 때 사용됩니다. 변수의 값이 한번 할당되면 변경될 수 없습니다.
const 변수도 let과 같이 블록 스코프를 가집니다.
const를 사용하면 의도하지 않은 값의 변경을 방지할 수 있습니다. 그리고 가독성을 높일 수 있습니다.

const values = []; // 1번

values.push(10); // 2번

const가 재할당이 불가능 하다고 했지만 위의 코드에서 에러가 나지 않는 이유는 값이 추가되더라도
values 가 가리키고 있는 값은 주소이므로 에러가 나지 않습니다. 배열의 주소값은 그대로 입니다.

함수

JavaScript 에서 함수는 아래의 형태를 가집니다.

function 함수이름(parameter1, parameter2...) { // 함수의 선언
    // 실행코드...
    return 반환값
}

함수이름(argument1, argument2...) // 함수의 호출

 

// 2번
function 안녕(){
    console.log('hello');
}

안녕();
console.log(String(안녕()) + String(안녕()));

// 3번
function 안녕(){
    console.log('hello')
    return 10
}

안녕()
console.log(String(안녕()) + String(안녕()))

// 4번
function 안녕(){
    console.log('hello')
    console.log('hello')
    console.log('hello')
    return
    console.log('hello')
    console.log('hello')
    console.log('hello')
}

안녕()

2번에서는 hello 가 세번 출력되고, undefinedundefined 가 출력됩니다.
이렇게 출력되는 이유는 함수에서 리턴 값이 없을 경우 아무것도 리턴 하지 않는다는 것을 의미합니다.


3번에서는 hello 가 세번 출력되고, 1010 이 출력됩니다.
함수에서 10을 리턴 했고, 숫자를 문자열로 형변환 후 더하기를 했으니 1010 이 출력됩니다.


4번에서는 hello 가 세번 출력됩니다.
console.log('hello') 가 세번 실행 후 리턴을 아무 것도 하지 않았는데 return은 함수의 종료를
의미하기도 합니다. 그래서 return 아래 console.log('hello') 는 실행되지 않습니다.

function 함수1 (a, b, c){
    return a + b + c
}

// 콘솔창의 기능이에요. 마지막 라인에 한하여 console.log()를 찍지 않아도 return값을 console창에 출력해줍니다.
함수1(10, 20, 30) 
함수1(10, 20, 50)

// 다음 실행 값은?
console.log(함수1(10, 20, 30))
console.log(함수1(10, 20, 50))

// 필요 이상의 아규먼트를 넣었을 때
함수1(10, 20, 30, 40) // Error를 뿜지 않습니다. 60

// 필요 이하의 아규먼트를 넣었을 때
함수1(10, 20)

/*
function 함수1 (a, b, c){
    return a + b + String(c)
}
함수1(10, 20) // '30undefined'
*/

함수의 매개변수가 3개 일때 함수호출 시 아규먼트가 4개 이거나 2개 여도 에러가 발생하지 않습니다.

// 1. 함수 선언문
function sum(x, y){
  return x + y;
}

// 2. 함수 표현식
let sumXY = function(x, y){
  return x + y;
};
console.log(sum(10, 20));
console.log(sumXY(10, 20));

함수는 1번 처럼 할수도 있고, 2번처럼 제목없이 선언하여 값으로 할당하는 표현식으로 선언하는 것도 가능합니다.
표현식은 값으로 평가될 수 있는 것을 의미합니다. 함수표현식은 함수를 값처럼 사용할 수 있습니다.

함재밌는 함수 선언이 있어서 실행한 내용을 캡쳐했습니니다.
함수1 처럼 일반적인 함수 선언도 있지만 함수2~함수4는 생소합니다.
형태는 함수명 = 매개변수 => 리턴할내용 형태입니다.
매개변수가 2개 이상이면 () 를 쓰는데 매개변수가 1개면 () 도 안 씁니다.^^
파이썬 람다식과 비슷합니다. 익명함수 표현식입니다.

조건문

/**
if (조건식) {
  // 조건식이 참일 때 실행될 코드
}
*/

let test=5;
if(test < 10){
    //codes
}

조건문은 파이썬과 크게 다르지 않습니다.
조건식에 () 가 있고, {} 로 범위가 있습니다.
파이썬은 둘다 없고, 들여쓰기로 범위가 결정됩니다.

삼항연산자

조건식 ? 조건식이 참일 때 실행될 코드 : 조건식이 거짓일 때 실행될 코드

let item = true ? console.log('true') : console.log('false');
console.log(item);

삼항연산자는 if-else 문을 간단하게 표현하는 방법입니다.
위의 코드를 보면 item 이라는 변수에 값을 할당하는 삼항연사자입니다.
item은 Truthy 값이기 때문에 console.log('true') 가 실행되고 그 반환값이 item에 할당됩니다.
console.log 함수는 반환값이 undefined 이므로 item 에는 undefined 가 할당됩니다.
파이썬 삼항연사자와는 모양이 다릅니다.

i = x if x > y else y

if 조건문(x > y)가 True 일때 왼쪽의 x 값이 i 에 저장되고, False 일 땐 외른쪽 y 값이 i 에 저장됩니다.
비슷하지만 위치나 사용법이 다르죠?^^

switch문

switch (new Date().getDay()) {
  case 1:
    document.write('월요일입니다.');
    break;
  case 2:
    document.write('화요일입니다.');
  case 3:
    document.write('수요일입니다.');
    break;
  default:
    document.write('금금요일입니다. 주말이 뭐죠?');
    break;
}

위의 swith 표현식에는 JavaScript 내장 Date() 함수를 통해 현재의 시간 정보를 반환하고, getDay() 함수로
시간에서 요일 정보만 추출하고 있습니다.(요일 정보는 숫자로 반환합니다. 1 이면 월요일입니다.)
case2 에서 break 문이 없는데 그러면 무슨 일이 벌어질까요?
break 가 없다면 switch 문을 탈출하지 않고, 모든 case 문 들을 순서대로 실행합니다.
switch문에서 break는 필수입니다.

반복문

for(초기화식; 조건식; 증감식) {
    실행문;
}

for (let i = 0; i < 7; i++) {
    console.log('count: ' + i)
}

위의 코드가 JavaScript 에서 for문의 사용 예 입니다.
파이썬과 다르게 () 에 조건식이 들어가고, {} 에 실행문이 들어갑니다.
무한루프를 사용하려면 for(;;) 를 사용하면 됩니다. for문을 빠져나오기 위해서는 break를 적절히 사용하면 됩니다.

while (조건식) {
  // 조건식이 참일 때 실행될 코드
}

while 문도 같습니다. () 에 조건식이 들어가고, {} 에 조건식이 참일 경우 실행문이 들어갑니다.
파이썬은 객체로도 for문을 사용할 수 있는데 JavaScript도 가능한지 모르겠습니다.
그외 break 나 continue 사용은 파이썬과 같은것 같습니다. 
일단 여기까지 정리했습니다. 타입 일부를 진도를 나가긴 했는데 다음에 같이 올리는게 나중에 보기에 더
좋을듯 합니다. 최근에 약속이 많아서 업로드가 계속 늦어지네요. HTML/CSS/JavaScript 는 잘 모르는 부분이라
조급하게 느껴집니다. 과제도 감이 안 오더라고요. absolute 로 이미지랑 텍스트 막 넣다가 사이즈 조절할때
사라지는 거 보고, 과제도 멈춰버렸습니다. 다른 분들은 다 동적으로 구성을 하셨더라고요.
좀 더 공부하고 해야 할 것 같습니다. 그래도 계속 해야겠죠?^^