1. 자바스크립트 (JavaScript) 란?
객체 기반의 스크립트 프로그래밍 언어이다.
주로 웹 브라우저 내에서 주로 사용하고, 웹의 동작을 구현할 수 있다.
다른 응용 프로그래밍의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
또한, Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용된다.
2. 자바스크립트의 특징?
1. 모든 웹 브라우저에서 작동한다.
2. 자바스크립트는 동적이며, 자료형을 명시할 필요가 없는 인터프리터 언어이다.
3. 객체 지향형 프로그래밍과 함수형 프로그래밍 모두 가능하다.
3. 자바와 자바스크립트의 차이점
자바
1. 클래스 기반의 객체지향 언어이다.
2. 객체는 클래스 계층구조를 통해 상속과 함께 클래스와 인스턴스로 나뉜다.
3. 클래스와 인스턴스는 동적으로 추가된 속성, 메서드를 가질 수 없다.
4. 변수 자료형이 반드시 선언되어야 한다.
5. 컴파일 언어이다: 소스코드에서 컴파일이라는 과정을 통해 목적코드로 옮긴다.
자바스크립트
1. 프로토타입 기반의 객체지향 언어이다. (클래스 기반이 아니지만, ES6부터 class 문법이 추가되었다)
2. 속성, 메서드는 객체에 상관없이 동적으로 추가될 수 있다. (상속기능이 없지만, 프로토타입을 기반으로 구현은 가능하다)
3. 인터프리터 언어이다: 소스코드를 목적코드로 옮기는 과정 없이 실행 중 번역된다.
**프로토타입
참고링크
4. 자바스크립트의 자료형과 변수
자바스크립트에서는 변수 선언 시, 미리 자료형을 지정하지 않는다.
변수에 값을 할당할 때 값에 따라 자료형이 지정된다. ( => 느슨한 자료형 체크)
| 기본형 | number(숫자형), string(문자열), boolean(논리형), undefined, null |
| 복합형 | array(배열), object(객체) |
4-1. 자료형: undefined와 null
var first; //undefined var second = 10; //number second = null; //null
var first; //undefined
var second = 10; //number
second = null; //null(1) undefined
처음부터 변수에 값이 할당되지 않은 경우
(2) null
처음에 할당한 값이 더는 유효하지 않은 경우
4-2. Array 객체와 관련된 함수
4-3. 예약어 중 ES6 문법 추가된 부분
//var 사용예시 var value = 'hi'; //hi var value = 'hello'; //hello //let 사용예시 let value = 'hi'; //hi value = 'hello'; //hello let value = 'nice to meet you'; //syntax error //const 사용예시 const value = 'hi'; //hi value = 'hello'; //syntax error cosnt value = 'nice to meet you'; //syntax error
//var 사용예시
var value = 'hi'; //hi
var value = 'hello'; //hello
//let 사용예시
let value = 'hi'; //hi
value = 'hello'; //hello
let value = 'nice to meet you'; //syntax error
//const 사용예시
const value = 'hi'; //hi
value = 'hello'; //syntax error
cosnt value = 'nice to meet you'; //syntax error(1) 이전
var: 변수 재선언이 가능하다는 단점이 있음.
(2) ES6 (var의 단점 보완)
let: 변수 재선언불가, 변수에 값 재할당 가능.
const: 변수 재선언불가, 변수에 값 재할당 불가.
* 변수 선언에 기본적으로 const를 사용하고, 재할당이 필요한 경우 let을 사용하는 것이 안전하다.
4-4. 변수
var globalVar = 100; //전역변수 선언 var localVar = 100; //전역변수 선언 test(); function test(){ globalVar = 50; //전역변수 값 재할당 var localVar = 50; //지역변수 선언: test()밖의 전역변수 localVar에 영향을 주지 않음 if( localVar != null){ let blockVar = "here is in block"; //블록변수 선언 } console.log(globalVar); //50 console.log(localVar); //50 console.log(blockVar); //error }
var globalVar = 100; //전역변수 선언
var localVar = 100; //전역변수 선언
test();
function test(){
globalVar = 50; //전역변수 값 재할당
var localVar = 50; //지역변수 선언: test()밖의 전역변수 localVar에 영향을 주지 않음
if( localVar != null){
let blockVar = "here is in block"; //블록변수 선언
}
console.log(globalVar); //50
console.log(localVar); //50
console.log(blockVar); //error
}(1) 지역 변수
함수 안에서 선언하고 함수 안에서만 사용하는 변수.
(2) 전역 변수
스크립트 소스 전체에서 사용할 수 있는 변수.
<script> </script> 사이에서 자유롭게 사용할 수 있는 변수를 뜻한다.
(3) ES6) 블록 변수
"변수를 선언한 블록 ({ } 내) 에서만 유효하고, 블록을 벗어나면 사용할 수 없는 변수.
5. 연산자, 반복문, 조건문에서 추가로 알아야 할 점
(1) 비교연산자
10 == "10" //true
10 === "10" //false
10 == "10" //true
10 === "10" //false== 연산자: 자동으로 자료형을 변환하여 비교한다.
=== 연산자: 두 자료형의 변환을 허용하지 않는다.
(2) ES6) for ... of 문
let datas = ["a","b","c","d"]; for (let value of datas) console.log(value); //a b c d
let datas = ["a","b","c","d"];
for (let value of datas)
console.log(value); //a b c d여러 값을 차례로 순회할 때 인덱스 값이 필요 없는 경우 사용한다.
6. 함수 function() 작성법
(1) 기본 작성법 - 함수 선언과 실행
//함수선언 function addNumber (a,b) { var sum = a + b; console.log(sum); } //함수실행 addNumber(10,5);
//함수선언
function addNumber (a,b) {
var sum = a + b;
console.log(sum);
}
//함수실행
addNumber(10,5);
* 함수 표현식
//익명함수 예시 var addNum = function (a,b) { return a+b; } var sum = addNum(10,20); console.log(sum); //30
//익명함수 예시
var addNum = function (a,b) {
return a+b;
}
var sum = addNum(10,20);
console.log(sum); //30
(2) 익명 함수
이름이 없는 함수를 말한다.
함수 자체가 식이기 때문에 변수에 할당할 수 있고, 다른 함수의 매개변수로 사용할 수 있다.
함수 선언 후 변수에 할당하여 사용하고, 변수 addNum을 함수 이름처럼 사용하여 익명 함수를 실행한다.
//즉시 실행 함수 예시 var result = (function (a,b) { return a+b; }(10,20)); console.log(result); //30
//즉시 실행 함수 예시
var result = (function (a,b) {
return a+b;
}(10,20));
console.log(result); //30(3) 즉시 실행 함수
함수를 정의함과 동시에 실행하는 함수이다.
소스 끝에 세미콜론을 붙인다.
* ES6
//매개변수가 없는 경우 let hi = () => "안녕하세요"; hi(); //"안녕하세요" //매개변수가 1개인 경우 let greet = name => `${name}님, 안녕하세요`; greet("가은"); //"가은님, 안녕하세요" //매개변수가 2개이상인 경우 let add = (a,b) => a + b; add(10,20); //30
//매개변수가 없는 경우
let hi = () => "안녕하세요";
hi(); //"안녕하세요"
//매개변수가 1개인 경우
let greet = name => `${name}님, 안녕하세요`;
greet("가은"); //"가은님, 안녕하세요"
//매개변수가 2개이상인 경우
let add = (a,b) => a + b;
add(10,20); //30
(4) 함수의 화살표 표기법
이름 없는 함수를 변수에 지정할 때 많이 사용한다.
function 예약어를 사용하지 않는다.
- 매개변수가 없는 경우, ()만 사용한다.
- 매개변수가 1개인 경우, 괄호 없이 매개 변수만 작성 가능하다.
- 매개변수가 2개 이상인 경우, 기존과 동일하다.
소스 끝에 세미콜론을 붙인다.
'Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 전개 연산자 (스프레드 연산자) (0) | 2022.05.01 |
|---|