코드잇 Codeit/Front-End
[코드잇] 프로그래밍 핵심 개념 in JavaScript - ② 추상화
꼽파
2023. 4. 30. 09:02
할당 연산자
// 할당 연산자 (Assignment operators)
let name = '코드잇';
let x = 5;
// '='는 수학 등호와 다름, 할당연산자임.
// 오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당한다는 의미
// 할당 : 지정, 정했음
// 피연산자 : 연산이 되어지는 대상
x = x - 2;
// x - 2는 5 - 2가 됨.
// x = 3;
console.log(x);
// 3
복합 할당 연산자
복합 할당 연산자(compound assignment operators)
- 할당 연산자와 결합해서 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 해주는 연산
// 다음 두 줄은 같습니다
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;
증가(increment), 감소(decrement) 연산자
- 더하기 기호를 연달아 쓰거나(++), 빼기 기호를 연달아 씀(-)
- 변수의 값을 1씩 증가시키거나 감소시킬 때는 사용할 수 있음.
// 다음 세 줄은 같은 의미입니다.
x = x + 1;
x += 1;
x++;
// 다음 세 줄은 같은 의미입니다.
x = x - 1;
x -= 1;
x--;
함수의 실행 순서
function sayHello() {
console.log('Hello');
console.log('Welcome to Codeit!');
}
console.log('함수 호출 전')
sayHello();
console.log('함수 호출 후');
/*
1) function 안에 있는 건 특별히 출력 X
2) ● 함수 호출 전
3) sayHello 안에 있는 함수가 호출되어 한줄씩 실행함.
-> ● Hello
-> ● Welcome to Codeit
4) ● 함수 호출 후
*/
function square(x) {
return x * x;
}
console.log('함수 호출 전');
console.log(square(5));
console.log('함수 호출 후');
/*
1) 함수 호출 전
2) 25 ( 5 * 5 )
3) 함수 호출 후
*/
function square(x) {
return x * x;
}
console.log('함수 호출 전')
console.log(square(3) + square(4));
console.log('함수 호출 후')
/*
1) 함수 호출 전
2) 25 ( 9 + 16 )
3) 함수 호출 후
*/
return문 제대로 이해하기
function square(x) {
return x * x;
}
console.log(square(3));
// 9
/*
return이 나오면
1) 해당 값 반환
2) 그 시점에서 함수의 실행이 종료됨.
*/
function square(x) {
console.log('return 전');
return x * x;
console.log('return 후'); // Dead Code : return에서 끝나서 출력 안 됨
}
console.log('함수 호출 전');
console.log(square(3));
console.log('함수 호출 후');
/*
함수 호출 전
return 전
9
함수 호출 후
*/
return과 console.log의 차이
function printSquare(x) {
console.log(x * x);
}
function getSquare(x) {
return x * x;
}
printSquare(3); // 9
getSquare(3); // 9
console.log(printSquare(3)); // undefined
// return문이 없는 함수를 실행하면 함수 호출부분은 undefined 값을 내보냄.
// undefined = 처음부터 아무것도 할당하지 않았다는 말임.
console.log(getSquare(3)); // 9
/*
return : 함수를 실행하고, 어떤 값을 돌려주는 것
console.log : 콘솔에 어떤 함수를 출력해주는 것
*/
옵셔널 파라미터
함수 정의에서 매개변수(parameter)를 정의할 때 값을 반드시 입력하지 않아도 되는 매개변수
함수를 호출할 때, 옵셔널 파라미터에 값을 전달하지 않으면 그 파라미터는 underined 값으로 설정됨.
→ 함수 호출자는 함수에서 이 파라미터의 값이 반드시 필요하지 않음.
function sayHello(name) {
console.log(`안녕하세요 ${name}님!`);
}
sayHello('코드잇');
sayHello('좋아요');
sayHello('사랑해');
sayHello();
/*
안녕하세요 코드잇님!
안녕하세요 좋아요님!
안녕하세요 사랑해님!
안녕하세요 undefined님!
*/
let x;
console.log(x);
console.log(sayHello('코드잇최고'));
/*
undefined
안녕하세요 코드잇최고님! (Line 2에서 함수 호출 부분)
undefined (Line 8에서 함수 호출 부분)
*/
// 옵셔널 파라미터 (Optional Parameters)
function introduce(name, age, nationality = '한국') {
console.log(`제 이름은 ${name}입니다.`);
console.log(`나이는 ${age}살 이고,`);
console.log(`국적은 ${nationality}입니다.`);
}
introduce('코드잇', 5, '미국'); // 값을 모두 전달한 경우
console.log(''); // 한줄 띄어쓰기
introduce('코드잇', 5); // 파라미터 값을 생략한 경우 (한국이 나옴)
/*
제 이름은 코드잇입니다.
나이는 5살 이고,
국적은 미국입니다.
제 이름은 코드잇입니다.
나이는 5살 이고,
국적은 한국입니다.
*/
function greet(name, message = 'Hello') {
console.log(`${message}, ${name}!`);
}
greet('John'); // 출력값: "Hello, John!"
greet('Jane', 'Hi'); // 출력값: "Hi, Jane!"
/*
message 매개변수는 옵셔널 파라미터로 선언되었으며,
함수를 호출할 때 값을 입력하지 않으면 "Hello"가 기본값으로 사용됨.
*/
// 주의해야할 것 : 파라미터의 위치
// 파라미터 중 age와 nationality의 순서를 바꿔봄
function introduce(name, nationality = '한국', age) {
console.log(`제 이름은 ${name}입니다.`);
console.log(`나이는 ${age}살 이고,`);
console.log(`국적은 ${nationality}입니다.`);
}
introduce('코드잇', '미국', 43); // 값을 모두 전달한 경우
console.log(''); // 한줄 띄어쓰기
introduce('코드잇', 5); // 파라미터 값을 생략한 경우 (한국이 나옴)
/*
제 이름은 코드잇입니다.
나이는 43살 이고,
국적은 미국입니다.
제 이름은 코드잇입니다.
나이는 undefined살 이고,
국적은 5입니다.
*/
변수의 scope
// scope: 범위, 영역
function myFunction() { // 블록문 (Block Statement)
let x = 3; // 로컬 변수, 지역 변수 (Local Variable)
console.log(x);
}
myFunction();
// 3
console.log(x);
// error
// 블록문 안에서 선언된 변수를 밖에서 출력해서 오류남
let x = 3; // 글로벌 변수, 전역 변수 (Global Variable)
function myFunction() { // 블록문 (Block Statement)
console.log(x); // 3
}
myFunction();
console.log(x); // 3
// Line 4와 Line 8 모두 3으로 잘 출력됨.
x는 전역변수로 함수 안에서도 사용할 수 있고, 함수 밖에서도 사용할 수 있음.
let x = 3; // 글로벌 변수, 전역 변수 (Global Variable)
function myFunction() { // 블록문 (Block Statement)
let x = 5; // 로컬 변수, 지역 변수 (Local Variable)
console.log(x); // 5
}
myFunction();
console.log(x); // 3
전역 변수와 지역변수는 이름이 같아도 서로 다른 변수로 간주됨.
함수 내에서 변수를 재정의하더라도 전역 변수는 영향을 받지 않음.
상수
변수와 다르게 항상 일정한 값
// 상수 (constant)
let pi = 3.14; // 원주율
let radius; // 반지름 -----> 선언만하고 값이 없으니 'undefined' 값을 가짐
// 상수 (constant)
let pi = 3.14; // 원주율
let radius = null; // 반지름
// -----> 반지름이 빈값이라는 것을 명시적으로 표현하고 싶을 때 사용
let radius = null 에서 만약
변수에 들어갈 자료형이 결정되지 않았거나, 일정하지 않을 경우에는 null값을 할당하느 ㄴ게 좋음.
빈값을 표현하면서 일정하게 들어갈 자료형을 간접적으로 표현하고 싶을 경우
let radius = 0 // 숫자
let radius = '' // 문자
// 상수 (constant)
let pi = 3.14; // 원주율
let radius = 0; // 반지름
// -----> 반지름이 빈값이라는 것을 명시적으로 표현하고 싶을 때 사용
// 원의 넓이를 계산하는 함수
function calculateArea() {
return pi * radius * radius;
}
// 반지름에 따른 원의 넓이를 출력하는 함수
function printArea() {
return `반지름이 ${radius}일 때, 원의 넓이는 ${calculateArea()}`
}
radius = 4;
console.log(printArea());
radius = 7;
console.log(printArea());
radius = 8;
console.log(printArea());
여기서 pi 값은 3.14로 고정되어 있음.
이렇게 변하지 않는 값이 '상수'임.
상수는 변수를 선언할 때 'const'라는 키워드로 선언해주면 됨.
const로 선언한 상수는 밑에서 재선언하는 경우, 값을 입력하지 않은 경우 오류가 나므로 보호할 수 있음.
상수는 이름을 지을 때 대문자와 밑줄로 작성해주어야 함.
이름에 들어가는 모든 알파벳을 대문자로 쓰고, 두 단어가 있을 때에는 밑줄로 구분을 함.
// 상수 (constant)
const MyNumber; // (X)
const MY_NUMBER // (O) -> 대문자_대문자
let radius = 0; //
상수를 사용하는 이유?
변수를 작성하고 수정을 안 하면 되는데, 왜 굳이 상수를 사용하는 것인가.
→ 실수로 다른 값을 할당할 수 있고, 협업할 때 다른 사람이 변경할 수 있으므로 필요한 경우에 상수를 활용해야 함.
728x90