오늘부터 본격적인 자바스크립트 학습을 시작했습니다. 정을수 강사님께서는 자바스크립트의 기반이 되는 다양한 이론을 소개해주셨고, 온라인 강의에서도 자바스크립트 기초 지식에 대해 학습했습니다.
JS 개요
표기법
dash-case
kebop-case라고도 하며, 일반적으로 마이너스 기호를 사용하여 단어와 단어 사이를 꼬챙이 - 로 꽂은듯한 표기법입니다.
HTML, CSS에서 주로 이용할 때가 많습니다.
snake_case
언더바를 사용하여 단어와 단어 사이를 잇는 표기법입니다.
dash-case와 마찬가지로 HTML, CSS에서 주로 사용합니다.
camelCase
첫글자만 소문자로 표기하고 다음에 오는 단어부터 맨 앞글자를 대문자로 적는 표기법입니다.
일반적으로 JavaScript에서는 camelCase를 기준으로 코드를 작성합니다.
function thisIsFirstFunction() {};PascalCase
camelCase와 유사하지만, 첫 단어의 맨 앞글자도 대문자로 적는 표기법입니다.
자바스크립트에서 class와 생성자를 작성할 때 사용합니다.
function User(option) {
this.name = option.name;
}
const good = new User({
name: 'Kim'
});zero-based numbering
일반적으로 숫자는 1부터 번호를 매기지만, 자바스크립트 프로그래밍에서는 특수한 경우를 제외하고 0부터 숫자를 시작합니다.
이는 배열의 메모리 저장과 어느 정도 연관이 있습니다.
기본적으로 배열의 첫 아이템이 저장되는 메모리가 곧 출발 주소가 됩니다. 그래서 첫번째 아이템의 메모리 주소만 확보가 되면 두번째, 세번째 아이템도 순차적으로 찾을 수 있습니다.
그런데 기준이 되는 첫번째 아이템은, 출발 주소에서 1칸 떨어진 것이 아니라 출발 주소가 되는 바로 그 메모리 주소에 담기기 때문에, 0부터 번호를 매기게 됩니다.
주석
자바스크립트에서도 주석을 작성할 수 있습니다.
한 줄짜리일 경우에는 //나 /를 사용할 수 있고, 여러 줄일 경우에는 /로만 작성합니다.
// 한줄 짜리 주석
/* 여러
줄 짜리
주석 */데이터 타입
String
String은 문자로 이루어진 데이터를 지칭합니다.
반드시 따옴표를 사용하여 데이터를 표현해야 하며, 어떤 따옴표를 사용해도 상관없지만 따옴표 종류는 반드시 통일되어야 합니다.
const name = "Kim";
const eyeColor = 'Red';또한 문자열 보간이 가능합니다. 이 경우에는 ${데이터}의 형식으로 작성합니다.
let myName = "Park"
let hello = `hello ${myName} !!`문자열 보간으로 일반 문자열과 변수를 혼용할 때에는 일반 따옴표가 아니라 백틱(`)을 사용해야만 합니다.
Number
자바스크립트의 숫자는 우리가 일상 생활에서 사용하는 숫자와 그 성질이 동일합니다.
따라서 숫자로 표현된 데이터는 연산자를 사용하여 연산을 하는 것이 가능합니다.
또한, 숫자로만 표현했더라도 따옴표 안에 작성을 한다면 문자열로 취급되기 때문에 주의하여야 합니다.
숫자 데이터로 취급되는 NaN이라는 개념도 있습니다. 이는 잘못된 입력으로 인해 연산이 불가능한 숫자 데이터 타입을 의미합니다.
NaN은 데이터 타입 상 숫자로 분류되지만, 엄밀히 숫자가 아니기 때문에 예외적인 상황을 제외하고는 연산에 활용할 수 없습니다.
Boolean
Boolean 타입은 논리적 참, 거짓을 나타내는 데이터 타입입니다. 따라서 실제 값은 True와 False, 둘 뿐입니다.
다만, Truthy 값과 Falsy 값이라고 해서 참으로 간주되는, 혹은 거짓으로 간주되는 값들이 존재합니다. 자세한 내용은 아래 표와 같습니다.
undefined & null
undefined는 선언 이후 값을 할당하지 않은 변수에 자동으로 할당됩니다.
어떤 변수를 만들고 그 값을 정의해주지 않았을때나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환되게 됩니다.
null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용하는 데이터 타입입니다.
자바스크립트는 대소문자를 구별하기 때문에, null을 Null,NULL 등과 착각하여 사용해서는 안됩니다.
데이터 타입을 검사해주는 메서드 typeof를 통해 null을 검사하면 객체라고 알려주는데, 이는 자바스크립트의 설계상 오류입니다.
null이라는 값은 undefined와 다르게 의도적으로 값이 없음을 표현하고 싶을 때 대입된다고 볼 수 있습니다.
Object
객체라고 표현되는 object는 여러 데이터가 집합된 데이터입니다.
여러 내용의 데이터를 key-value 쌍으로 저장합니다.
객체에 들어갈 수 있는 데이터 종류에는 제약이 없고, 심지어 함수나 또다른 객체도 들어갈 수 있습니다.
let obj = {
color: "red",
quantity: 3,
isRotten: false
}위의 코드 블럭 예시에서, : 앞부분이 데이터에 대한 접근성을 보장하는 key이며, 뒤의 데이터들이 value에 해당합니다.
보는 것과 같이, 하나의 key-value 쌍 뒤에 또다른 쌍을 추가하기 위해서는 쉼표로 구분해줘야 합니다.
Array
배열(Array)은 여러가지의 데이터를 순차적으로 저장하는 데이터 타입입니다.
객체와 달리 key-value 형태가 없고, 순수한 데이터만 배열에 들어갑니다.
또한 객체와 달리 배열에 담긴 데이터들은 순서가 정해집니다. 이미 언급한 zero-based numbering에 의해 데이터들은 0번째 순서부터 시작합니다.
배열 역시 넣을 수 있는 데이터 타입에 제약이 없습니다.
let arr = [1, "red", true, {age: 25}]변수와 예약어
변수
데이터를 저장하고 참조(사용)하는 데이터의 이름을 변수라고 지칭합니다. 이러한 변수는 선언하고, 값을 할당하는 과정으로 활용됩니다.
변수를 선언하는 방법에는 var, let, const가 있습니다.
var, const, let의 차이점
-
var로 선언한 변수는 선언 전에 활용해도 에러가 나지 않지만, const와 let은 에러가 발생합니다. var는 초기 값이 없을 경우 undefined를 초기값으로 잡고 메모리를 할당하지만, const와 let은 이러한 과정을 거치지 않기 때문에 이러한 현상이 발생합니다.
-
var와 let은 변수 선언 시 초기 값을 주지 않아도 되지만, const는 반드시 초기 값을 설정해야 합니다.
-
var와 let은 값을 다시 할당할 수 있지만, const는 한번 할당한 값을 변경할 수 없습니다. 단, const가 객체형 데이터 타입일 경우, 내부의 프로퍼티를 변경하는 것은 가능합니다.
함수
함수는 특정 기능이나 동작을 수행하는 코드들의 집합으로 정의됩니다.
함수는 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있습니다.
// 함수의 정의(함수 선언문)
function func(num) {
return num + num;
}
func(3) // 9함수는 코드 블럭의 가장 아랫줄과 같이, 호출에 의해 실행됩니다.
따라서 동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 효율적입니다.
함수 작성 방식
위의 코드 블럭 예시처럼, function 키워드를 통해 함수에 직접 이름을 부여하는 것을 함수 선언이라고 합니다.
반면에 다음과 같이, 함수에 이름이 없는 경우도 있습니다.
let func2 = (num) {
return num * num
}이처럼 이름이 붙지 않은 함수를 익명 함수라고 하고, 익명 함수를 변수에 담는 식으로 함수를 작성하는 것을 함수 표현이라고 합니다.
조건문
조건문은 주어진 조건식의 평가 결과에 따라 코드 블럭(블록문)의 실행을 결정합니다. 조건식은 불리언 값으로 평가될 수 있는 표현식이라고 해석할 수 있습니다.
자바스크립트는 2가지의 조건문 if…else 문과 switch 문을 제공합니다.
if..else 문
if…else 문은 주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가 결과, 즉 논리적 참, 거짓에 따라 실행할 코드 블록을 결정합니다.
만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환되어 논리적 참, 거짓을 구별합니다.
if (조건식) {
// 조건식이 참이면 이 코드 블록이 실행된다.
} else {
// 조건식이 거짓이면 이 코드 블록이 실행된다.
}switch 문
switch 문은 switch 문의 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 순서를 이동시킵니다.
case 문은 상황(case)을 의미하는 표현식을 지정하고 콜론으로 마치고, 그 뒤에 실행할 문들을 위치시킵니다.
switch 문의 표현식과 일치하는 표현식을 갖는 case 문이 없다면 실행 순서는 default 문으로 이동합니다.
switch (표현식) {
case 표현식1:
switch 문의 표현식과 표현식1이 일치하면 실행될 문;
break;
case 표현식2:
switch 문의 표현식과 표현식2가 일치하면 실행될 문;
break;
default:
switch 문의 표현식과 일치하는 표현식을 갖는 case 문이 없을 때 실행될 문;
}DOM API
DOM (문서 객체 모델)과 DOM API
텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 합니다.
브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 일컫습니다.
모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이라고 볼 수 있겠습니다.
이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며, 이를 가능케 해주는 것이 바로 DOM API입니다.
DOM API에는 쿼리부터, 노드의 생성, 변경, 제거등을 담당하는 다양한 메서드가 제공됩니다.
메소드 체이닝
메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있습니다.
이러한 프로그래밍 패턴을 메서드 체이닝(Method Chaining) 이라 부릅니다.
메소드 체이닝을 이용하면 코드가 간결해져 하나의 문장처럼 읽히게 할 수 있다는 장점이 있고 장기적으로는 유지보수에 도움이 됩니다.
