JavaScript는 Java와 마찬가지로 C언어에서 영향 받은 C-Family 언어입니다. 따라서 기본적인 문법이 비슷합니다. (중괄호로 블럭을 구분하거나 세미콜론으로 문장이 끝남을 알리는 것 등) 이 글에서는 자바와 비교해서 자바스크립트만이 가진 특징들을 소개합니다.
자바가 옷을 잘 갖춰 입은 formal한 느낌의 영국 신사라면, 자바스크립트는 캐주얼한 옷차림의 자유 분방한 미국 청소년 느낌입니다. 자바는 엄격하고 정확해야 하지만 자바스크립트는 관대하고 조그만 실수는 용납해주는 편입니다.
실습은 크롬 브라우저 about:blank에서 개발자 도구(Ctrl + Shift + I) Console을 열어서 진행합니다.
🙋♂️자료형
프로그래밍에서 프로그램이 처리할 수 있는 모든 것을 자료(data)라고 합니다. 형태에 따라 나눈 것을 자료형(data type)이라고 합니다.
String
문자열. JS는 문자가 하나든 여러 개든 모두 문자열 자료형입니다. (문자 하나만 나타내는 자료형(character)은 없습니다.)
> '안녕하세요'
>> "안녕하세요"
> "안녕하세요"
>> "안녕하세요"Number
숫자. JS는 소수점이 있는 숫자와 없는 숫자를 모두 같은 자료형으로 인식합니다. (Integer, Double 구분 없이 Number만 있습니다.)
> 273
>> 273
> 52.273
>> 52.273Boolean
불. 참과 거짓 값을 표현합니다.
> true
>> true
> !false // 불 부정 연산자
>> trueArray
배열. 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형입니다. 배열 내부의 들어 있는 값을 요소(element)라고 합니다. 참고로 배열도 객체입니다. (객체에 대한 설명은 아래 있습니다.)
> const array = [273, 'String', true, function () {}, {}, [273, 103]]
>> undefined
> array
>> (6) [273, "String", true, f, {...}, Array(2)] // 요소 개수와 요소가 출력됩니다.
> typeof (array)
>> "object"typeof
자료형 검사. 자료형을 확인할 때 사용합니다. typeof는 자료형이 아닌 연산자입니다. 아래 undefined, function, object를 이해하기 위해 설명합니다. typeof는 논리 부정 연산자(!), 플러스 연산자(+), 마이너스 연산자(-)처럼 피연산자를 1개만 갖는 단항 연산자입니다.
> typeof('문자열')
>> "string"
> typeof(273)
>> "number"
> typeof 273 // 괄호를 사용하는 것이 좋지만 괄호가 없어도 정상적으로 작동합니다.
>> "number"
> typeof 273 === 'number' // 비교해서 확인하는 경우가 많습니다.
>> Trueundefined
상수와 변수를 사용하면 undefined 자료형을 확인할 수 있습니다.
① 상수와 변수로 선언하지 않은 식별자의 자료형
상수와 변수로 선언하지 않은 식별자의 자료형을 확인하면 undefined가 출력됩니다.
> typeof(abc)
>> "undefined"
> typeof(그냥식별자)
>> "undefined"② 값이 없는 변수
변수를 선언하면서 값을 지정하지 않은 경우 해당 식별자는 undefined 자료형이 됩니다. 상수는 선언할 때 반드시 값을 지정해야 하므로 값이 없는 상수는 존재하지 않습니다.
> let a
>> "undefined"
> typeof(a)
>> "undefined"function
함수. 함수의 자료형은 function입니다. 함수는 이름이 붙어있지 않은 함수(익명 함수)와 이름이 있는 함수(선언적 함수)가 있습니다.
① 익명 함수
이름이 붙어있지 않은 함수를 익명 함수라고 합니다.
> const 함수 = function () { } // 익명 함수 선언
> console.log(typeof 함수) // 익명 함수 자료형 확인
>> function
> console.log(함수) // 함수도 '자료형'이므로 출력할 수 있습니다.
>> f () { } // 이름이 없습니다.② 선언적 함수
이름이 있는 함수를 선언적 함수라고 합니다.
> function 함수 () { } // 선언적 함수 선언
> console.log(typeof 함수) // 익명 함수 자료형 확인
>> function
> console.log(함수)
>> f 함수 () { } // 이름이 있습니다.object
객체. 객체란 추상적 의미입니다. 한 마디로 정의하면 실제로 존재하는 사물을 의미하고, 이름(name)과 값(value)으로 구성된 속성(property)을 가진 JS의 기본 데이터 타입입니다.
> const product = { // 객체를 선언합니다.
제품명: '7D 건조 망고',
유형: '당절임'
}
> product['제품명'] // 객체의 key 값으로 value를 확인합니다.
>> '7D 건조 망고'
> product.제품명 // 온점으로도 value를 확인할 수 있습니다.
>> '7D 건조 망고'null
컴퓨터 과학에서 null은 일반적으로 존재하지 않거나 유효하지 않은 object 또는 주소를 의도적으로 가리키는 참조를 나타냅니다. null은 동작이 원시적으로 보이기 때문에 primitive values 중 하나로 표시됩니다.
그러나 특정 경우에, null은 원시적이지 않습니다. 모든 객체는 null 값으로부터 파생됩니다. 따라서 typeof 연산자는 null의 타입을 object로 반환합니다.
> typeof(null)
>> 'object'
🧏♂️ 하나 더!
Template literals
템플릿 문자열. 문자열 표기법입니다. 문자열 내부에 `${...}` 기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산됩니다.
> console.log('표현식 273 + 52의 값은 ' + (273 + 52) + '입니다...!')
>> 표현식 273 + 52의 값은 325입니다...!
> console.log(`표현식 273 + 52의 값은 ${273 + 52}입니다...!`)
>> 표현식 273 + 52의 값은 325입니다...!
==연산자와 !=연산자
===연산자와 !==연산자는 값과 자료형이 같은지를 비교합니다.
==연산자와 !=연산자는 값이 같은지를 비교합니다.
하지만 JS의 이 연산자들은 어떻게 해서라도 값을 같게 만들어 비교하면서 일반적인 생각과 다른 결과를 냅니다. 아래 코드는 모두 true를 출력합니다. 대부분 다른 자료형끼리 연산되는 경우를 배제해서 ===, !== 연산자와 거의 같은 형태로 작동하므로 코드를 읽을 때 큰 문제는 없습니다.
> 1 == "1" // 자료형이 달라도 어떻게든 변환을 하고 나면 값이 같아지므로 true입니다.
>> true
> false == "0" // false는 0, "0"은 0으로 변환된 뒤에 비교합니다.
>> true
> "" == [] // 빈 문자열은 false, 비어있는 배열 []는 false로 변환된 뒤에 비교합니다.
>> true
> 0 == [] // 0은 false, 비어있는 배열[]은 false로 변환된 뒤에 비교합니다.
>> true
다음 글은 상수와 변수에 대해 다룹니다.
💁♂️reference
혼자 공부하는 자바스크립트
윤인성 지음ㅣ한빛미디어ㅣ2021ㅣ도서 정보
mdn web docs
Mozilla 재단 ㅣ출처
EOD.
