내일배움캠프 6일차 TIL(3) - JavaScript 기본 문법(2)

Sunny·2023년 12월 30일
0

저번 글을 적으며 느낀 점이 있다.

이대로는 완강은 꿈도 못 꾼다!

그리고 마침 Velog 오류로 쓰던 글도 싹 날아갔다.
이제 정말 간결하게, 새로 알아본 내용을 위주로 적도록 하겠다.
이번 글은 형 변환, 연산자, 함수를 정리한다.
수정할 점이 있었는데 오류인지 수정이 안 되길래 기존 글을 지우고 다시 올린다.

형 변환

암시적

string은 다른 자료형과 결합할 때 다른 자료형도 string으로 만든다.

let beStr = 'That ' + '1' + 's ' + undefined + ' but ' + true;
//beStr = 'That 1s undefined but true'

숫자 연산자는 변수를 숫자형으로 변환한다.
숫자로 변환할 수 없는 경우 NaN이 된다.

let beNum = 1 - "2" //beNum = -1
console.log(beStr * 3) //NaN

명시적

Boolean(), String(), Number()을 통해 해당 자료형으로 변환할 수 있다.

  • Boolean() 사용 시 false로 반환되는 값
    null, "", undefined, NaN, 0, false

비어 있는 값만 false로 나타내기 때문에
Boolean("0")은 true이다.

  • Number() 사용 시 변환값
    true: 1
    false, null, "": 0
    *string은 공백이 있을 시 빼고 판별함

연산자

사칙연산

//string이 포함되면 string으로 형 변환
+
//숫자형으로 변환
- * / 
% //나머지

할당

= //a에 b를 저장

원하는 연산자를 =의 앞에 붙인다.

+= //a에 b를 더해 저장
-= //a에 b를 빼서 저장
*= //a에 b를 곱해서 저장
/= //a를 b로 나누어 저장
%= //a를 b로 나누어 나머지를 저장

비교

일치

a == b //값이 같다.
a === b //값이 같고 자료형까지 일치한다.

불일치: 앞에 !를 붙인다.

a !== b

크기 비교

<
>
<=
>=

논리

&& //논리곱 and
|| //논리합 or
! //논리부정 not

삼항

(조건) ? (true일 때 반환) : (false일 때 반환) 의 형태를 취한다.

let a = 10 > 3 ? "yes" : "no"
console.log(a) //yes

타입

typeof 의 출력값에 관해서는
이전 글의 자료형 부분에서 설명한 바 있다.
요약하자면 다음과 같다.

typeof는
number, string, boolean, undefined, object, function, bigint, symbol
9개의 자료형만 출력할 수 있고 이 외의 것은 모두 object로 출력한다.

함수

선언문

function 함수명(매개변수) {로직} 

형태를 갖는다.

표현식

let 함수명 = function (매개변수) {로직}

형태도 사용할 수 있다.

호출

함수명(입력값) 

으로 함수를 호출한다.

//입력값과 반환값
funcition add(x,y) {
return x + y
}
console.log(add(10,20)) //30

스코프

이전 글에서 var이 전역 스코프와 함수 스코프만 갖는다는 내용을 다룬 바 있다.
let과 const를 사용한다면 이 둘은 블록을 기준으로 스코프가 생긴다.

이런 식으로 예시를 들어 보겠다.

let hw = "Hello, World!"
function sayHi(hw) { 
    if (hw) {
        let hi = "Hello, ";
        return hi + hw + "!";
    }
    else {
        let hi = "Hello, JavaScript!"
        return hi
    }
}
console.log(hw) //Hello, World!
console.log(sayHi("Velog")) //Hello, Velog!
console.log(sayHi()) //Hello, JavaScript!
console.log(hi) //error: hi is not defined

이 코드를 살펴보면 지역변수에 대해 쉽게 이해할 수 있을 것이다.
함수 밖에서 선언한 변수 hw는 전역변수이다.

함수 sayHi가 매개변수의 이름으로 hw를 사용하고 있지만, 이는 전역변수 hw와는 별개로 함수 안에서만 함수의 입력값을 칭하는 의미로 사용되는 것이다.

또한 hi는 if문의 해당 블록 안에서만 사용되는 지역변수이다.

그렇기 때문에 if와 else에서 모두 hi를 선언하고 있지만, 둘은 별개의 변수이기에 오류가 발생하지 않고 블록 밖에서 불러오려고 하면 오류가 발생한다.

화살표 함수

위의 sayHi 함수를 화살표 함수와 삼항 연산자로 줄이면 다음과 같을 것이다.

let sayHi = (hw) => {
    let hi = "Hello, "
    return hw ? hi + hw + "!" : hi + "JavaScript!"
}

이렇게 return을 생략하고, 매개변수가 1개이므로 () 또한 생략할 수 있다.

let sayHi = hw => hw ? "Hello, " + hw + "!" : "Hello, " + "JavaScript!"

화살표 함수의 형태는 정리하자면 이런 셈이다.

//매개변수가 1개일 때 ()는 생략할 수 있음
let 함수명 = (매개변수) => {로직}
let 함수명 = (매개변수) => 출력값

0개의 댓글