함수의 기초
자바스크립트에서 함수는 일련의 처리를 하나로 모아 언제든 호출할 수 있도록 만들어 둔 것입니다. 자바스크립트에서 함수의 입력값을 인수라고 부르고 출력값을 반환값이라고 부릅니다.
함수를 만드는 방법에는 총 3가지가 있습니다.
- 함수 선언문
function a() {}- 함수 표현식
const b = function () {};- 화살표 함수
const c = () => {};함수를 호출할 때 전달하는 값을 인수(argument), 함수 정의문의 인수를 인자(parameter)라고 부릅니다. 인수는 여러개도 가능하며, 자바스크립트의 함수 선언문은 변수 선언문과 마찬가지로 끌어올림(hoisting)이 가능합니다.
자바스크립트에서는 함수가 객체입니다. 또한 함수를 다른 함수의 인수로도 넘길 수 있습니다.
변수의 유효범위
자바스크립트의 변수는 전역 변수 그리고 지역 변수로 나뉩니다.
- 지역변수(local variable)는 함수 안에서만 접근 가능합니다.
function showMessage() {
let message = "안녕하세여"; //지역변수
console.log(message);
}
showMessage(); // 안녕하세여
console.log(message); // Uncaught ReferenceError: message is not defined
여기서 변수 message는 함수 showMessage 안에서만 유효한 변수입니다.- 전역변수(outer variable)는 함수 바깥에서 선언된 변수로 유효 범위가 프로그램 전체입니다.
let userName = 'John';
function showMessage() {
let message = 'Hello, ' + userName;
alert(message);
}
showMessage(); // Hello, John
}
여기서 변수 userName은 함수 showMessage 내부에서도 작동할 수 있고, 수정도 가능합니다.하지만 함수 내부와 외부에 동일한 이름의 변수가 선언된다면 충돌이 발생해 외부 변수는 내부 변수에 가려지기 때문에 주의해야 합니다.
함수를 활용하면
- 재사용할 수 있다 - 똑같은 작업을 여러 번 반복할 필요 없이 하나로 모아 함수로 만들면 호출만으로 가능하기 때문에 프로그램이 간결해짐
- 프로그램을 이해하기 쉽다 - 상세한 내용을 함수에 숨기는 효과가 있기 때문에 프로그램의 큰 흐름을 파악하기 쉬움
- 프로그램 수정이 간단해진다 - 수정이 필요할 때 해당 함수만 수정하면 됨
객체의 기초
생성자
객체를 여러개 생성하는 수단으로 클래스(class)를 제공하는 C++이나 Java와 달리 자바스크립트는 생성자 라고 하는 함수로 객체를 생성할 수 있습니다.
생성자로 객체를 생성할 때는 new 연산자를 사용합니다. 생성자 안에서 this.프로퍼티 이름 에 값을 대입하면 그 이름을 가진 프로퍼티에 값이 할당된 객체가 생성됩니다.
생성자는 객체를 생성하고 초기화하는 역할을 합니다. 생성자를 통해 이름은 같지만 프로퍼티 값이 다른 객체(인스턴스) 여러개를 간단하게 만들 수 있습니다.
-내장 객체
ES5의 내장 생성자
| 생성자 이름 | 생성되는 객체 |
|---|---|
| Object | 일반 객체 |
| String | 문자열 객체 |
| Number | 숫자 객체 |
| Boolean | 논리값 객체 |
| Array | 배열 |
| Date | 날짜와 시간을 다루는 객체 |
| Function | 함수 객체 |
| RegExp | 정규 표현식 객체 |
| Error | 오류 객체 |
| EvalError | eval()함수와 관련된 오류를 표현하는 객체 |
| InternalError | 자바스크립트 내부에서 발생한 오류를 표현하는 객체 |
| RangeError | 값이 허용 범위를 넘었을때 발생한 오류를 표현하는 객체 |
| ReferenceError | 없는 변수를 참조할 때 발생한 오류를 표현하는 객체 |
| SyntaxError | 문법이 어긋날 때 발생한 오류를 표현하는 객체 |
| TypeError | 값이 기대한 타입이 아닐 때 발생한 오류를 표현하는 객체 |
| URIError | 잘못된 URI를 만났을 때 발생한 오류를 표현하는 객체 |
- Date 생성자
Date생성자는 대표적인 내장 생성자로, 날짜와 시간을 표현하는 객체를 생성합니다. Date객체에 내장된 여러 메서드를 활용하면 날짜와 시간을 간단하게 처리할 수 있습니다.
- Function 생성자
Function은 함수를 생성하는 내장 생성자입니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 그리고 반드시 'new' 연산자를 붙여 실행합니다.
- 기타 내장 객체
자바스크립트에서 처음부터 사용할 수 있는 객체를 내장 객체(빌트인 오브젝트)라 부르며 기본적으로 사용가능한 내장 객체입니다.
| 내장객체 | 설명 |
|---|---|
| 전역 객체 | 프로그램 어디서나 사용할 수 있는 객체 |
| JSON | JSON을 처리하는 기능을 제공 |
| Math | 수학적인 함수와 상수를 제공 |
| Reflect | 프로그램의 흐름을 가로채는 기능을 제공 |
- 전역 객체
전역 객체의 프로퍼티는 프로그램의 어느 위치에서나 쓸 수 있습니다.
window 객체가 전역 객체이며,
console.dir(window); 을 통해 콘솔에서 프로퍼티를 확인할 수 있습니다.
| 분류 | 프로퍼티 |
|---|---|
| 전역 프로퍼티 | undefined, NaN, Infinity |
| 생성자 | Object(), String(), Number() 등 |
| 전역 함수 | parseInt(), ParseFloat(), insNaN() 등 |
| 내장 객체 | Math, JSON, Reflect |
배열의 기초
배열은 값의 목록으로 값마다 번호가 매겨져 있습니다.
배열은 [] 을 이용하여 값들을 묶어 표현합니다.
let arr = [ ];
let arr = new Array();
2가지 문법을 통해 배열을 만들 수 있으며, 첫번째 방법이 주로 쓰입니다.[ ] 안의 값을 배열 요소라 부르며, 왼쪽부터 순서대로 0, 1, 2 , 3... 이라는 번호가 매겨져 있고 이를 인덱스라 부릅니다.
let empty = [];
console.log(empty); // []
배열 리터럴 안에 아무 요소도 넣지 않으면 빈 배열이 생성되며,
let wonju = [1, , 3, 4];
console.log(wonju); // [1, undefined, 3, 4]
요소의 값을 생략하면 그 요소는 생성되지 않습니다.
또한 리터럴 안의 요소에는 변수와 마찬가지로 모든 타입의 값이 올 수 있습니다. (숫자, 문자열, 불리언 등등)
-
배열의 length 프로퍼티는 0을 포함합니다. 만약 현재 배열의 길이보다 짧은 값을 length 프로퍼티에 대입하게 된다면 그 길이를 넘는 요소들은 삭제됩니다.반면 길이보다 큰 값을 넣는다면 새로운 요소는 추가되지 않고 프로퍼티값만 변경됩니다.
-
배열 내 특정 요소를 얻고 싶다면 대괄호 안에 순서를 나타내는 숫자를 넣어주면 됩니다.
let a = ["A", "B", "C", "D"];
a.length = 2;
console.log(a); // ["A", "B"];let fruits = ["사과", "오렌지", "자두"];
alert(fruits[0]); // 사과
alert(fruits[1]); // 오렌지
alert(fruits[2]); // 자두배열 요소의 추가와 삭제
push 메서드– 맨 끝에 요소를 추가합니다.
let fruits = ["사과", "오렌지"];
fruits.push("배");
alert(fruits); // 사과,오렌지,배shift – 제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 밀어줍니다.
let fruits = ["사과", "오렌지", "배"];
alert(fruits.shift()); // 배열에서 "사과"를 제거하고 제거된 요소를 얼럿창에 띄웁니다.
alert(fruits); // 오렌지,배함수,,, 진짜 중요하지만 물론 완벽하게 이해하지는 못했다.
그냥 저런식으로 작동하는구나... 화살표함수 편해보인다...
하지만 막상 직접 코드 써내려가려하면 편해보여도 손가락이 안떨어짐
열심히 해야게따 ㄹㅇ 스터디 공부한 내용도 블로그에 올려야지올려야지
하다가 이제 올린다 화이팅오예
다른 분들이 한 정리:
