[새싹 성동 2기] 3. Javascript 문법 기초(2)

(SK쉴더스)AI 활용한 클라우드 & 보안 전문가 양성 캠프

[새싹 성동 2기] 3. Javascript 문법 기초(2)

hunm719 2024. 11. 13. 18:41

[1] 연산자(Operator)

console.log(`7 / 5 = ${7 / 5}`);                // 7 / 5 = 1.4
console.log(`7 % 5 = ${7 % 5}`);                // 7 % 5 = 2


//  나머지 몫을 구할 때 Math.floor() 함수를 사용하여 소수점 이하를 버릴 수 있음
console.log(`7 // 5 = ${Math.floor(7 / 5)}`);   // 7 // 5 = 1

//  나머지 연산의 부호는 왼쪽 피연산자의 부호를 따름
console.log(`4 % 3 = ${4 % 3}`);                // 4 % 3 = 1
console.log(`4 % -3 = ${4 % -3}`);              // 4 % -3 = 1
console.log(`-4 % 3 = ${-4 % 3}`);              // -4 % 3 = -1
console.log(`-4 % -3 = ${-4 % -3}`);            // -4 % -3 = -1

//  문자열 결합
console.log('Project' + 'Moon');    // ProjectMoon

//  문자열의 일부를 선택하는 방법
const message = "LimbusCompany의 정기점검은 매주 목요일입니다";
console.log(message[0]);            // L
console.log(message[14]);           //           <= 영문, 숫자, 공백, 한글 모두 한 글자로 취급
console.log(message[99]);           // undefined <= 범위 밖의 경우

let project = 100;
let moon = "100";

if (project == moon) {
    console.log("일치");
} else {
    console.log("불일치");
}   // 일치 => 두 변수의 값을 비교 => 동등 연산자

if (project === moon) {
    console.log("일치");
} else {
    console.log("불일치");
}   // 불일치 => 두 변수의 타입과 값을 비교 => 일치 연산자

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

// 삼항 연산자 => 조건 ? 참 : 거짓
let x = 100;

if (x > 100) {
    console.log('100보다 큽니다.');
} else {
    console.log('100보다 작거나 같습니다.');
}

// 동일한 로직을 삼항 연산자로 표현
x > 100 ? console.log('100보다 큽니다.') : console.log('100보다 작거나 같습니다.');

[2] 자료형 변환

- 강제 자료형 변환

// 1.강제 자료형 변환 => String(), Number(), Boolean(), ...
const n = 52;
console.log(n, typeof n);                   // 52 number
console.log(String(n), typeof String(n));   // 52 string

console.log(n + 10);                        // 62  <= 52 + 10 <= 숫자 더하기 연산
console.log(String(n) + 10);                // 5210 <= '52' + 10 <= 문자열 연결

const b = true;
console.log(b, typeof b);                   // true boolean
console.log(String(b), typeof String(b));   // true string

// 숫자로 변환 => Number() 사용
const s = '123';
console.log(s, typeof s);                   // 123 string
console.log(Number(s), typeof Number(s));   // 123 number

console.log(s + 456);                       // 123456 <= '123' + 456 <= 문자열 연결
console.log(Number(s) + 456);               // 579 <= 123 + 456 <= 숫자 더하기 연산

const x = '숫자';
console.log(x, typeof x);                   // 숫자 string
console.log(Number(x), typeof Number(x));   // NaN number

const t = true;
console.log(t, typeof t);                   // true boolean
console.log(Number(t), typeof Number(t));   // 1 number

const f = false;
console.log(f, typeof f);                   // false boolean
console.log(Number(f), typeof Number(f));   // 0 number

// 숫자로 변환 가능한지 확인하는 방법 => isNaN() 함수 사용
console.log(Number("52") == NaN);       	// false
console.log(Number("오십이") == NaN);    	// false
console.log(NaN == NaN);             	// false <= NaN 비교는 무조건 다른 것으로 반환

console.log(isNaN(Number("52")));       	// false
consolejson.log(isNaN(Number("오십이"))); 	// true
console.log(isNaN(NaN));              	// true

// boolean으로 변환 => Boolean() 사용
console.log(0, Boolean(0)); // 0 false
console.log("", Boolean("")); // "" false
console.log(NaN, Boolean(NaN)); // NaN false
console.log(null, Boolean(null)); // null false
console.log(undefined, Boolean(undefined)); // undefined false
console.log(false, Boolean(false)); // false false

console.log(1, Boolean(1)); // 1 true
console.log(-1, Boolean(-1)); // -1 true
console.log(" ", Boolean(" ")); // " " true
console.log("0", Boolean("0")); // "0" true

console.log([], Boolean([])); // [] true
console.log({}, Boolean({})); // {} true

- 자동 자료형 변환

// 2.자동 자료형 변환 => 숫자와 문자열에 + 연산자를 사용하면 숫자를 문자열로 자동 변환함
console.log(10 + 20); // 30
console.log('10' + 20); // 1020 <= '10' + '20'
console.log(10 + '20'); // 1020 <= '10' + '20'
console.log('10' + '20'); // 1020 <= '10' + '20'

// 코드는 왼쪽부터 진행된다는 것을 잊지 말기
console.log('10' + 20 + 30); // 102030 <= '1020' + 30 <= ('10' + 20) + 30
console.log(10 + '20' + 30); // 102030 <= '1020' + 30 <= (10 + '20') + 30
console.log(10 + 20 + '30'); // 3030 <= (10 + 20) + '30'

// 숫자와 문자열에 +가 아닌 다른 연산자를 사용하면 문자열을 숫자로 자동 변환
console.log(20 - '10'); // 10 <= 20 - 10
console.log(20 * '10'); // 200 <= 20 * 10
console.log(20 / '10'); // 2 <= 20 / 10
console.log(20 % '10'); // 0 <= 20 % 10

console.log('20' - 10); // 10 <= 20 - 10
console.log('20' * 10); // 200 <= 20 * 10
console.log('20' / 10); // 2 <= 20 / 10
console.log('20' % 10); // 0 <= 20 % 10

// 부정 연산자를 두 번 사용하면 Boolean() 함수를 사용하는 것과 동일한 결과를 얻을 수 있음
console.log(Boolean(0), !!0); 			// false false
console.log(Boolean(""), !!""); 			// false false
console.log(Boolean(null), !!null); 			// false false
console.log(Boolean(undefined), !!undefined); 	// false false
console.log(Boolean(NaN), !!NaN); 			// false false
console.log(Boolean(false), !!false); 		// false false

console.log(Boolean(1), !!1); 			// true true  
console.log(Boolean("0"), !!"0"); 			// true true

console.log(Boolean(Number('1234')), !!Number('1234')); // true true    
console.log(Boolean(Number('숫자')), !!Number('숫자')); // false false

[3] 함수

- 함수를 정의하는 방법

함수 선언 (Function Declaration)
함수 표현식 (Function Expression)
생성자 함수 (Function Constructor)
화살표 함수 (Arrow Function)
즉시 실행 함수 (Immediately Invokedd Function Expresstion) = 자기 호출 함수

(1) 함수 선언 : 가장 기본적인 함수 선언 방식

function add (x, y) {return x + y};
         --- ------ --------------
         |    |        함수 본문
         |    +-- 매개변수(parameter) 
         +-- 함수 이름  				// 반드시 함수 이름이 정의되어야 함
add(10, 20);					// 함수 이름으로 호출(실행)
    -------
 인자(argument)

(2) 함수 표현식 : 함수를 변수에 할당하는 방식

// 변수는 서로 값을 주고 받을 수 있음
let a = 100;
let b = a;
console.log(a);		// 100
console.log(b);		// 100

// 함수 표현식을 이용하면 함수를 변수처럼 사용할 수 있음
let add = function (x, y) {return x + y;};
    ~~~   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  함수 변수        익명 함수 표현식
  
let sum = add;

console.log(add(10, 20));		// 30
console.log(sum(10, 20));		// 30
// 위의 경우를 잘 살펴보면 function 이후 바로 매개변수가 오는 것을 알 수 있음
// 함수 표현식을 이용하면 함수의 이름을 적지 않아도 함수를 정의할 수 있음!! = 익명 함수 표현식

// 위외 대비되는 기명 함수 표현식도 있음
let add = function plus(x, y) { return x + y; };
	   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                 기명 함수 표현식 ⇒ 함수 외부에서는 함수 이름으로 호출할 수 없으나, 
let sum = add;			   함수 내부에서 자기 자신을 호출(=재귀 호출)할 때 사용할 수 있음
	
add(10, 20);
sum(10, 20);
plus(10, 20);		// ReferenceError: plus is not defined

(3) 생성자 함수 : function() 생성자를 사용하는 방식

let add = new Function('x', 'y', 'return x + y');

바로 위에 있는 함수 표현식과 자세히 비교해보자

let add = function() {...}; // 함수 표현식의 경우
let add = new Function(...); // 생성자 함수의 경우

두 방식은 아래의 세 가지 차이점이 있다.

1. 스코프 (Scope) 차이
-함수 표현식은 상위에 정의된 함수나 변수에 접근할 수 있고, 이를 상위 스코프에 접근할 수 있다고 표현한다
-생성자 함수는 함수가 정의된 위치의 변수를 사용할 수 없고, 전역 스코프만 참조한다

const greeting = "Hello"; // 상위 스코프 변수

const sayHello1 = function() {
  console.log(greeting); // "Hello" 출력 가능
};

const sayHello2 = new Function('console.log(greeting);'); // 오류 발생 (greeting은 정의되지 않음)

sayHello1(); // "Hello" 출력
sayHello2(); // ReferenceError: greeting is not defined

2. 성능 차이

-함수 표현식은 자바스크립트 엔진이 미리 컴파일하기 때문에, 성능 면에서 유리함

-생성자 함수 방식은 런타임에 문자열을 코드로 컴파일하기 때문에, 성능 면에서 불리함

3. 디버깅과 가독성

-함수 표현식은 일반적인 함수 정의 방식이므로 코드 가독성과 유지보수 측면에서 유리함

-생성자 함수 방식은 문자열로 함수를 정의하므로 디버깅이 어렵고, 코드가 길어지면 가독성이 떨어짐

※ 결론 : 동적으로 함수를 생성해야 하는 특수한 상황에서만 생성자 함수 방식을 사용하고, 일반적인 경우에는 함수 표현식으로 함수를 정의하는 것을 권장함

(4) 화살표 함수 : 간결한 함수 정의가 가능하고, 콜백 (Callback) 함수에서 자주 사용됨

※ 콜백 함수 : 개발자가 코드를 이용해서 명시적으로 호출하는 함수가 아닌, 개발자는 단지 함수를 등록하기만 하고,

어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출해서 실행하는 함수

예) Event Handler => 특정 이벤트가 발생했을 때 실행할 함수

// 함수 선언
function add1(x, y) { console.log(x + y); }

// 익명 함수 표현식
const add2 = function (x, y) { console.log(x + y); };

// 화살표 함수를 이용해서 함수를 정의
// function 키워드를 제거하고, 함수 파라미터와 함수 본문 사이에 => 기호를 추가
const add3 = (x, y) => { console.log(x + y); };

// 화살표 함수 본문이 한 줄인 경우, 중괄호를 생략할 수 있음
const add4 = (x, y) => console.log(x + y);

// 화살표 함수 본문이 한 줄이고, 그 한 줄이 return 문이라면 return 키워드를 생략할 수 있음
const add5 = (x, y) => x + y;   // const add5 = function(x, y) { return x + y; };

// 파라미터가 하나인 경우, 파라미터를 감싸고 있는 소괄호도 생략이 가능
const add6 = x => x + 6;        // const add6 = function(x) { return x + 6; };

// 객체를 반환하는 경우에는 반환 객체를 소괄호로 감싸야 함
const add7 = (x, y) => { return { result: x + y }; };
const add8 = (x, y) => ({ result: x + y });

(5) 즉시 실행 함수 = 자기 호출 함수 : 함수 정의와 동시에 바로 실행하는 함수

function add(x, y) { console.log(x + y); }
add(10, 20);		// 30

(function (x, y) { console.log(x + y); })(10, 20);	// 30
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~
     함수 표현식을 소괄호로 둘러싼 후      바로 실행할 수 있도록 소괄호 쌍을 추가
    

function hello(name) { console.log('Hello, ' + name + '!');}
hello('홍길동');	// Hello, 홍길동!

(function (name) { console.log('Hello, ' + name + '!');})('홍길동');	// Hello, 홍길동!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~
              함수 표현식을 소괄호로 둘러싼 후            바로 실행할 수 있도록 소괄호 쌍을 추가

저작자표시 (새창열림)

'(SK쉴더스)AI 활용한 클라우드 & 보안 전문가 양성 캠프' 카테고리의 다른 글

[새싹 성동 2기] 학생별 점수 데이터 출력하기 (3)	2024.11.13
[새싹 성동 2기] 3. Javascript 문법 기초(3) (1)	2024.11.13
[새싹 성동 2기] 3. Javascript 문법 기초(1) (1)	2024.11.12
첫 번째 모듈 프로젝트 내용 및 후기 (1)	2024.11.12
[새싹 성동 2기] 2-2. AWS 기본 개념 및 서비스 소개 (0)	2024.10.30

현재글[새싹 성동 2기] 3. Javascript 문법 기초(2)

hunm719 개발/보안 블로그

e-mail : hunm719@naver.com github : github.com/hunm719

보안관제, 알고리즘, 코드스테이츠, 보안, 자료구조, 네트워크, Web Application, 리액트 컴포넌트, jpa, PYTHON, Spring Security, Algorithm, java, 클라우드, aop, SK쉴더스, AWS, 새싹캠퍼스, 조건문, javascript,

Today :
Yesterday :

hunm719 개발/보안 블로그