프로그래밍 핵심 개념 in javascript

 

해당 내용은 코드잇 '프로그래밍 핵심 개념 in javascript'을
보면서 정리한 내용입니다. 문제가 될 시 삭제하겠습니다.

---

1. 자료형

01. 숫자형

// 나머지
console.log(7 % 3); // 1
// 거듭제곱
consloe.log(2 ** 3); // 8
// 덧셈
console.log(1 + 8); // 9
// 뺄셈
console.log(6 - 7); // -1
// 곱셈
console.log(2 * 2 * 2); // 8
// 나눗셈
console.log(5 / 2); // 2.5
// 사칙연산에 맞게 계산 됨
console.log(2 + 3 * 2); // 8
console.log((2 + 3) * 2); // 10

03. 문자열 기본

// 문자열
// 문자열은 같은 따옴표로 작성해야 함 
'코드잇'
"코드잇"
console.log('코드잇');

04. 문자열 활용

console.log("He said \"I'm Iron man\"");
console.log('He said "I\'m Iron man"');
console.log(`He said "I'm Iron man"`);

console.log('3' + '5'); // 35

07. 불대수

AND OR NOT

명제 : 참과 거짓이 확실한 문장

AND 연산은 두개가 모두 참이어야 참

OR 연산은 둘 중 하나만 참이어도 참

NOT 은 반대로 뒤집는 역할

08. 불린형

console.log(2>1); // True
console.log(2<1); // False
// 등호는 항상 부등호 뒤에 써야 함
console.log(3>=2); // true 
console.log(3<=3); // true
console.log(3===3); //  true
consloe.log(3!==3); // false

consloe.log('Codeit' === 'Codeit'); // true

console.log(true && true); // true 두 값이 모두 true 여서 true
console.log(true || false); // true
console.log(!true); // false
console.log(!!true); // true

11. typeof 연산자

console.log(type of 101); // number
console.log(type of 'Codeit'); // string 
console.log(type of true); // boolean
function sayHello(){
	console.log('Hello'); 
}
console.log(typeof sayHello); // function

NaN = not a number

14. 형 변환 1

// String, Number, Boolean
console.log('10' + '5');  // 105
console.log(10 + 5);      // 15

console.log(Number('10') + Number('5'));  // 15
console.log(String(10) + String(5));      // 105

// '', 0, NaN은 boolean 시 false가 나옴 <- falsy 라고 부름

Number(true); // 1
Number(false); // 0

console.log(4+'2'); // 42 한쪽이 문자열일 경우, 양쪽 다 문자열로 변환하여 문자열 덧셈
console.log(4+2);   // 6
console.log(4-true);   // 3
console.log(4*false);   // 0
console.log(4/'2'); // 2 나누기 연산이기 때문에 2가 숫자로 변환되었다고 함 
console.log('4'** true); // 4 true가 1이어서 
console.log(4%'two') // NaN NaN 값은 어떤 값과 연산해도 NaN으로 나옴 

// 관계비교 연산 (<, <=, >, >=)
console.log(2 < '3'); // true
console.log(2 > true); // true
console.log('2' <= false); // false
console.log('two' >= 1); // false

// 같음 비교 연산 
console.log(1 === '1'); // 일치, 불일치(!==) false
console.log(1 === true);  // false
console.log(1 == '1'); // 동등, 부등(!=) true
console.log(1 == true); // true

18. 템플릿 문자열

// template: 일정한 틀, 형식
let year = 2018;
let month = 3;
let day = 11;

console.log('생년월일은 ' + year + '년 ' + month + '월 ' + day + ' 일 입니다.');
console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`);

// 생년월일은 2018년 3월 11일 입니다.

let myNumber = 3;

function getTwice(x) {
    return x * 2;
}

console.log(`${myNumber}의 두 배는 ${getTwice(myNumber)}입니다.`);

20. null과 undefined

null : 값이 없다는 것을 의도적으로 표현할 때 사용 (의도적인 없음)
undefined : 값이 없다는 것을 확인하는 값 (처음부터 없음)

let codeit;
console.log(codeit); // undifined

codeit = null;
console.log(codeit) // null

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

---

2. 추상화

01. 할당 연산자

• 오른쪽의 연산을 왼쪽에 할당한다

let name = '코드잇';
let x = 5;

x = x - 2 ; // 3

02. 복합 할당 연산자

// 다음 두 줄은 같습니다
x = x + 1;
x += 1;

// 다음 두 줄은 같습니다
x = x + 2;
x += 2;

// 다음 두 줄은 같습니다
x = x * 2;
x *= 2;

// 다음 두 줄은 같습니다
x = x - 3;
x -= 3;

// 다음 두 줄은 같습니다
x = x / 2;
x /= 2;

// 다음 두 줄은 같습니다
x = x % 7;
x %= 7;

// 다음 세 줄은 같은 의미입니다.
x = x + 1;
x += 1;
x++;

// 다음 세 줄은 같은 의미입니다.
x = x - 1;
x -= 1;
x--;

03. 함수의 실행 순서

function sayHello() {
    console.log('Hello');
    console.log('welcome to Codeit!');
}

console.log('함수 호출 전');
console.log(sayHello());
console.log('함수 호출 후');

06. return 문 제대로 이해하기

• 함수 호출의 값을 되돌려 줌
• 함수 내부에서 return 이 나오면 함수 중단함

functino square(x) {
    return x * x;
}

conole.log(square(3));

07. return 과 console.log의 차이

function printSquare(x) {
    console.log(x * x);
}

function getSquare(x) {
    return x * x;
}

printSquare(3); // 9
getSquare(3); // 아무것도 출력되지 않음
console.log(getSquare(3)); // 9
console.log(printSquare(3)); // undifiend 

09. 옵셔널 파라미터

• 옵셔널 파라미터 : 선택적으로 전달받는 파라미터
• 옵셔너 파라미터의 위치는 반드시 가장 뒷쪽으로 선언해야 함

function sayHello(name, age, nationality = '한국') {
    console.log(`제 이름은 ${name}입니다.`);
    console.log(`나이는 ${age}살 입니다.`);
    console.log(`국적은 ${nationality}입니다.`);
}

sayHello('미니미', 3); 
// 제 이름은 미니미입니다.
// 나이는 3살 입니다.
// 국적은 한국입니다.

• 옵셔널 파라미터를 여러개 넣을 수도 있으며, 옵셔널 파라미터 다음에 일반 파라미터만 주어지지 않으면 됨

function say(family_name, last_name, age=12, nation="korea", city="seoul")    # O
function say(family_name, age=12, nation="korea", city="seoul", last_name)    # X

11. 변수의 scope

• scope : 범위, 영역
• 모든 변수에는 scope가 있는데 크게 글로벌 변수, 로컬 변수로 나눌 수 있다.

// Scope: 범위, 영역
let x = 3; // 글로벌 변수, 전역변수 (어디에서나 유효한 범위)

function myFunction() { // 블록문
    let x = 5;  // 로컬 변수, 지역변수 (블록문 내에서만 유효한 범위)
    console.log(x);
}

myFunction(); // 5
console.log(x); // 3 

13. 상수

• 상수는 const 로 선언함
• 상수의 값을 변경하려고 하면 오류가 남
• 변수명은 대문자로 사용 (ex) MY_NUMBER

// 상수 
const PI = 3.14; // 원주율
let radius = 0;    // 반지름

// 원의 넓이를 계산하는 함수
function calculateArea() {
    return PI * radius * radius;
}

// 반지름에 따른 원의 넓이를 출력하는 함수
function printArea() {
    return `반지름이 ${radius}일 때, 원의 넓이는 ${calcaulateArea()}`;
}

radius = 4;
console.log(printArea());

radius = 7;
console.log(printArea());

radius = 8;
console.log(printArea());

---

3. 제어문

01. if문

• 특정한 조건에 따라서 실행할 지 하지 않을 지를 결정

// 파라미터 height을 활용하는 checkHeight 함수를 완성하세요.
function checkHeight(height) {
    // 여기에 코드를 작성해 주세요.
    if (height >= 140){
      console.log('탑승이 가능합니다.')
    }
    else {
      console.log('탑승이 불가능합니다.')
    }
}

// 테스트 코드
checkHeight(141); // 탑승이 가능합니다.

03. else if 문

let temperature = 140;

if (temperature <= 0) {
    console.log('물이 업니다.');
} else {
    if (temperature < 100) {
        console.log('물이 얼지도 끓지도 않습니다.');
    } else {
        console.log('물이 끓습니다.');
    }
}
// 물이 끓습니다.

if (temperature <= 0) {
    console.log('물이 업니다.');
} else if (temperature < 100) {
    console.log('물이 얼지도 끓지도 않습니다.');
} else if (temperature < 150) {
    console.log('물이 끓습니다.');
} else {
    console.log('물이 모두 수증기가 되었습니다.');
}
// 물이 끓습니다.

06. swtich 문

• 조건에 일치하는 case를 찾고, break문이 없다면, 해당 조건에 일치하는 case 뒤로 전부 실행이 됨
• break 문이 있다면, 조건을 만나면 뒤의 조건을 실행하지 않고 빠져나옴
• if문과 switch문 모두 특정한 조건에 따라 다르게 동작하는 코드를 만들 수 있지만, 어떤 넓은 범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 좀 더 효과적이고 특정한 값에 일치하는 조건을 만들 때는 switch문이 좀 더 효과적임
• switch문은 값들을 비교할 때 자료형을 엄격하게 구분한다는 것과 if문으로 대체할 때는 반드시 등호 3개로 일치비교를 해야한다

switch (비교할_값) {
    case 조건값_1:
        동작부분;
        break;     // switch 문을 빠져나옴
    case 조건값_2:
        동작부분;
        break;
    default:    // if else에서, else와 같은 의미
        동작부분;
}

let myChoice = 2;

switch(myChoice) {
    case 1:
        console.log('토끼를 선택한 당신...');
        break;
    case 2:
        console.log('고양이를 선택한 당신...');
        break;
    default:
        console.log('1에서 4사이의 숫자를 선택해 주세요.';
}

09. for문

// 반복문
// 초기화부분은 딱 1번만 실행됨
// 조건부분이 만족되면, 추가동작부분을 실행함

for (초기화부분; 조건부분; 추가동작부분) {
    동작부분
}

for (let i = 1; i <= 10; i++){
    console.log(`${i} 코드잇 최고!`);
}

// 출력결과
// 1 코드잇 최고!
// 2 코드잇 최고!
...
// 10 코드잇 최고!

• 아래와 같이 사용하면 추가동작부분을 꼭 채우지 않아도 된다.

for (let i = 1; i <= 10;) {
  console.log(`${i} 코드잇 최고!`);
  i++;
}

• 아래와 같이 사용하면 초기화 부분도 반드시 채우지 않아도 된다.

let i = 1; 
for (; i <= 10; i++) {
  console.log(`${i} 코드잇 최고!`);
}

function printTriangle(height) {
    let stars = '';
    for (let i = 1; i <=height; i ++) {
      stars = stars + '*';
      console.log(stars)
    }
}

// 출력 결과
높이: 1
*
높이: 3
*
**
***
높이: 5
*
**
***
****
*****

13. while 문

• 조건부분이 충족되지 않을 때까지 동작부분을 반복함

while (조건부분) {
    동작부분
}

let i = 1;
while (i <= 10) {
    console.log(`${i} minimi 최고!`);
    i ++;
}

for (let i = 1; i <=10; i++) {
    console.log(`${i} minimi 최고!` );
}

let i = 30;

while (i % 7 !== 0){ // 조건이 true일 때만 동작하므로, 7의 배수가 되는 순간 동작을 멈춤
    i++;
}

conole.log(i); // 35

16. break와 continue

• break 문을 만나면 반복문을 빠져나옴

let i = 1;

while (i <= 10) {
    console.log(i);
    if (i === 7) {
        break;
    }
    i++;
}

for (let i = 1; i <=10; i ++){
    console.log(i);
    if (i === 7){
        break;
    }
}

// 출력결과
1
2
3
4
5
6
7
1
2
3
4
5
6
7

• continue는 동작을 건너띔

for (let i = 1; i <=10; i ++){
    if (i % 2 === 0){
        continue;
    }
    console.log(i);
}

// 출력결과
1
3
5
7
9

let i = 1;
while(i <= 10) {
    if (i % 2 === 0) {
        i ++;
        continue;
    }
    console.log(i);
    i++;

}