JavaScript (1) TIL

Jivyy·2020년 4월 30일
JavaScriptTIL
0

WECODE

목록 보기
8/20

변수

  ```
  var name = "김개발";
  var job = "frontend developer";
  ```

  • 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
  • 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.
  • 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
  • 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.
  • 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 쓸 것.

let, const

위에서 변수를 사용할 때 변수 앞에 var 키워드를 사용했습니다.
원래 JavaScript에서 변수를 선언할 때는 var만 있었는데,
버전이 올라가면서 let과 const라는 키워드가 생겼습니다.

사용법은 var와 같습니다.
대신 let키워드를 사용하면 변수 값을 수정할 수 있고,
const키워드를 사용한 변수는 수정할 수가 없습니다.

let을 쓸지, const를 쓸지는 개발자가 정하면 됩니다.

변수에 값을 할당하고 영원히 수정할 일이 없으면 const를 사용하고,
변수 값이 한 번이라도 수정될 예정이라면 let을 쓰면 됩니다.

물론 두 개 구분할 필요 없이 var를 써도 되지만,
앞으로 최신 버전에 맞는 문법을 사용하면 좋겠습니다!

함수

함수의 반환(return)

모든 함수는 반환(return)을 합니다.
모든 함수는 반환을 하긴 하는데, return을 생략할 수도 있습니다.

함수 내부에 return 키워드가 보이지 않으면 반환을 생략했다는 말입니다.
함수가 반환을 생략하면 undefined라는 값을 반환합니다.

함수의 생소한 수학 표현(Math Expression)

let num = 1;
let newNum = num++;
console.log(num);
console.log(newNum);

값이 무엇이라고 출력되나요?
생각했던 결과인가요?
음?

num과 newNum 모두 2라고 예상했는데..
2와 1이 출력되었습니다.
어떻게 된 것일까요?
다시 한 번 코드를 봅시다.

let newNum = num++;

위의 한 줄짜리 코드에서 일어나는 과정을 스텝별로 보면
1. newNum 변수에 num변수를 할당해서 newNum에 1이 할당 되었고,
2. 그 후 num++; 가 실행되어 변수 num이 2가 되었습니다.

위의 스텝을 풀어서 작성하면 아래와 같습니다.

let num = 1;
let newNum = num;
num++;

newNum에도 2를 할당하고 싶으면 아래와 같이 작성하셔야 합니다.

let newNum = ++num;

풀어서 쓰면 아래와 같은 코드이죠!

let num = 1;
num++;
let newNum = num;

함수의 매개변수(parameter)와 인자(argument)

  • 매개변수 :
    함수를 정의하면서, 함수 선언식의 괄호'()'안에 어떤 변수명을 쓰면, 우리는 그걸 매개변수 라고 부릅니다.
    매개변수는 그 이름처럼 실제로 함수 안쪽에서 변수와 같은 역할을 하게 됩니다.
    함수가 호출될 때, 값을 전달받게 되면, 매개변수에 값이 정의됩니다.

  • 인자 :
    어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 우리는 그걸 인자 라고 부릅니다.
    함수에서 매개변수를 적어둔 상태라면, 호출시 인자로 전달한 값은 매개변수를 통해 사용 가능하게 됩니다.

// doubleNumber 함수 선언식
function doubleNumber(myNumber) { // <- 호출시 전달받은 값을 myNumber 라는 변수명으로 함수 안쪽에서 사용하겠다.
  let myResult = myNumber * 2
  return myResult
}

// doubleNumber 함수 호출문
doubleNumber(3); // <- doubleNumber를 호출하면서 값 3을 전달해주겠다.

함수의 여러 인자

Assignment
meetAt 함수를 만들어주세요.
인자를 세개 받습니다.

  • 첫번째 인자는 년도에 해당하는 숫자입니다.
  • 두번째 인자는 월에 해당하는 숫자입니다.
  • 세번째 인자는 일에 해당하는 숫자입니다.
    년도 인자만 받았을 경우 --> "1234년" 과 같은 형식의 문자열을 리턴 해주세요.
    년도,월 인자를 받았을 경우 ---> 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요.
    년도,월,일 인자를 전부 받았을 경우 --> 년도,월,일을 조합해서 "1234/5/6" 과 같은 형식의 문자열을 리턴 해주세요.
    예제:
    meetAt(2022);
    // 결과 --> "2022년"
    meetAt(2032, 3);
    // 결과 --> "2032년 3월"
    meetAt(1987, 10, 28);
    // 결과 --> "1987/10/28"
function meetAt(year, month, day){
  if(year, month, day){
    return year + "/" + month + "/" + day;
  } else if(year, month){
    return year + "년 " + month + "월";
  } else if(year){
    return year + "년";
  }
 }

함수 내부에서 다른 함수 호출하기

function getTax(price) {
  return price * 0.1;
}

function calculateTotal(price) {
  return price + getTax(price);
}

var result = calculateTotal(3500);
console.log(result);

이렇게 함수 안에서 또 함수를 호출할 수도 있습니다.
calculateTotal 함수 내부에서 getTax를 또 호출했습니다.

함수가 실행되는 시점은 함수를 호출하는 순간이겠죠?
왼쪽의 코드를 보면 2~8번 줄 까지는 "이런 함수가 있다.."고 선언해준 것 뿐입니다.
함수가 실행되는 시점은 바로 10번째 줄에서 calculateTotal(3500)으로 호출 했을 때 입니다.

텍스트 문자열의 연결

if 문

let answer = 3 + 3;

if (answer > 15) {
  alert("15보다 큰 숫자!");
} else if (answer > 10) {
  alert("10보다 큰 숫자!");
} else if (answer > 5) {
  alert("5보다 큰 숫자!");
} else {
  alert("5보다 작거나 같은 숫자!");
}

비교연산자

===는 엄격한(identity/strict) 비교연산자 이고,
==는 느슨한 비교연산자 입니다.

이제까지 텍스트는 String형이며, ""(쌍따옴표)로 표시한다고 하였고,
숫자는 Number형으로 "" 없이 숫자 그대로 사용합니다.

그런데 컴퓨터가 쌍따옴표로 되어있는 숫자를 만나면,
아 숫자긴 한데, 쌍따옴표로 감싸있고, 텍스트(String)이구나. 알게 됩니다.

그래서 JavaScript에서는 느슨한 동등 비교가 가능합니다.

아래와 같이 == 로 비교하면 "3"과 3은 참입니다.

if ("3" == 3) {
  return true;
}

아래와 같이 === 을 사용하면 거짓입니다.
두 개의 type이 다르기 때문입니다.

if ("3" === 3) {
  return false;
}

논리연산자

이런 해석이라면 아래와 같은 경우 참입니다.(예)

  • 66세 한국에 산다.
  • 20세 한국에 산다.

위의 두가지 해석중 무엇이 맞을까요?
컴퓨터 언어는 왼쪽에서 부터 해석하기때문에 위가 맞는 해석입니다.

컴퓨터는 본인이 정한 기준으로 실행이 되지만,
개발자인 사람은 볼 때마다 헷갈리는 경우가 있으니 항상 괄호로 묶어주는 습관을 들이면 좋을 것 같습니다.

위의 코드를 가독성있게 바꾼 다면, 아래와 같을 것입니다.

if (age > 65 || (age < 21 && res === "한국"))

혹시 두 번째 해석이 원했던 결과라면 아래와 같이 괄호를 묶어주셔야 합니다.

if ((age > 65 || age < 21) && res === "한국"

Array (배열)

배열은 대괄호([])로 감싸져 있습니다.

위의 배열은 데이터가 하나도 없는 빈 배열입니다.

"서울", "대전"과 같은 배열의 값, 하나하나를 Element(요소)라고 부릅니다.

요소와 요소 사이에는 쉼표로 구분합니다.
요소는 어떤 type도 가능합니다.
이제까지 배운 String, Number, Array 모두 가능합니다.

NOTE :몰랐던 것
1) 안에 배열이 들어있는 배열 만들기.

2) 배열안의 배열 사용법 : 배열이름[바깥배열index][안쪽배열index];

(20 + 40)

  • 배열 안의 배열 : 이차원배열

  • 이차원 이상 : 다차원 배열

  • 너무 차원이 높으면 좋지 않다. 주로 삼차원까지 사용한다.

push/unshift/pop함수

push는 array의 마지막 부분, 즉 꼬리에 요소들을 추가하고
unshift는 array의 맨 앞부분, 즉 머리 부분에 요소를 추가합니다.
pop 은 마지막 요소가 제거됩니다.


for 문

for문이란 코드를 원하는 만큼 반복시켜 줍니다.
for문에 언제부터 언제까지라고 알려주면 그 만큼 반복을 할 수 있습니다.

let count = 1;
for (let i = 0; i <= 5; i++) {    
  count = count + 1;
}

이를 해석하자면 

for (반복조건) {
   //반복조건이 맞으면 실행할 코드
}

하지만 대부분의 경우 배열의 길이가 얼마나 되는지 잘 알지 못합니다.

프론트엔드 코드에서 직접 배열을 생성하지 않고 외부에서 받는 경우가 있고,
너무 배열이 길어서 도저히 길이를 셀 수 없는 경우도 있습니다.

이런 경우, 배열의 길이가 얼마나 되는지 알 수 있는 방법이 있습니다.
배열의 길이를 알면 그만큼 for문을 반복하면 되겠죠.

배열인 변수에 length라는 속성이 있습니다.


let cities = ["서울", "대전", "대구", "대전", "광주", "대전"];
console.log(cities.length)

///결과물 6
for (var i = 0; i < cities.length; i++) {
   if (cities[i] === home) {
     alert("아, 여기 사시는군요");
   }
}

for (var i = 0; i  < cities.length; i++)

가운데 비교연산자를 주의하세요. <= 가 아닌 <를 사용하고 있습니다.
배열의 길이는 6이므로 총 6번의 반복문이 실행되어야 합니다.
i는 0부터 5까지 총 6번이 실행되어야 하므로 배열의 길이보다 작을때까지 반복문을 실행합니다.

만약 <= 작거나 같다는 비교연산자를 사용하면
i는 0,1,2,3,4,5,6 까지 실행되어 총 7번의 반복문을 실행합니다.

데이터타입

JavaScript의 데이터타입은 모두 6가지입니다.

  • undefined
  • null
  • boolean
  • 숫자
  • 문자열
  • 객체

boolean
boolean 타입에는 두 가지 값이 있습니다. true, false 입니다.

다른 데이터 타입이 boolean으로 변환되는 경우가 여러 개 있습니다.

  • true로 변환되는 값 :
    문자열: 비어 있지 않은 문자열 보두
    숫자: 0이 아닌 모든 숫자
    객체: 모든 객체

  • false로 변환되는 값 :
    문자열: "" (빈문자열)
    숫자: 0, NaN
    객체: null
    undefined

profile
Jivyy
나만의 속도로
이전 포스트

Git & Github

다음 포스트

JavaScript : String (2) TIL

0개의 댓글