화살표 함수
function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현하여 함수를 선언할 수 있다.
화살표 함수는 항상 익명 함수이다.
const 함수명 = (매개변수1, 매개변수2, .... ) => {
실행할 내용
...
};- 매개변수가 없는 함수
const 함수명 = () => console.log('Hello')- 매개변수가 있는 함수
const 함수명 = x => console.log(x);
const 함수명 = (x, y) => console.log(x, y);아래와 같이 if문에도 함수 사용이 가능하다.
let num = Number(prompt('정수를 입력하세요'));
let doing = null;
if(num > 0){
doing = () => alert('양수입니다.')
}else if(num < 0){
doing = () => alert('음수입니다.')
}else{
doing = () => alert('0입니다.')
}
doing();변수
자바스크립트에서는 객체, 함수가 모두 변수에 담길 수 있다.
변수의 범위는 해당 병수에 접근할 수 있는 영역이다.
지역 변수
함수 내부에서 선언된 변수, { }영역 내부에 선언된 변수,
지역변수는 변수가 선언된 영역 내에서 유효하고 그 영역을 벗어나게 되면 메모리에서 사라진다.
funtion f1(){
let data = 10;
}
console.log(data) // undefined
(바디 밖에서는 바디 안에 선언된 변수를 활용 못함.)
if(조건식){
let data2 = 20;
}
console.log(data2) // undefined
전역 변수
함수 외부에서 선언된 변수
전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며 웹 페이지가 닫혀야만 메모리에서 사라진다.
let data = 10;
function f1(){
console.log(data) // 10;
}
console.log(data) // 10;추가 설명
변수는 다음과 같이 생명주기를 같는다.
생성 >>> 초기화 >>> 사용
let num2 = 100;
function f2(){
// num2는 지역변수를 먼저 찾고 생성되고 초기화 되지 않았기에 오류.
console.log(num2)
//호이스팅으로 num2 변수 생성
let num2 = 200;
}
f2();따라서 지역변수를 선언할때는 함수 내부의 가장 위에 쓰는게 안정적이다.
변수의 예시
let num1 = 10;
function f1(){
console.log(num1); //10
num1 = 20;
}
f1();
console.log(num1); // 20
//////////////////////
let num2 = 100;
function f2(){
let num2 = 200;
console.log(num2) //200
}
f2();
console.log(num2) //100
var num3 = 1000;
if(num3 === 1000){
num3 = 2000;
console.log('if 문 내부에서 출력한 num3', num3) // 2000
}
console.log('if문 들어갔다가 나온 num3', num3) //2000
var num4 = 10000;
if(num4 === 10000){
var num4 = 20000; // var는 새로운 선언을 하더라도 지역변수로 선언 X (함수 영역에서는 지역변수로 선언됨 ㅋㅋㅋ)
console.log(num4)
}
console.log(num4)
let num5 = 100000;
if(num5 === 100000){
let num5 = 200000;
console.log(num5) // 지역 변수 사용. 20000
}
console.log(num5); // 전역 변수 사용. 10000
객체(Object)
하나하나의 구체적인 대상을 객체라고 부른다.
여러 변수와 메소드들을 통합적으로 가지고 있다
- 변수 : 객체가 가져야할 속성, 성질, 데이터 저장
- 메소드 : 객체가 해야할 행위, 기능 저장
프로퍼티(property)
객체 내의 변수 또는 함수
변수 -> 프로퍼티
함수 -> 프로퍼티 메소드
객체의 선언
리터럴 표기법
const 객체명 = {} // 빈 객체
const 객체명 = {
프로퍼티1 : 값1,
프로퍼티2 : 값2,
프로퍼티3 : 값3,
프로퍼티4 : 값4,
...
메소드명 : function(){
수행할 문장
},
...
}const mycar = {
brand : 'Ferrari',
color : 'red',
price : 65000,
// 객체는 아래와 같이 함수도 만들 수 있다.
//함수를 만들때는 익명함수로 리터럴 표기법을 따른다.
enginStart: function(){
console.log(this.brand + "시동 켜기");
},
enginStop: function(){
console.log(this.brand + "시동 끄기")
}
}
mycar.enginStop()
mycar.price = 55000;
console.log(mycar.price);
//객체의 내용이 수정됨
//const로 선언했는데 왜 수정이 가능할까? 아래의 설명 참고
console.log(mycar);
let data1 = 10;
let data2 = data1;
data2 += 5;
//data1과 data2는 별개의 값을 가지고 있음으로 data1은 10이다.
console.log(data1)
//하지만 객체로 만들면 실제 값이 아닌 주소값을 참조한다.
let obj1 = {data : 10};
//같은 주소값을 참조하고 있기때문에
let obj2 = obj1;
//obj2에서 data를 수정하면
obj2.data += 5;
//obj1에서도 참조된 값이 바뀌는 것이다.
console.log(obj1.data)
mycar는 실제로는 주소값을 할당 받은 것임으로 주소값의 내용은 수정이 가능하다.
생성자를 이용한 객체 생성
new 연산자를 사용하여 객체를 생성하고 초기화 할 수 있다.
생성자는 메소드이며, 이 메소드는 새롭게 생성되는 객체를 초기화 하는 역할을 한다.
똑같은 형태의 객체를 여러개 만들때 편하게 만들 수 있다.
function 생성자명(매개변수1, 매개변수2 ...){
this.프로퍼티1 = 매개변수값;
this.프로퍼티2 = 매개변수값;
....
}
const 객체명 = new 생성자명(값1, 값2,....); //새로운 주소값을 가진 객체를 만듬리터럴 표기법과 달리 생성자를 활용하면 '='연산자로 표현해야 한다.
//리터럴 표기법으로 객체를 생성할 시 객체 하나를 아주 빠르게 만들 수 있다. 하지만 여러개의 객체를 만드는 경우에는 반복작업으로 인해 힘들어진다.
function Car(brand, color, price){
//this는 특정 객체를 만들 때 상위연산자를 말한다.
this.brand = brand;
this.color = color;
this.price = price;
//객체를 만들때처럼 동일하게 함수를 사용 할 수 있다.
this.enginStrart = function(){
console.log(this.brand + "시동켜기")
}
this.enginStop = () => console.log(this.brand + "시동끄기")
}
//초기화 하여 momcar로 사용 가능하다.
const momcar = new Car("Ferrari","Red",65000);
const mycar = new Car("bently","black",55000);
mycar.enginStop()
momcar.enginStrart()클래스를 이용한 객체 생성
클래스를 활용하면 생성자와 달리 class 예약어를 활용하며 constructor에 매개변수를 담아 매개변수들을 통해 프로퍼티와 프로퍼티 메소드를 만든다.
class 클래스명 {
constructor(매개변수1, 매개변수2, ...){
this.프로퍼티1 = 매개변수 값;
this.프로퍼티2 = 매개변수 값;
...
}
메소드명(매개변수1, 매개변수2, ...){
수행할 문장
...
}
...
}
const 클래스명 = class {
constructor(매개변수1, 매개변수2, ...){
this.프로퍼티1 = 매개변수 값;
this.프로퍼티2 = 매개변수 값;
...
}
메소드명(매개변수1, 매개변수2, ...){
수행할 문장
...
}
...
}class Car{
//constructor로 매개변수를 만든다.
constructor(brand, color, price) {
//프로퍼티를 생성하고 매개변수 값을 담는다.
//this.은 프로퍼티의 부모를 말한다. momcar로 초기화 시 momcar를 의미한다.
this.brand = brand;
this.color = color;
this.price = price;
//익명함수로 생성할 수도 있고
this.engineStart = function(){
console.log(this.brand + "시동 켜기")
}
}
//기명함수로 생성할 수도있다.
engineStop(){
console.log(this.brand + "시동 끄기")
}
}
//mycar로 초기화 한다. 초기화 시는 생성자와 사용법이 동일하다.
const mycar = new Car('Ferrai', 'Red', 650000);
mycar.engineStart();
console.log(mycar);
AllTimeDevelop