자바스크립트(Javascript)
florent의 개발 적응기
이 글의 주요 내용
[자바스크립트(Javascript)란?]
[자바스크립트(Javascript) vs 자바(Java)]
[해석형 언어(interpreted langugage)와 컴파일 언어(compiled langugae)의 차이]
[JavaScript의 특징]
[JavaScript의 명령어(command) 구조]
[구문(Statement)와 표현식(Expression)]
[표현식(expression)의 활용]
[키워드(keyword)와 식별자(identifier)]
[변수(Variable) 선언]
[변수 선언시 이름 유의사항]
[변수 선언 키워드의 차이: let, const, var]
[JS 내 데이터 타입]
[문자열(string) 데이터]
[숫자 데이터]
[기본 산술 연산자와 모듈로 연산자(Modulo operator)]
[비교 연산자(comparator) 및 기타]
[증가와 감소]
[함수(function)]
[함수란?]
[함수의 주요 특징]
[함수의 정의]
[화살표 함수]
[함수의 매개변수의 기본값 설정]
[조건문(Conditional Statement) vs 반복문(Loop Statement)]
[조건문(Conditional Statement)]
[반복문 (Loop Statement)]
[While 루프]
[For 루프]
[while문과 for문 비교]
[배열(Array)]
[원활한 이해를 위한 TMI]
[배열]
[배열의 활용]
[자바스크립트(Javascript)란?]
JavaScript는 웹 개발에서 널리 사용되는 프로그래밍 언어
앞의 첫 글자를 따 ‘JS’라고도 칭함 ⇒ React.js, Node.js, JSON 등 JS가 붙은 대다수는 JavaScript와 연관되어 있음
[자바스크립트(Javascript) vs 자바(Java)]
자바스크립트는 해석형(interpreted) 언어이며, 컴파일(compile) 언어인 자바와 대조됨
해석형 언어: JavaScript, Python, Ruby
컴파일 언어: Java, C/C++, Swift
[해석형 언어(interpreted langugage)와 컴파일 언어(compiled langugae)의 차이]
[JavaScript의 특징]
동적 타이핑 (Dynamic Typing): 변수의 타입을 선언할 필요 없이 자동으로 결정됨
객체 지향 (Object-Oriented): 객체를 기반으로 한 프로그래밍이 가능
함수형 프로그래밍 (Functional Programming): 함수를 일급 객체로 취급하여 유연한 프로그래밍이 가능
이벤트 기반 (Event-Driven): 사용자 동작이나 시스템 이벤트에 반응하는 프로그래밍이 가능
비동기 프로그래밍 (Asynchronous Programming): 콜백 (Callback), 프로미스 (Promise), async/await 등을 통해 비동기 작업을 처리
DOM 조작 (DOM Manipulation): HTML 문서의 요소를 동적으로 조작
클로저 (Closure): 함수와 그 함수가 선언된 어휘적 환경의 조합
프로토타입 기반 상속 (Prototype-based Inheritance): 객체 간 상속을 구현하는 방식
모듈 시스템 (Module System): 코드를 모듈화하여 재사용성과 유지보수성을 높일 수 있음
호이스팅 (Hoisting): 변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 현상
[JavaScript의 명령어(command) 구조]
대부분의 자바스크립트 문장은 키워드나 식별자(변수명, 함수명 등)로 시작
함수 호출의 경우, 함수 이름 뒤에 괄호 ()가 오고 그 안에 인자(argument)가 들어감
명령어의 끝에는 세미콜론(;, semi-colon)을 붙임
변수 선언 내 변수, 함수 인수, 배열 요소 등을 구분할 때는 쉼표(,)를 구분자로 사용
[구문(Statement)와 표현식(Expression)]
[표현식(expression)의 활용]
특정 함수, 연산자, 리터럴은 표현식만 취하는 경우가 있음
(1) 화살표 함수 (Arrow Function)
화살표 함수는 짧고 간결하게 함수를 정의할 수 있는 문법
특히 한 줄로 작성되는 경우, 중괄호와 return 키워드를 생략할 수 있어, 표현식만으로 구성 가능
(2) 삼항 연산자 (Ternary Operator)
삼항 연산자는 간단한 조건문을 표현식으로 사용할 수 있게 해줌
(3) 단축 평가 (Short-circuit Evaluation)
JavaScript에서는 && 및 || 연산자를 사용한 단축 평가를 통해 표현식을 활용 가능
이는 조건에 따라 표현식을 평가하거나 무시할 수 있게 해줌
(4) 객체 리터럴 (Object Literal)
객체 리터럴은 중괄호 안에 표현식으로 속성 값을 정의 가능
(5) 배열 리터럴 (Array Literal)
배열 리터럴도 표현식으로 값을 정의 가능
[키워드(keyword)와 식별자(identifier)]
키워드: 자바스크립트에서 특별한 의미를 가지고 예약된 단어들로, 변수나 함수의 이름으로 사용할 수 없음
식별자: 변수, 함수, 속성, 클래스 등의 이름을 지정하는 데 사용되는, 사용자가 정의하는 이름
[변수(Variable) 선언]
변수 선언은 일반적으로 ‘[변수 선언 키워드] [변수 이름] [할당 연산자] [값]’으로 구성
변수 선언 키워드 (Variable Declaration Keywords): var, let, const
변수 이름 (Variable Name): 변수를 식별하기 위한 이름(Name)으로, 식별자(identifier) 역할
할당 연산자 (Assignment Operator): ‘=’
값 (Value): 변수에 할당되는 데이터
[변수 선언시 이름 유의사항]
변수에 의미 있는 이름을 지어 모든 사람이 한눈에 이해할 수 있게 해야함
변수는 숫자로 시작할 수 없음
변수는 공백을 포함할 수 없음
이름은 문자, 숫자, 달러 기호, 밑줄(_, underscore)만 포함 가능
카멜 케이스(camelCasing): 소문자로 시작하고 이어지는 단어는 대문자로 시작
[변수 선언 키워드의 차이: let, const, var]
블록 단위란, 중괄호(’{}’, curly braces) 안에 있는 영역을 의미하는 것으로, 중괄호를 사용하는 객체와 제어문(control flow statement, if, for, while과 같은 조건문)을 대상으로 함
TDZ(임시 사각지대, Temporal Dead Zone)란 변수가 선언된 이후 실제로 초기화되기 전의 일시적인 사각지대를 의미 → let과 const 키워드로 선언된 변수는 호이스팅이 발생하지만, 초기화 전에는 참조할 수 없어 초기화 이전에 활용하려고 할 경우 에러 발생 ⇒ 이와 달리 var는 해당 값에 대해 ‘undefined’ 상태를 지님
[JS 내 데이터 타입]
[문자열(string) 데이터]
[문자열 연결]
문자열은 '+'로 연결 가능
[문자열 길이와 문자 수 검색]
word.length ⇒ 문자열의 글자 수를 셈
[문자열 자르기와 부분 추출]
slice(x,y) = x 위치부터 y-1 위치까지 문자열을 자름 ⇒ 코드는 0부터 셈
word.slice(x,y) ⇒ 특정 단어(또는 변수) 대상
[문자열 일부를 대문자/소문자로 만들기]
toUpperCase() ↔ toLowerCase()
[숫자 데이터]
[기본 산술 연산자와 모듈로 연산자(Modulo operator)]
덧셈 = '+'
뺄셈 = '-'
곱셈 = '*'
나눗셈 = '/'
모듈로 = '%' ⇒ 나머지를 줌
[비교 연산자(comparator) 및 기타]
===: 같음 (데이터 타입도 확인)
==: 같음 (데이터 타입 확인 안 함)
!==: 같지 않음
: 보다 큼
<: 보다 작음
=: 크거나 같음
<=: 작거나 같음
&&: 그리고
||: 또는
!: 아님
[증가와 감소]
[함수(function)]
[함수란?]
함수는 특정 작업을 수행하는 코드의 재사용 가능한 블록으로, 함수를 사용하면 코드의 중복을 줄이고 모듈화하여 프로그램의 구조를 개선
[함수의 주요 특징]
코드 재사용성(reusability)
모듈화(modularity)
추상화(abstraction)
매개변수를 통한 유연성(flexibility through parameters)
반환 값을 통한 결과 전달(result delivery through return value)
[함수의 정의]
[화살표 함수]
ES6에서 도입된 함수 표현 방식으로, 더 간결한 문법 제공 → function 키워드 대신 ‘=>’ 사용
매개변수가 하나일 때: 괄호 생략 가능 (예: x => { ... })
매개변수가 없을 때: 빈 괄호 필수 (예: () => { ... })
여러 매개변수: 괄호 안에 쉼표로 구분 (예: (x, y) => { ... })
[함수의 매개변수의 기본값 설정]
매개변수에 기본값을 지정할 수 있으며, 인수를 전달하지 않을 경우 기본값이 사용됨
[조건문(Conditional Statement) vs 반복문(Loop Statement)]
[조건문(Conditional Statement)]
(1) if-else문
조건을 평가하여 참(true)이면 if 블록을, 거짓(false)이면 else 블록을 실행
(2) switch문
여러 가지 경우의 수를 처리할 때 사용 → 각 경우의 수가 세미콜론(;)으로 구분됨에 유의
(3) 삼항 연산자(Ternary Operator)
[반복문 (Loop Statement)]
[While 루프]
주어진 조건이 참인 동안 코드 블록을 반복적으로 실행
조건이 처음부터 거짓이면 한 번도 실행되지 않음
조건이 항상 참이면 무한 루프에 빠질 수 있으므로 주의
[For 루프]
초기화, 조건 검사, 증감식이 한 줄에 명시되어 있어 루프의 동작을 한눈에 파악하기 쉬움
반복 횟수가 명확할 때 주로 사용
[while문과 for문 비교]
[배열(Array)]
[원활한 이해를 위한 TMI]
(1) 객체 생성 연산자
‘new’ 키워드는 JavaScript에서 객체를 생성할 때 사용하는 연산자로, 생성자 함수를 호출하여 새로운 객체 인스턴스를 만들 때 사용함
객체를 생성하는 함수 활용하려면 반드시 new를 붙여서 활용해야 객체 생성에 문제가 생기지 않음
새로운 객체를 생성 → 생성자 함수를 호출하여 새 객체를 초기화 → 생성된 객체를 반환
(2) 속성(Property)
객체에 속한 데이터를 나타내는 값으로, 객체의 상태를 표현
키(key=속성을 나타내는 구분자)-값(value=문자열, 숫자, 배열, 함수 등) 쌍의 형태로 객체 내에 저장됩니다.
점 표기법(.) 또는 대괄호 표기법([])을 사용하여 접근 가능
(3) 메서드(method)
객체의 속성으로 저장된 함수로, 객체 내 데이터를 조작하거나 특정 동작을 수행
메서드 내에서 ‘this’ 키워드를 사용해 객체 자신을 참조할 수 있음 ⇒ this는 객체 내에서만 사용되어야하며, 콜백 함수에서 사용시 전역으로 지정되어 undefined가 될 수 있으니 주의
메서드는 JS나 특정 객체 타입에 사전 정의된 ‘내장 메서드(Built-in Method)’와 개발자가 직접 객체 내에서 정의한 ‘사용자 정의 메서드(User-defined Methods)가 존재
[배열]
배열은 여러 값을 순차적으로 나열한 자료 구조를 의미
0부터 시작하는 인덱스를 사용하며, 인덱스를 통해 개별 요소에 접근 가능
길이가 가변적이며, 다양한 타입의 데이터를 저장할 수 있음
[배열의 활용]
(1) 배열 생성
(2) 배열 요소 접근
(3) includes() 메서드
(4) push() 메서드
(5) pop() 메서드
(6) length 속성
(7) indexOf() 메서드
(8) slice() 메서드
