[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고(1) | Javascript

 

1. 이번 목표:
    자바스크립트 배열, 함수, 조건문, 반복문에 대해 알아보자!

 

2. 배운 내용 요약

  1. 표기법

the quick brown fox jumps over the lazy dog을 각 표기법에 맞춰 작성해보자!

• dash-case(kebab-case): the-quick-brown-fox-jumps-over-the-lazy-dog
• snake_case: the_quick_brown_fox_jumps_over_the_lazy_dog
• camelCase: theQuickBrownFoxJumpsOverTheLazyDog
• ParcelCase: TheQuickBrownFoxJumpsOverTheLazyDog

 

  2. Zero-based Numbering

    특수한 경우를 제외하고 0부터 숫자를 시작한다.
    (배열의 첫 번째 요소는 0번 인덱스)

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]);  // apple
console.log(fruits[1]);  // banana
console.log(fruits[2]);  // orange

 

  3. 데이터 종류(자료형)

• String: 문자열
• Number: 숫자
• Boolean: true(참), false(거짓)
• Undefined: 미할당(값이 할당되지 않은 상태)
• Null: 빈 데이터(어떤 값이 의도적으로 비어 있음을 의미)
• Object: 데이터 꾸러미 (ex. let cat = {name: '야옹이', age: 2, isCute: true, mew: function() { return '냐옹'; }, }; -  순서 중요치 않음. key값이 중요.
• Array: 배열 (ex. let fruits = ['orange', 'apple', banana];) - 순서가 있다.

  => console.log(typeof 3) -> number   // typeof로 어떤 자료형인지 알 수 있다.

 

 

  3-1. 명시적 형변환 

// 문자 데이터로 변환
let num = 132;
num = String(num);

// 숫자 데이터로 변환
num = Number(num);

// 숫자가 아닌 문자 데이터를 숫자로 변환하면 NaN(Not a Number)가 뜬다.
console.log(Number('abcd'));

 

 

  4. 변수

    4-1. var: 재할당, 재선언 모두 가능. 하지만 협업과 유지보수에 힘들다.

var name = '홍길동';
name = 'gildong'; // 재할당
var name = '이몽룡'; // 재선언

 

    4-2. let: 재할당 가능, 재선언 불가능. 

// 선언과 초기화를 동시에 하지 않아도 된다. 
let c;
console.log(c); // undefined
c = 1; // 초기화
c = 10; // 재할당

 

 

    4-3. const: 재할당, 재선언 불가능

// 선언과초기화가 동시에 이루어져야 한다.
const b = 3;

 

 

  5. 연산자

    5-1. 비교 연산자

==   /   !=  : 값이 같거나 다른지 true / faulse의 결과값을 낸다.
===   /   !==  : 값과 데이터 형식이 모두 같은지 true / false의 결과값을 낸다.
>   /   >=   /   <   /   <=  : 크기 비교

 

 

    5-2. 산술 연산자

+  ,   -   ,   *   ,   /  ,   ** (제곱)  ,   % (나머지)  

 

   

    5-3. 논리 연산자

!  :  NOT(true->false, false->true)
&&  :  AND
||  : OR

console.log("0" == false); // true
console.log("0" == 0); // true
console.log("" == 0); // true
console.log(undefined == null); // true
console.log(0 == false); // true

console.log("" == "0"); // false
console.log(false == undefined); // false
console.log(false == null); // false

console.log("0" === false); // false
console.log("0" === 0); // false
console.log("" === 0); // false
console.log(undefined === null); // false
console.log(0 === false); // false

 

 

  6. 함수(function): 특정 기능을 수행하는 일부 코드의 집합

    6-1. 함수 선언문

function sayHello() {
    console.log("Hello");
}

// 함수가 선언 된 이후 부터 호출 가능
sayHello();

 

    6-2. 함수 표현식: 변수 선언 후 함수 할당 

/**
* 호이스팅이란?
* 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상.
* 코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 
* 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작.
*/

// 함수 선언문은 호이스팅이 되므로 어디서든 호출 가능
sayHello();

let sayHello = function() {
	console.log('Hello');
}

sayHello();

 

    6-3. 화살표 함수

// 함수의 축약법.

// 기존
let add = function(num1, num2) {
	return num1 + num2;
}

// 화살표 함수로 나타내면
let add = (num1, num2) => {
	return num1 + num2;
}

let showErr = () => {
	alert('error!');
}

console.log showErr();

 

 

 

  7. 조건문과 반복문

    7-1. 조건문

특정 조건일 때만 구문 실행
종류: - if문  /  삼항 연산자  /  switch문
break: 멈추고 빠져 나옴.
continue: 멈추고 다음 반복으로 진행.

 

    - if문 (조건은 true, false로 결과가 나와야 한다.)

if(a > 10) {
	a > 10을 만족할때 실행할 문장 
}

// else: 조건이 참이 아닌 경우
if(a > 10) {
    // a > 10을 만족할때 실행할 문장
} else {
	// a > 10이 아닌 경우 실행할 문장
}

// else if: 조건을 여러개로 나누는 경우
if(a > 10) {
	// a > 10을 만족할때 실행할 문장
} else if(a > 5) {
	// 5 < a <= 10을 만족할때 실행할 문장
} else {
	// a < 5인 경우 실행할 문장
}


// if의 중첩
if(a > 10) {
	if(a > 15) {
    	console.log('a는 15 초과');
    } else {
    	console.log('a는 10 초과 15 이하');
    }
}

 

    - switch문 (소괄호 안에는 true, false로 값이 나오는 조건이 아닌 변수 사용)

switch (a) {
	case 1:
    	console.log('a = 1');
    	// break를 쓰지 않으면 다음 case까지 진행된다.
    	break;
    case 2:
    	console.log('a = 2');
        break;
    // case 1, 2에 해당하지 않을 경우 실행
    default:
    	console.log('a != 1 && a!= 2');
        break;
}

 

    - 삼항연산자 (조건 ? 참 : 거짓)

let name = '길동';

if(name === '길동') {
	console.log('일치');
} else {
	console.log('불일치');
}

// 위의 조건문을 한 줄로 표현.
name === '길동' ? console.log('일치') : console.log('불일치');

 

    7-2. 반복문

특정 코드를 어떤 조건까지 반복.
종류 - for문, while문

 

    - for문 (for(초기화식; 조건식; 증감식) 

for (let i = 0; i <10; i++) {
	console.log(i + '번째 인사를 드립니다!');
}

 

    - while문 (조건이 참일 때 실행. 무한루프에 빠지지 않도록 조심!)

let index = 0;
while(index < 10) {
	console.log('인사를 ' + index + '번째 드립니다!);
	index++;
}

// 무한루프 빠지지 않도록 조심!
let index2 = 0;
while(true) {
	console.log('인사를 ' + index2 + '번 오지게 박습니다!);
    index2++;
    if(index2 === 10) {
    	break;
    }
}

 

 

 

 

3. 회고

드디어 내가 제일 좋아하는 JavaScript를 배우는 시간이 왔다!

하지만 배운지 시간이 많이 지나서인지 변수 var는 구식이라 사용하면 좋지 못하다는 걸 알았지만 let과 const의 차이를 제대로 설명하기가 조금 어려웠다. 그래도 강의 덕분에 까먹고 있던 지식을 다시 재정립 할 수 있는 시간이 되었다. 물론 HTML과 CSS도 직관적으로 확인할 수 있어 지루함이 없었지만 JS만큼 여러 내장 메소드와 객체를 써서 나만의 코드를 작성하는 것은 또 다른 big 재미인 것 같다.

강사님이 무한 루프에 빠지는 경우에 대해 예시로 보여주시려고 했다가 브라우저 창이 제대로 닫히지 않는 일이 발생했는데 그 상황도 유쾌하게 예시를 잘 보여주셔서 오늘은 나도 모르게 육성으로 웃음이 나왔다.

앞으로 JS를 다 배우고 난 뒤 JQuery와 Bootstrap을 배우게 될텐데 부트스트랩은 많이 사용해서 자신이 있지만 JQuery는 기억이 가물가물해서 새롭게 배우는 의미로 JQuery 강의가 너무 기대된다.

앞으로는 정말 체력 관리, 멘탈 관리 잘 해서 강의 빠지지 않도록 내 자신을 채찍질 하고 응원해 줘야겠다. 요즘 아침이 많이 추워져서 이불 밖으로 나오는 과정이 힘들지만 그래도 참고 학원에 나오면 수업이 재미있고, 수업이 끝난 후 내 자신이 한층 더 이뻐보이고 뿌듯한 감정이 드는데, 그게 또 묘미인 것 같다! 앞으로도 화이팅 해야지!