안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
첫 내용은 javascript 1편입니다.

처음 자바스크립트를 접했습니다.
황량하네요.

console.log(2 + 5);
console.log(2 * 5);
console.log(2 / 5);

console.log("내용")

자바스크립트 문법의 기초입니다.
원하는 내용을 웹상에 출력할 때 필요한 문법이에요.
즉, 어떤 내용을 작성하더라도 이 console.log("내용")이 빠지면 아무것도 나타나질 않아요.
참고로 '와 "는 혼용해서 사용하면 안됩니다!

그런데 전 숫자를 바꾸고 싶어요.
하나하나 다 바꾸기엔 너무 벅차보여요.
그래서

const a = 5;
const b = 2;

console.log(a + b);
console.log(a * b);
console.log(a / b);

variable

즉, 변수를 사용하기로 했습니다.
오늘 처음 등장한 변수는

const(constant, 상수)

입니다.
아, const는 변하지 않는 값을 가집니다.
이제 const a와 b의 숫자를 바꿔주면
코드 전체에 적용이 되겠죠?

다음엔 이름을 추가해주기로 했습니다.

const a = 5;
const b = 2;
const myName = "X";

console.log(a + b);
console.log(a * b);
console.log(a / b);
console.log("hello " + myName);

자바스크립트에서의 공백은 대문자로 설정 가능합니다.
javascript = javascript
javaScript = java script
이런 원리라네요.
이제 웹에 어떻게 표시되는지 볼게요.

정상적으로 출력되는 모습입니다.
그런데 이름을 바꿔주고 싶네요.
하지만 const는 변하지 않습니다.
그래서 다른 함수를 써야겠습니다.

이 때 등장하는 변수. 바로

let

입니다.

const a = 5;
const b = 2;
let myName = "X";

console.log(a + b);
console.log(a * b);
console.log(a / b);
console.log("hello " + myName);

3번째 줄 myName 앞이 const에서 let으로 변했습니다.
이름을 제외한 값은 그대로인 상황입니다.

최초 코드 작성 후 내용이 업데이트가 되었으니,

myName = "Y";

console.log("your new my name is "+ myName);

console.log("hello " + myName); 뒤에 추가했습니다.
이제 웹에 어떻게 출력되는지 볼게요.

제가 원하는대로 출력된 모습입니다.

이제 숫자와 글씨 외에 다른 타입을 배워보겠습니다.

boolean

인데요.

true or false

두 가지로 나뉘는 함수입니다.
예시를 볼게요.

const AmIMan = true;
console.log(AmIMan);

어라?
true 뒤에 "가 없네요?
"가 붙으면, 글씨로 인식하기 떄문에 boolean에서는 사용하지 않습니다!
결과를 볼게요.

제가 남성임이 사실이라고 해요.
숫자나 글씨가 필요 없는 상황에서 쓰는 함수입니다.

다음은

null

입니다.

값은 있지만, 무색무취라는 말입니다.
즉, 저는 AmIMan이라는 variable을 만들고, 값을 null로 정의한것 뿐입니다.
false와는 전혀 다른 의미입니다!!
값이 정의되지 않은 것이 아니에요.

const AmIMan = null;
console.log(AmIMan);

예시에서 보자면
AmIMan의 variable 값은 null이고, AmIMan을 null이란 공기같은, 아무것도 아닌 걸로 가득 채웠다고 볼 수 있습니다.
자연스럽게 발생하는 것이 아닌
"여긴 비어있어요!!"라고 외치는 느낌이죠.
이제 결과를 볼까요?

이 내용은 완벽히 이해될 때 까지 반복해야겠어요.

다음에 배워볼 내용은
존재하지 않고 뭔가 없고 어디에도 해당되지 않는

undefined

입니다.

const AmIMan = null;
console.log(AmIMan);

앞서 null의 코드 예시입니다.
여기서 AmIMan은 null이라는 값으로 정의(defined)되어 있어요.

const AmIMan = null;
let login;
console.log(login);

login이라는 variable을 만들었지만, 뒤가 허전합니다.
값을 주지 않았거든요.
이제 이 내용을 출력해볼까요?

undefined, 정의되지 않음으로 나오네요.

즉, login이라는 variable을 만들었기 때문에
login에 가상 메모리는 할당되었지만
아무런 값이 정의되지 않은 상태가 undefined입니다.

그럼 AmIMan과 login을 같이 console해볼게요.

const AmIMan = null;
let login;
console.log(AmIMan, login);

결과는?

각기 다르게 출력되는걸 볼 수 있습니다.
즉!

null : 아무것도 아닌 것으로 "정의가 된 것"

undefined : "정의조차 되지 않은 것"

이라고 생각할 수 있겠어요.

정리해보자면,
true = 켜져있음
false = 꺼져있음
null = 비어있음
undefined = 정의되지 않음
그리고, 이들 네 가지는 문자가 아닌 타입!!
이네요.

초보는 여기까지만 봐도 머리가 아프네요.
그래도 조금만 더 배워보겠습니다.

다음은

데이터 정리, 배열 및 그룹

입니다.

예시를 먼저 볼게요.

const jan = "jan";
const feb = "feb";
const mar = "mar";
const apr = "apr";
const may = "may";
const june = "june";

const monthOfHalfAYear = jan + feb + mar + apr + may + june;

console.log(monthOfHalfAYear);

반년을 일일이 입력한 후 묶어줬습니다.
그리고 console을 하면?

: (
보기만 해도 정신이 없습니다.
그리고 제가 원하는 월을 따로 솎아내기도 힘들어 보이네요.
이 때 사용하는 것이 바로

Array

입니다.

const jan = "jan";
const feb = "feb";
const mar = "mar";
const apr = "apr";
const may = "may";
const june = "june";

const monthOfHalfAYear = [jan , feb , mar , apr , may , june];

console.log(monthOfHalfAYear);

틀린그림을 찾아볼게요.
우선 묶어둔 값에서 +는 모두 콤마(,)로 대체되었네요.

그리고 그 묶은 곳의 시작과 끝에
[
]
각각 대괄호가 붙었습니다.

앞에 숫자 6은 갯수를 뜻하고,
화살표를 클릭하면 아래 이미지처럼 나열도 되는
데이터 리스트가 완성되었습니다.
간단합니다.

const jan = "jan";
const feb = "feb";
const mar = "mar";
const apr = "apr";
const may = "may";
const june = "june";

const monthOfHalfAYear = [jan , feb , mar , apr , may , june];

const blabla = [10, 30, "Bee", false, null, undefined, "Kim"]

console.log(monthOfHalfAYear, blabla);

"blabla"라는 새로운 variable 값을 추가했습니다.
결과는?

짜잔.
이처럼
시작과 끝에 대괄호를 넣고 쉼표로 분리만 해 주면 리스트는 완성됩니다.
이처럼 array에는 숫자, 문자, variable, boolean 모두 들어갈 수 있습니다.

const monthOfHalfAYear = ["jan", "feb", "mar", "apr", "may", "june"];

console.log(monthOfHalfAYear);

이렇게 간단하게 정리한 후 다시 실행하면

역시 깔끔하게 정리된 모습입니다.

이제 여기서 전 제가 원하는 값만 추려내고 싶네요.
제가, 혹은 누군가 1년 중 세번째 월, 3월을 선택하고 싶다고 합니다.
(=저 array들 중에서 세번째 element를 알려주세요~)
그럼 위 사진에서 첫번째, 두번째, 세번째를 세보면
"mar"가 되겠네요.

그럼 제가 해야할 일은

const monthOfHalfAYear = ["jan", "feb", "mar", "apr", "may", "june"];

console.log(monthOfHalfAYear[3]);

console.log(monthOfHalfAYear);
이 부분 마지막에 [3] 만 추가해주면
"저 중 3번째 값을 알려주세요"가 되겠죠?
볼까요?

?!?!?!
사기당한 기분이에요.
분명히 3번째는 "mar"인데
왜 4번째인 "apr"이 나온걸까요?

그 이유는
컴퓨터는 숫자를 0부터 세서 그렇다고 합니다.

즉, 첫번째 "jan"을 1로 카운트 하지 않고

"0"으로 카운트 한다는겁니다.

그럼 우리가 원하는 "mar"의 값을 얻기 위해서는 어떻게 해야 할까요?

const monthOfHalfAYear = ["jan", "feb", "mar", "apr", "may", "june"];

console.log(monthOfHalfAYear[2]);

숫자를 2로 바꿔주면

이렇게 "mar"가 등장합니다.

그런데 7월을 추가해야 한다면

const monthOfHalfAYear = ["jan", "feb", "mar", "apr", "may", "june"];

monthOfHalfAYear.push("july")

console.log(monthOfHalfAYear);

이렇게 push를 사용하면 됩니다.

자, 맨 마지막에 7월이 추가되었네요.

그런데 7월까지 있는 저 리스트에 없는 8번째 값을 찾아달라고 하면 어떻게 반응할까요?

const monthOfHalfAYear = ["jan", "feb", "mar", "apr", "may", "june"];

monthOfHalfAYear.push("july")

console.log(monthOfHalfAYear[7]);

지켜보죠.

익숙한 undefined가 나오네요.