패스트캠퍼스 메가바이트스쿨 Day 11 (3주차 월요일 - Javascript 1. 기초)

ctaaag·2022년 4월 25일

패스트캠퍼스 메가바이트스쿨 프론트엔드

목록 보기

13/41

Today Topic : Javascript 1. 기초

🗝 Keywords

✅ 표기법

✅ 데이터 종류

✅ 데이터 선언

✅ 연산자

✅ 조건문

✅ 반복문

✅ 함수

1. 표기법

🚀 표기법

dash-case(kebab-case)

snake_case

camelCase

PascalCase

Zero-based Numbering

대부분의 경우 자바스크립트에서는 camelCase를 사용함. PascalCase는 new 함수에 대해서 붙임

dash-case, snake_case는 html과 css에서 주로 사용함

자바스크립트에서 숫자는 0부터 시작함.

2. 데이터 종류

let myName = "ctaaag"
let email = 'ctaaag@gmail.com'
let hello = `Hello ${myName}?!`

🚀 원시 데이터 (단일 데이터)
원시 데이터란, copy by value 즉 값 자체가 복사되어 할당되어지는 데이터이다.

문자 데이터 : 쌍따옴표, 따옴표, 백틱기호를 활용해서 데이터를 입력할 수 있음. 백틱을 이용해서 템플릿 리터럴을 사용할 수도 있음.

숫자 데이터 : 숫자데이터는 따옴표 없이 작성함

불리안 : true or false를 통해서 나타냄

null&undefined : null은 없는 상태. undefined는 값이 있는지 없는지 모르는 상태

🚀 객체 데이터 (복합 데이터)
객체 데이터란, copy by Reference로 참조값. 즉 데이터 주소값이 할당되는 개념

Object(객체) : {key:value} 형태로 데이터를 저장하며 여러가지 정보를 담을 수 있음.

Array(배열) : 여러데이터를 key값을 0부터 순차적으로 저장하는 객체

function(함수) :

3. 데이터 선언

🚀 데이터 선언 종류

var : 재선언 o, 재할당 o

let : 재선언 x, 재할당 o

const : 재선언 x, 재할당 x

var a = 1
if (true) {
  var a=5
  }
console.log(a) // output:5

🚀 왜 var은 가급적 사용하면 안될까?

var은 변수가 중복 선언이 가능해진다. 따라서 위의 코드에서 a를 출력하면 5가 나온다.

var은 함수 내부에서 선언이 되었을 때 지역 스코프를 만들기 때문에(함수레벨 스코프) 중복으로 선언이 가능해지며, 이는 혼란을 야기할 수 있음.

반면 let, const는 함수레벨 스코프가 아니기 때문에 변수 중복 선언이 불가함. let은 재할당이 가능하며, const는 재할당도 안된다.

재선언은 변수 자체를 다시 선언한다는 것이고, 재할당은 선언된 변수의 value를 바꾼다는 것.

🚀 예약어

자바스크립트 내부에서 이미 특별한 의미를 갖고 있어서 변수명으로 선언할 수 없는 것들

this, if, break 등이 존재함.

4. 연산자

let text = '두개의' + '문자들';
text = '1' + 1; // 숫자와 문자열을 더하면 문자열로 변환됨
console.log(text);

let a = 5;
a = -a; // -1 * 5
console.log(a);
console.log(-a);
console.log(!a);
console.log(!!a);

let a = 1;
a = a+2;
console.log(a);
a += 2; // a = a + 2 ; 축약버전
console.log(a)
a -= 2;
console.log(a);
a *= 2;
console.log(a);
a /= 2;
console.log(a);
a %= 2;
console.log(a);
a **= 2;
console.log(a);

let a = 0;
console.log(a);
a++; // a = a + 1;
console.log(a);
a--; // a = a - 1;
console.log(a);
a = 0;
console.log(a++); // 0이 출력
console.log(a); // 1이 출력
console.log(++a); // 2가 출력


console.log (2 > 3);
console.log (2 < 3);
console.log (2 >= 3);
console.log (2 <= 3);


console.log(2 == 2);
console.log(2 != 2);
console.log(2 != 3);
console.log(2 == 3);
console.log(2 == '2');
console.log(2 === '2'); // 코딩은 정교해야하므로 타입도 함께 확인해주는 것이 좋음
console.log(2 == '1'+1);
console.log(2 == 1+1);
console.log(true == 1);
console.log(true === 1);

const obj1 = {
    name : 'js',
};
const obj2 = {
    name : 'js'
};
console.log(obj1 == obj2); // 객체는 다른 메모리주소를 갖고 있기 때문에 false
console.log(obj1 === obj2);
console.log(obj1.name == obj2.name);
console.log(obj1.name === obj2.name);
let obj3 = obj2;
console.log(obj3 == obj2);
console.log(obj3 === obj2);

🚀 산술 연산자

+, -, *, /, %(나머지값), **(제곱)을 나타내는 연산자가 있음.

연산할 때 문자열도 더할 수 있음. 숫자와 문자열을 더하면 자동으로 문자열로 반환이 되어서 위의 값은 11로 나오게 됨.

🚀 단항 연산자

할당된 변수에 +(양수),-(음수),!(부정)이 가능함.

!!부정을 두 번하면 해당 값의 boolean을 알 수 있음. 왜? 부정을 하면 해당 값을 부정하는 boolean이 나오고 다시 한 번 부정을 하면 해당 값의 boolean을 알 수 있는 것.

🚀 할당 연산자

할당된 변수 자체를 연산하면서 동시에 축약해서 사용가능함. a=a+2는 a+=2로 축약할 수 있음.

🚀 증가/감소 연산자

a = a+1은 a++로 줄일 수 있음. 마찬가지로 a--는 a-1을 의미함.

단, a++는 필요한 연산을 하고, 그 뒤에 값을 증가시키는데 ++a는 값을 먼저 증가시킨 뒤에 필요한 연산을 실행함.

🚀비교연산자

<, >, >=, <= 를 통해서 변수가 가진 value를 비교할 수 있음.

🚀 동등 비교 관계 연산자

==는 value값만 같다면 true이고, === value와 type 값이 모두 같아야 true로 반환이 된다.

🚀 논리연산자

&&는 and의 의미(두개 값 모두 충족)를, ||는 or의 의미(두 개 중 한개만 충족)를, !부정, !!불리언값으로 변환함

5. 조건문

if(조건) { }
if(조건) { } else { }
if(조건1) { } else if (조건 2) { } else { }

조건식 ? 참인경우 : 거짓인경우 // 삼항연산자로 줄일 수 있음
fruit === 'apple' ? console.log('apple') : console.log('banana')

let condition = 'okay' // okay, good -> 좋음!, bad -> 나쁨!
let feeling ;
switch (condition) {
    case 'okay':
    case 'good':
        feeling = '좋음!';
        break;
    case 'bad':
        feeling = '나쁨!'
        break;
}
console.log(feeling);

🚀 조건문

조건에 해당되는 값이 true,false 여부에 따라서 출력하는 값이 다름

삼항연산자로 축약해서 표현할 수 있음

특정 조건문이 반복되는 경우에는 원하는 결과값을 선언해놓고 switch, case를 이용하여 각 경우마다 다른 값을 할당해서 조건문의 사용을 줄일 수 있음

6. 반복문

for(변수선언문 ; 조건식; 증감식) {}
// 실행순서 :
// 1. 변수선언문
// 2. 조건식의 값이 참이면 { } 코드블럭을 수행
// 3. 증감식을 수행
// 4. 조건식이 거짓이 될 떄까지 2번과 3번을 반복함

for(let i = 0; i < 5; i++) {
    console.log(i);
} // 0 1 2 3 4 출력

🚀 for 반복문

for문은 변수 선언을 해서 해당 조건에 맞을 때 까지 반복함

for문 안에는 for문이 중첩해서 들어갈 수도 있고, if 조건문이 들어가서 continue 혹은 break를 통해서 명령을 중단하거나, 계속할 수 있음.

while(조건) {} // 조건이 false가 될 때 까지 {}코드를 반복함
let num = 5;
while(num >= 0) {
    console.log(num);
    num--;
}

let isActive = false;
let i = 0;
while(isActive) {
    console.log('아직 살아있다!');
    if (i === 10) {
        break;
    }
    i++;
}


do {
    console.log('do-while 아직 살아있다!')
} while (isActive);

🚀 while 반복문

for문은 증감식이 앞에 붙지만, while은 증감식이 실행코드 안에 들어가게 됨.

while문도 for문과 같이 반복문안에 조건문을 넣어서 반복에 대한 조정을 할 수 있음

do-while은 true or false와 관계없이 do {} 안의 것을 실행한 뒤에 while반복문 실행

7. 함수

function hello(){
  console.log('Hello~');
} // 기명함수 = 함수선언

let world = function () {
  console.log('World~');
} // 익명함수 = 함수표현
hello() // 함수 호출
world() // 함수 호출

function add(num1, num2) {
    const result = num1 + num2;
    return result
}
console.log(add(1,2));

🚀 함수

function 함수명(매개변수,매개변수) {return 값} 매개변수는 변할 수 있는 값. 즉 함수에 대입할 수 있는 변수를 매개변수라고 하고, 인자는 함수를 호출할 때 전달하는 값을 말함.

기명함수(이름이 있는 함수. 함수를 선언한다) vs 익명함수(이름이 없는 함수. 함수를 표현한다)

function print(text) {
    console.log(text)
    //return undefined
}
print(1) // 1이 출력됨
console.log(print(1)); // 1, undefined가 출력됨


function print(num) {
    if(num<0) {
        return; // return undefined; 의 약자
    } console.log(num);
    // return undefined 여전히 숨겨져있음. 따라서 콘솔로그를 하면 undefined가 나옴
}
print(12);
print(-12);

🚀 return

return 값을 명시적으로 하지 않으면 자동으로 undefined이 반환됨.

만약 함수에 조건이 안맞으면 종료하고 싶을때 if(조건){return}을 하게 되면, 함수를 종료함

function add(a,b) {
  console.log(a);
  console.log(b);
  console.log(arguments[0]);
  return a+b
}

function sum(a,b,...numbers) {
    console.log(a);
    console.log(b);
    console.log(numbers);
}
sum(1,2,3,4,5,6,7,8);

🚀 parameter(매개변수)

매개변수의 정보는 함수 내부에서 접근이 가능한 arguments 객체에 저장이 됨. 이때 arguments는 배열 형태

Rest 매개변수는 몇 개의 인자를 받을지 모를 때 나머지 값을 배열로 출력해주는 특징을 갖고 있음

// 함수 선언문 : function name() { }
// 함수 표현식 : const name = function () { }

let add = function (a, b) {
    return a+b ;
};
console.log(add(1,2));

// 화살표 함수 : const name = () => { }

add = (a, b) => {
    return a + b;
};
console.log(add(1,2));

add = (a,b) => a + b; //return값을 중괄호와 return값을 생략하고 이런식으로 줄일 수 있음.
console.log(add(1,2));

//축약형으로 객체 데이터를 반환하고 싶을 때

const double = x => ({name: 'ctaaag'});
console.log(double(2).name);

🚀 화살표함수

익명함수를 사용할 때 특히 변수를 따로 선언하고 해당 변수에 함수값을 넣을 때 화살표함수를 자주 사용함.

화살표함수는 중괄호와 return값을 생략할 수 있음. 단, 객체데이터의 경우 중괄호를 기본으로 갖고 있기 때문에 이를 표현하기 위해서는()로 바깥은 감싸야만 실행이 가능함

// (익명함수)()
// (익명함수())

const a = 7
(function(){
	console.log(a*2)
})();

(function(){
  console.log(a*2)
}());

🚀 즉시실행함수(IIFE)

위와 같이 간단한 함수들은 즉시실행함수를 할 수도 있음. 단 즉시실행함수를 사용할 때는 세미콜론이 없으면 함수가 충돌할 수 있으니까 꼭 세미콜론을 사용할 것.

const add = (a,b) => a+b;
const multiply = (a,b) => a*b;

function calculator(a, b, action) {
    let result = action(a,b);
    console.log(result);
    return result;
}

calculator(1, 2, add);
calculator(1, 2, multiply);
console.log(calculator(1, 2, multiply));

🚀 콜백함수

함수 안에 함수를 넣어 고차함수를 활용할 수 있음. 위의 예시 같이 calculator 함수안에 action이라는 함수를 넣고, 함수값에 action함수를 정의하는 형태로 작성할 수 있음.

콜백함수는 타이머함수(setTimeout)에서도 유용하게 사용됨

ctaaag

프로그래밍으로 지속가능한 세상을 꿈꾸며

이전 포스트

패스트캠퍼스 메가바이트스쿨 Day 10 (2주차 금요일 - 아임웹 웹페이지 클론코딩)

다음 포스트

패스트캠퍼스 메가바이트스쿨 Day 11 (3주차 월요일 - Javascript 1. 기초)

패스트캠퍼스 메가바이트스쿨 프론트엔드

Today Topic : Javascript 1. 기초

🗝 Keywords

1. 표기법

2. 데이터 종류

3. 데이터 선언

4. 연산자

5. 조건문

6. 반복문

7. 함수

패스트캠퍼스 메가바이트스쿨 Day 10 (2주차 금요일 - 아임웹 웹페이지 클론코딩)

패스트캠퍼스 메가바이트스쿨 Day 12 (3주차 화요일 - Javascript 2. 객체,클래스)

0개의 댓글

패스트캠퍼스 메가바이트스쿨 Day 11 (3주차 월요일 - Javascript 1. 기초)

패스트캠퍼스 메가바이트스쿨 프론트엔드

Today Topic : Javascript 1. 기초

🗝 Keywords

1. 표기법

2. 데이터 종류

3. 데이터 선언

4. 연산자

5. 조건문

6. 반복문

7. 함수

패스트캠퍼스 메가바이트스쿨 Day 10 (2주차 금요일 - 아임웹 웹페이지 클론코딩)

패스트캠퍼스 메가바이트스쿨 Day 12 (3주차 화요일 - Javascript 2. 객체,클래스)

0개의 댓글

패스트캠퍼스 메가바이트스쿨 Day 11 (3주차 월요일 - Javascript 1. 기초)

패스트캠퍼스 메가바이트스쿨 Day 12 (3주차 화요일 - Javascript 2. 객체,클래스)