JavaScript
함수 (Function)
일련의 문장들을 하나로 묶어서 재사용이 가능하게 하는 기본적인 코드 블록
- 필요할 때마다 호출하여 해당 작업을 반복해서 수행(사용) 가능
함수를 정의하는 방법에는 여러 가지가 있지만, 일반적으로 function 키워드를 사용한다.
function sum(a, b) {
return a + b;
}
console.log(sum(1, 2)); // 3지역 변수 (Local Variables)
함수 내부에서 선언된 변수를 지역 변수
함수 내에서만 접근 가능하며, 함수 실행이 종료되면 생명주기가 끝난다.
function test() {
let local = 'I am a local variable';
console.log(local); // I am a local variable
}
test();
console.log(local); // ReferenceError: local is not defined
전역 변수 (Global Variables)
함수의 외부에서 선언된 변수
프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지(또는 실행코드)가 닫혀야만 메모리에서 사라진다.
let global = 'I am a global variable';
function test() {
console.log(global); // I am a global variable
}
test();
console.log(global); // I am a global variable객체 (Objects)
프로퍼티와 메소드를 가지고 있는 데이터의 컬렉션
- JavaScript에서 거의 모든 것은 객체다.
let person = {
name: 'wish',
age: 26,
sayHello: function() {
console.log('Hello, my name is ' + this.name);
}
};
console.log(person.name); // wish
console.log(person.age); // 26
person.sayHello(); // Hello, my name is wish프로퍼티 (Properties)
객체의 속성을 의미
name과age는 각각person객체의 프로퍼티다.
프로퍼티는 점 표기법(dot notation) 또는 대괄호 표기법(bracket notation)을 사용하여 접근할 수 있다.
let person = {
name: 'Alice',
age: 20
};
console.log(person.name); // Alice
console.log(person['age']); // 20메소드 (Methods)
객체에 속한 함수를 의미
sayHello는person객체의 메소드다.
메소드는 점 표기법을 사용하여 호출할 수 있다.
표준객체
다른 객체의 기초가 되는 핵심적인 객체
- 기본 JavaScript 내장 객체
| 객체 | 메소드 | 설명 |
|---|---|---|
| Number | parseInt() | 문자열을 정수로 변환 |
| parseFloat() | 문자열을 실수로 변환 | |
| isNaN() | 입력된 값이 숫자가 아닌지 판별 | |
| isInteger() | 입력된 값이 정수인지 판별 | |
| Math | min() | 입력된 값들 중에서 가장 작은 수를 반환 |
| max() | 입력된 값들 중에서 가장 큰 수를 반환 | |
| random() | 0 이상 1 미만의 랜덤한 수를 반환 | |
| round() | 입력된 값에 가장 가까운 정수를 반환 | |
| floor() | 입력된 값의 버림 값을 반환 | |
| ceil() | 입력된 값의 올림 값을 반환 | |
| Date | getFullYear() | 입력된 날짜의 연도를 반환 |
| getDate() | 입력된 날짜의 일자를 반환 | |
| getDay() | 입력된 날짜의 요일을 반환 | |
| getTime() | 1970년 1월 1일 0시 0분 0초부터 입력된 날짜까지의 밀리초를 반환 | |
| ISO 날짜 양식 | YYYY-MM-DDTHH:MM:SSZ | |
| Long 날짜 양식 | MMMM DD YYYY | |
| Short 날짜 양식 | MM/DD/YYYY | |
| String | indexOf() | 입력된 값이 처음으로 나타나는 인덱스를 반환 |
| lastIndexOf() | 입력된 값이 마지막으로 나타나는 인덱스를 반환 | |
| charAt() | 입력된 인덱스에 해당하는 문자를 반환 | |
| slice() | 입력된 인덱스 범위의 문자열을 추출 | |
| substring() | 입력된 인덱스 범위의 문자열을 추출 | |
| split() | 입력된 구분자를 기준으로 문자열을 분리하여 배열로 반환 | |
| Array | push() | 배열의 끝에 새로운 요소를 추가 |
| pop() | 배열의 마지막 요소를 제거하고 그 요소를 반환 | |
| sort() | 배열의 요소를 정렬 |
예외 처리(Exception Handling)
자바스크립트에서는 try, catch, finally, throw 등의 키워드를 사용하여 예외를 처리한다.
try
- 예외가 발생할 가능성이 있는 코드 블록을 정의한다.
catch
- try 블록에서 예외가 발생했을 때 실행할 코드를 정의한다.
finally
- 예외 발생 여부와 상관없이 항상 실행할 코드를 정의한다.
throw
- 사용자가 정의하는 예외를 발생시킨다.
try {
// 예외가 발생할 가능성이 있는 코드
} catch (error) {
// 예외가 발생했을 때 실행할 코드
} finally {
// 예외 발생 여부와 상관없이 항상 실행할 코드
}function checkNumber(num) {
if (isNaN(num)) {
throw new Error('입력값이 숫자가 아닙니다.');
} else {
console.log('입력값은 숫자입니다.');
}
}
try {
checkNumber('abc'); // 숫자가 아닌 값을 입력
} catch (error) {
console.log('Error: ' + error.message);
}정규 표현식(Regular Expression)
문자열에서 특정 내용을 찾거나 대체하거나 추출할 때 사용하는 표현식
- 자열의 패턴을 정의하는 데 사용되는 도구
- /pattern/modifiers의 형태로 표현한다.
pattern
- 찾거나 매칭할 패턴을 정의한다.
modifiers
- 검색에 대한 옵션 설정
예시
// "a" 다음에 "b"가 하나 이상, 그 다음에 "c"가 오는 문자열을 찾는 정규 표현식
let re = /ab+c/;let re = /\d+/g; // 하나 이상의 숫자를 전역적으로 찾는 정규 표현식
/*
g = 규 표현식의 플래그 중 하나로, "global"의 약자
g 플래그를 사용하면 정규 표현식이 문자열 전체를 검색하고 모든 일치하는 결과를 반환한다.
*/
let str = 'The year is 2023 and the month is 7';
let result = str.match(re); // ["2023", "7"]기본적으로 정규 표현식은 패턴에 일치하는 첫 번째 결과를 찾으면 검색을 중단한다. 그러나 g 플래그를 사용하면 정규 표현식이 문자열 전체를 검색하고 모든 일치하는 결과를 반환한다.
주요 메타문자 (Metacharacter)
| 메타문자 | 설명 |
|---|---|
| . | 줄 바꿈을 제외한 모든 문자와 일치 |
| ^ | 입력의 시작을 나타냄 |
| $ | 입력의 끝을 나타냄 |
| * | 앞 토큰의 0번 이상 반복에 일치 |
| + | 앞 토큰의 1번 이상 반복에 일치 |
| ? | 앞 토큰의 0번 또는 1번 반복에 일치 |
| \d | 모든 숫자와 일치 |
| \w | 모든 단어 문자(알파벳, 숫자, 밑줄)와 일치 |
| \s | 모든 공백 문자와 일치 |
주요 플래그
| 플래그 | 설명 |
|---|---|
| g | 전역 검색 |
| i | 대/소문자 구분 없는 검색 |
| m | 여러 줄 검색 |
주요 메서드
| 메소드 | 설명 |
|---|---|
| exec() | 일치하는 정보의 배열을 반환하거나 불일치시 null을 반환 |
| test() | 문자열에서 일치하는지 테스트. 일치하면 true, 아니면 false 반환 |
| match() | 문자열에서 모든 일치 항목의 배열을 반환, 일치하는 항목이 없는 경우 null 반환 |
| replace() | 일부 또는 모든 일치 항목을 대체 |
| search() | 문자열에서 일치하는 항목을 검색. 일치하는 항목의 인덱스를 반환하거나 검색이 실패하면 -1 반환 |
질문 답변해보기
Q: object를 만들때 fullId 메서드를 호출한 적이 없는데 왜 호출될까?
A: 실수로 어딘가에서 호출했다?...
fullId 메서드를 호출한 적이 없으면 호출이 안되지 않나?...
질문을 이해하지 못하겠습니다.
Q: this. 를 안 붙이면 reference Error가 뜨는데 위에 선언을 했음에도 불구하고 왜 에러가 뜰까?
// 예시 올바른 case
var person = {
name: '홍길동', // 이름 프로퍼티를 정의함.
birthday: '030219', // 생년월일 프로퍼티를 정의함.
age: 30,
pId: '1234567', // 개인 id 프로퍼티를 정의함.
fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.
return this.birthday + this.pId;
},
};
// 예시 reference Error가 뜨는 case
var person = {
name: '홍길동',
birthday: '030219',
age: 30,
pId: '1234567',
fullId: function() {
return birthday + pId;
},
};
console.log(person)A: 자바스크립트에서는 메서드를 선언하면 메서드에서 사용되는 변수들을 메서드 내부 or 전역변수에서 찾는다. 그런데 위의 경우에는 person 객체를 만드는데 사용(선언)된 변수인 birthday와 pId를 fullId에서 찾으려고 하면 fullId 메서드 내부에 선언 된 변수와 지역변수에 없는 값이기 때문에 찾지 못한다.
birthday, pId, fullId 모두 person이라는 객체의 속성이다. 객체의 속성은 해당 객체에 '속해' 있지만, 이는 스코프 개념과는 다르다. 객체의 메소드(즉, 객체 속성 중 함수인 것) 내에서 그 메소드가 속한 객체의 다른 속성을 접근할 때는 this 키워드를 사용해야 한다.
스코프
- 변수가 정의된 범위
함수 스코프(Function Scope)
- 자바스크립트에서 함수는 각자의 스코프를 갖는다.
- 이 스코프 내부에서 선언된 변수들은 그 함수 내부에서만 접근이 가능하며, 그 외의 영역에서는 접근할 수 없다.
- 함수 스코프는 해당 함수 내부에서 선언된 변수, 그리고 그 함수가 정의된 시점의 스코프(즉, 상위 스코프)를 포함한다.
this 키워드
- 객체의 메소드 내부에서 this를 사용하면, this는 그 메소드를 호출한 객체를 가리킨다.
- 따라서 객체의 메소드 내부에서 this를 사용해 그 객체의 다른 속성에 접근할 수 있다.
본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.
#정보통신산업진흥원 #NIPA #AI교육 #프로젝트 #유데미 #IT개발캠프 #개발자부트캠프 #프론트엔드 #백엔드 #AI웹개발취업캠프 #취업캠프 #개발취업캠프
