개발자의 개발 블로그

이렇게  배열안에 객체가 여러개 있을 경우, 값을 어떻게 갖고 올까? 물론 값을 직접 찍어서 보여줄 수도 있다.

arrname[0].title (첫 번째 객체의 title이라는 값) 이렇게 불러올 수 있다.

하지만, 어떻게 일일히 저렇게 쓸까... 불가능하다.

따라서, 자바스크립트 배열 안에 존재하는 객체를 처리하는 것을 알아봐야한다.

const student = [
  { "name": "jang", "age": 31 },
  { "name": "hong", "age": 25 },
  { "name": "jung", "age": 45 }
];

__dirname & __filename :

실행하는 파일의 디렉토리 경로를 출력해준다. OS마다 경로 설정 방식이 다른데, (맥 ㅇㅇ/ㅇㅇ/ㅇㅇ/...) (윈도우 ㅁㅁ\ㅁㅁ\ㅁㅁ\...)  

__dirname을 사용하면 편하게 출력할 수 있다.

__filename을 사용하면, __dirname + 해당파일의 이름까지 붙여서 출력할 수 있다.

[URL 구조]

예전에 사용하던 말이 많았던 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문을 수행하지 않을 것이다.

"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) --> 정상

기억하자.

date를 받아서, 그 날짜를 기준으로 특정 날짜로부터 며칠 지났는지 확인하는 방법은 다음과 같다.

moment(date).add(-30,"days").format("YYYY-MM-DD")

만약, 오늘 날짜를 기준으로 50일 후를 구하고 싶다면?

moment().add(50,"days").format("YYYY-MM-DD") 으로 하면 된다.

format()에서 () 안에 아무것도 작성하지 않다도 된다.

하지만, 

이렇게 쓸데없이 긴 날짜+시간이 나오게 된다.

따라서, 원하는대로 변환할 수 있다.

YYYY-MM-DD도 되고

YY-M-D도 되고

YYYY년MM월DD일 도 된다.

원하는대로 format()안에 넣어 만들면 된다.

일 / 월 / 년을 구하고 싶다면, Date() 를 커스텀하여 사용해야한다.

const date = new Date();

const curr_date = date.getDate();

const curr_month = date.getMonth() + 1; //Months are zero based

const curr_year = date.getFullYear();

이렇게하면

일

월

년

을 각각 구할 수 있다.

참고로 월은 +1을 해줘야한다. 1월은 0부터 시작하기 때문이다.

그 다음,  

const changeFormat = `${curr_year}-${curr_month}-${curr_date}`;

이런식으로

YYYY-MM-DD로 할 수 있다.

하지만, moment 를 사용하여 더욱 쉽게 구할 수 있다.

먼저, npm install moment로 설치해준 뒤,

이런식으로 format을 설정해주면,

동일한 결과가 나온다.