[멋사] 1주차 과제 (자바스크립트 필수개념)

[주어진 과제]

• 자바스크립트란?
• js 타입 (Primitive Type(number, string, boolean, ...) / Object / Array)
• 변수, 상수 선언 방법 (var, let, const)
• 기본 조건 문법 (if, switch)
• 기본 반복문 ( for / for..of / for..in / while)
• 기본 함수 선언 (function / arrowFunction)
• 주석
• == 비교와 === 비교의 차이점

1. 자바스크립트(Javascript)란?

• 자바스크립트는 웹사이트에 움직이는 효과를 줄 때 사용하는 언어로 현재 서버나 웹에서 작동하는 프로그램을 만드는 등 웹의 모든 부분을 다룰 수 있는 핵심 언어로 사용되고 있다.
• 객체 기반의 스크립트 언어로, 객체지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

2. 자바스크립트 타입 (Javascript Type)

2-1. 원시 타입(Primitive Type) - 변경 불가능한 값

(1) Number (숫자형)

• 자바스크립트에서는 정수나 실수의 구분 없이 단 하나의 숫자 타입만 존재한다.
• 모든 숫자를 실수로 처리하기 때문에 부등소수점에 대한 오류가 발생할 수 있다.

var num = 9/2;
console.log(num); // 4.5

(2) String (문자형)

• 작은따옴표('')나 큰따옴표("")로 묶은 데이터로, 텍스트 데이터 나타낼 때 사용한다.
• 큰따옴표로 묶은 문자열 안에 또 다른 문자열을 넣으려면 작은 따옴표로 묶는다.

var str = 'likelion';
console.log(str); // likelion

document.write("<span style='color:orange'>","Likelion","</span>")

(3) Boolean (논리형)

• 어떤 조건이 맞으면 참(true), 맞지 않으면 거짓(false)의 결과값을 표현한다.

>> 100 < 10
false
>> 100 > 10
true

(4) Null

• 명시적으로 값이 비어있음을 나타내는데 사용한다.
• null 값을 할당한 변수의 데이터 타입은 object로 출력된다.

var tmp;
console.log(typeof tmp); // object
console.log(tmp); // null

(5) Undefined

• 값이 할당되지 않은 상태를 나타낸다.
• undifined는 타입이면서 값을 나타낸다.

var tmp;
console.log(typeof tmp); // undefined
console.log(tmp); // undefined

2-2. 객체 타입(object)

• 원시 타입(Primitive Type)을 제외한 모든 값은 객체로 취급한다.
• 주로 key-value 쌍의 데이터를 저장하며, 하나의 값만 저장되는 원시타입과 다르게 여러 개의 프로퍼티를 저장할 수 있다.

var obj = {
  name: 'likelion',
  age: 11,
  passed: true, 
};
console.log(obj.name, ojb.age, obj.passed); // likelion 11 true
  

2-3. 배열 타입(array)

• 배열명["값1", "값2", ...] 형태로, 하나의 변수에 여러 개의 값을 저장한다.

var season = ["봄", "여름", "가을", "겨울"];

3. 변수, 상수 선언 (var, let, const)

3-1. 변수와 상수

• 변수란 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 말한다.
• 반면에 상수는 값을 한 번 지정하면 바뀌지 않는 데이터를 말한다.

  나이 = 올해연도 - 태어난연도 + 1
  변수: 나이, 올해연도, 태어난연도 / 상수: 1

3-2. 변수 선언

(1) var: 중복 선언 가능

var name = 'readysetq';
console.log(name); //readysetq

var name = 'likelion';
console.log(name); //likelion

• var로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하다. 이와 같은 경우에는, 마지막에 할당된 값이 변수에 저장된다.
• 이는 변수를 유연하게 사용할 수 있다는 장점이 될 수도 있지만, 코드량이 많아질 경우 같은 이름의 변수명이 여러 번 선언된다면 파악하기 어렵다는 단점이 있다.

(2) let: 중복 선언 불가능, 재할당 가능

var name = 'readysetq';
console.log(name); // readysetq

var name = 'likelion';
console.log(name);
// Uncaught SyntaxError: Indentifier 'name' has already been declared

name = 'javascript';
console.log(name); // javascript

• let은 중복 선언을 했을 때, 해당 변수가 이미 선언되었다는 에러메시지를 출력한다.
• name = 'javascript'와 같이 다른 값을 재할당하는 것은 가능하다.

(3) const: 중복 선언 불가능, 재할당 불가능

const name = 'readysetq';
console.log(name); //readysetq

const name = 'likelion';
console.log(name);
// Uncaught SyntaxError: Indentifier 'name' has already been declared

name = 'javascript';
console.log(name);
// Uncaught TypeError: Assignment to constant variable.

• const는 중복 선언과 재할당 모두 불가능하며, 에러메시지를 출력한다.
• const는 상수 constant에서 따와 상수를 뜻하기 때문에 한 번만 선언이 가능하며, 값을 바꿀 수 없다.

-> const를 기본으로 사용하여 불필요한 변수의 재사용을 방지하고, 재할당이 필요한 경우 let을 사용하는 게 좋다.
(객체를 재할당하는 경우는 생각보다 흔하지 않다.)

4. 기본 조건 문법 (if, switch)

4-1. if/if else/if else if 조건문

• 특정 조건 만족 시 어떤 작업을 수행하고 싶을 때 사용한다.

if (조건1) {
  명령1
}

-> 조건1을 만족하면 명령1을 실행한다.

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

-> 조건1을 만족하면 명령1을 실행하고, 만족하지 않으면 명령2를 실행한다.

if (조건1) {
  명령1
} else if (조건2) {
  명령2
} else {
  명령3
}

-> 조건1을 만족하면 명령1을 실행하고, 조건2를 만족하면 명령2를 실행하고, 둘 다 만족하지 않으면 명령3을 실행한다.

4-2. switch 조건문

• 어떤 값을 가진 대상을 두고 조건 값과 일치하는지를 확인하고 동작을 수행하는 방식이다.

switch(값) {
  case 값1: 명령1
  	break
  case 값2: 명령2
  	break
  case 값3: 명령3
  	break
  ...
  default: 명령n
}

-> swtich의 값(변수)과 case의 값(상수)을 일대일로 비교하여 일치할 경우에 명령을 실행한 뒤 break로 인해 swtich문을 완전히 빠져나온다.
-> 일치하지 않는 경우에는 다음 case문으로 넘어간다.

5. 기본 반복문 (for / for..of / for..in / while)

5-1. for문

• 초기식, 표현식, 증감식으로 구성된다.
• 일정하게 값이 커지면서 명령을 반복하여 실행할 때 사용한다.

for(초기식; 조건식; 증감식;) {
  명령;
}

for(let i=1; i<=10; i++) {
  console.log('멋쟁이 사자처럼'); // 10번 출력된다..
}

5-2. for..of문

• 배열을 순환할 때 사용한다.

for arr = [1, 2, 3];

for(var item of arr) {
  console.log(item); // 1, 2, 3
}

5-3. for..in문

• 객체를 순환할 때 사용한다.

var obj = {
  a: 1,
  b: 2,
  c: 3
};

for(var item in obj) {
  console.log(item); // a, b, c

5-4. while문

• while문의 조건이 참이면 while문 속의 명령을, 거짓이라면 while문을 벗어나 다음 명령을 실행한다.

while(조건) {
  명령;
}

var count = 0;

while(count < 10) {
  console.log(count++); // 0부터 1씩 더하며 9까지 출력된다..
}

-> 0부터 9까지 출력한다. count=10이 되는 순간 조건식은 거짓이므로 while문을 벗어난다.

6. 함수 선언(Function, arrow Function)

6-1. 함수 선언과 호출 (function)

• 동작해야 할 목적대로 묶은 명령을 함수(function)라고 한다.
• 자바스크립트에 들어 있는 함수를 가져다 사용하거나, 자신이 필요한 명령을 직접 함수로 만들어서 사용한다.

function 함수명() {
  명령;
}

• 선언한 함수를 사용하려면 해당 함수 이름을 호출해서 사용한다.

함수명();
//또는
함수명(변수);

function foo() {
  return "이것은 함수이다.";
}

foo(); //"이것은 함수이다."

6-2. 화살표 함수(arrow function)

• 일반 function 보다 간단히 함수를 표현할 수 있다.
• 기존의 함수 표현식에서 function 키워드를 삭제하고, 매개변수의 괄호()와 코드블록{} 사이에 화살표=> 를 넣어주면 화살표 함수(Arrow Function)로 바꿀 수 있다.

//일반 함수 표현
var foo = function() { console.log("foo") }; //foo
//화살표 함수 표현
var bar = () => console.log("bar"); //bar

7. 주석

• 한줄짜리 주석: //
• 여러줄 주석: /* */

// 이것은 한줄일 때 사용하는 주석

/* 이건 여러줄일 때 사용하는 주석
첫번째줄
두번째줄
다 주석처리되지롱 */

8. == 비교와 === 비교의 차이

• == 비교는 연산자를 이용하여 [값]을 비교한다.
• === 비교는 연산자를 이용하여 [값 & 자료형]을 비교한다.

2 == "2" // true
2 === "2" // false - 2는 number, "2"는 string이기 때문