개발자의 개발 블로그

HTML와 자바스크립트로 뭔가를 테스트할 일이 생겼다.

그런데, 문제가 있었다. 많이 까먹었다는 것이다.

일단,

자바스크립트로 서버에 접속해 데이터베이스에서 값을 가져오는 것까지 성공을 했다.

그런데, HTML에 그 값을 찍어보고 싶은데 어떻게 하더라???

"HTML에서 자바스크립트 변수를 어떻게 사용하더라? 어떻게 불러오지?"

검색을 해봤다... 그 결과 결론은

HTML은 프로그래밍 언어가 아니라 마크업 언어기 때문에 단지, 페이지의 구조(모양)을 나타내는 역할을 한다.

따라서, HTML에서 변수를 불러와서 호출할 수 없다.  자바스크립트에서 HTML태그에 값을 넣어줄 뿐이다.

...

그랬다. 맞다. 생각났다. 알고 있었다. 진짜다. 

const name = document.getElementById("name").value;

이런식으로 HTML의 id를 호출해서 값을 받아올 수도 있고, 넣는다.

예전에 사용하던 말이 많았던 var... 요즘에는 const와 let으로 대체되었다.

하지만, 완전 대체되진 않았다. 스코프(유효 범위) 때문이다.

const와 let은 블록 스코프를 지니고 있다.

var는 함수 스코프를 지니고 있으므로 일반적인 if문의 블록이나 for문의 블록과 상관없이 동작한다.

const는 쉽게말해서 한 번만 할당한다( = )고 생각하면 된다. 한 번 값을 할당하면 그 이후로 값을 재할당할 수 없다.

또한, 초기화할 때 값을 할당해야 에러가 나지 않는다. 

즉,

const a;

a = 20;

이렇게 작성하는 것은 불가능하다. 무조건 첫 선언과 동시에 할당해야한다.

let은 값이 언제든지 변할 수 있는 변수를 선언할때 사용한다. const에 비해 var와 유사하다.

const b;

b = 20;

둘 중 언제 어떤 것을 쓰면 될까?

변수는 초기화했던 값이 다른 값을 다시 할당하는 경우는 적을뿐만 아니라 실수로 변수의 값을 변경할 가능성도 존재한다.

따라서, 기본적으로 const를 사용하고 다른 값을 할당해야한다는 확신이 있을 때 let를 사용하면 된다.

다음과 같은  7가지를 제외한 모든 값은 true입니다.

1. 값이 없거나 

2. 0 또는 -0

3. null

4. false

5. NaN,

6. undefined,

7. 빈 문자열 ("")

문자열 "false"를 포함한 그 외 모든 다른 값은 초기값을 true로 설정합니다.

심지어, 빈 객체{}  또는 빈 배열[] 역시 true입니다.

그래서, 코드를 간결하게 사용할 수 있게 된다.

예를 들어, 홀수와 짝수를 구별하는 코드를 작성할 수 있다.

  if (num % 2) {
    return odd;
  }
  return even;
}

num이 짝수라면?

나머지가 0이 나올 것이고, 위에서 보았듯이 0은 false이므로 if문을 수행하지 않을 것이다.

뽑는 메소드

pop() : 가장 마지막 요소를 뽑는다.

shift() : 가장 첫 요소를 뽑는다.

배열에 추가하는 메소드

push() : 가장 마지막에 추가한다.

unshift() : 가장 첫 번째에 추가한다.

조합을 해보자.

var a = [];

var b = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (var i = 0; i < 3; i++) {

var randomNum = b.pop();

a.push(randomNum);

}

pop

pop으로 뒤에것부터 3개를 빼면 9 8 7

push로 마지막에 추가해서 집어넣으면 그대로 9 8 7

pop은 그대로 가고, push가 아니라 unshift였다면? 

앞부터 채워 넣으니까  7 8 9

"12"는 문자일까 숫자일까?

String이므로 문자이다.

숫자로 사용하고 싶다면 어떻게 할까?

parseInt 함수 사용하는 방법도 있고, Number함수를 사용하는 방법도 있다.

이 둘 중에서는 Number함수를 사용하는 것이 좀 더 효율적이다. 빠르다고 해야할까?

static addZeros = numbers => numbers.map(number => {

 return Number(`${number}0`);

});

이 경우는 좀 특별한 경우이다.

[1,2,3,4,5,6,7] 배열이 있다고 가정하면

[10,20,30,40,50,60,70] 배열로 만들고 싶을 때 위와같이 작성하면 된다.

물론 복잡하게 하지말고 *10을 해도 되지만... 곱하지말고 0을 붙이라는 조건이 있다면? 

Number와 ` `를 혼합하여 사용하면 된다.

여기서 숫자를 문자열로 바꾸는 방법도 나왔다.

기존에는 ' ' 나 " "을 이용하여 문자열로 변환했다. 하지만 ES6가 나오면서 백틱이라 부르는

키보드 숫자 1 왼쪽에 있는 이 요상하게 생긴 것을 사용하면 된다.

이것이 정말 편한 이유는 이 안에 변수명 등을 문자열과 혼합하여 사용할 수 있기 때문이다.

문자열이 아닌 변수를 사용하고 싶다면 달러를 쓴 다음 $  중괄호를 열고 닫는다

${}

그리고 중괄호안에다가 변수를 작성하면, 문자열이 아닌 자바스크립트 코드로 인식하게 된다.

const string = `나의 나이는 ${age}이고, 사는 곳은 ${address}입니다.`;

이렇게 사용할 수 있다. 옛날 방식을 이용하면... 아래와 같이 썼었다. 더 길어지면 더더욱 복잡하다.

const string = "나의 나이는 " + age + "이고, 사는 곳은 " + address + "입니다."

그러므로 백틱을 잘 활용하자.

배운 것

1. Number 함수 : 문자열을 숫자로 변환해주는 함수

2. Backtick : 문자열 내에서 자바스크립트 코드를 혼용할 수 있게 하는 것

객체를 쉽게 변경할 수 있다면 문제가 발생할 수 있다.

그래서, freeze()를 통해 얼려버려서. 추가, 수정,삭제를 일절 못 하게 막는다.

아무리 추가를 하고, 수정을 하고, delete로 삭제를 해도 변함없이 prop: 42만 살아있다 !!!!!!

const objA = {

 name: "JANG",

 address: "Seoul",

 nationality: "Korea",

 age: 22

};

와 같은 객체가 있다고 한다.

키 또는 값만 따로 배열로 추출하고 싶다면 어떻게 할 수 있을까?

키의 경우

const { name, address, nationality, age} =  objA;

이렇게 한 뒤에,

return [name, address, nationality, age];

이렇게 리턴해줄수도 있겠지만,

쉽게 Object객체를 통해 한방에 배열로 만드는 방법이 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

이것을 사용하면, 끝!!

.keys가 있으니까... values도 있지 않을까?

빙고!

이렇게 객체에서 키,.. 값을 추출할 수 있다.

화살표 함수는 

const func = () => console.log("리턴 생략"); (O) --> 정상

const func = () => return console.log("리턴 생략해야함"); (X) --> 에러

이렇게 중괄호 { }를 사용하지 않으면,

return을 포함한다는 암묵적인 규칙이 적용되므로 return을 작성하지 않는다.

만약, 함수의 코드가 길어져서 뒤에서 return을 해야한다면, 중괄호와 함께 return을 반드시 적어주어야한다.

const func = () => {

....

....

return number;

} (O) --> 정상

기억하자.

Number() 생성자 함수는 숫자 객체 / 숫자 원시값을 만들 때 사용한다.

toLocaleString() 함수를 사용하면 된다.

Number() 형 내장 함수이다.

돈의 형태(1000단위로 콤마[,]) 형태로 형변환을 시켜 리턴하는 함수이다.

뭔말인지 모르겠으면 예제를 보자.

Number(1000000).toLocaleString('en');

결과값 : 1,000,000