[엘리스 SW 엔지니어트랙] 7~9 Day _1

담·2022년 9월 20일
엘리스트랙
0

엘리스SW엔지니어트랙

목록 보기
3/6
post-thumbnail

9일 차에 이어 실시간 강의로 학습을 진행할 예정으로 보아, 9일차에 추가 수정 예정이다.

7일차

7일차 2022.09.20 (10:00AM~15:00)

  • 실시간 강의로 javascript 복습을 진행하였다.
    아래 내용에 이어서, 추가되는 내용은 9일차에 추가적으로 학습한다고 한다.
  • 전날, 소수의 합 알고리즘을 풀면서 break와 continue 대해서 공부했던 것을 다시 한 번 정리된 설명으로 들으니 이해가 더 빨랐다.
  • node.js 기능을 사용해 VSC에서 바로 consle창을 확인 할수 있다는 점도 알게 되어 학습에 요긴하게 사용하고 있다.
  • 이전에 알고있던 자바스크립트내용에서, 좀 더 내 지식으로 품고 싶은 내용들을 아래에 정리해 두었다.

자바스크립트_Javascript

  • 프로그래밍 언어로 ‘웹 페이지에 생동감을 불어넣기 위해’ 만들어진 언어
  • 자바스크립트 엔진이 있는 환경이면 자바스크립트 코드를 해석하고 실행 가능
  • 브라우저에서 자바스크립트 엔진이 내장되어있기 대문에 자바스크립트 실행가능
    • 엔진은 EMCAScript 규격 준수
    • EMCAScript : Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어로 자바스크립트 언어의 표준

자바스크립트 엔진의 메모리 구조

  • 코드영역 : 실행할 프로그램 코드
  • 데이터 영역 : 전역변수, static 변수
  • Heap 영역 : 사용자의 동적할당
  • Stack 영역 : 지역변수, 매개변수 등
    - 메서드 실행 종료후 제거됨

원시 타입 변수

변수(varaiable)

  • 데이터(값, value)을 담고있는 메모리 공간 자체 또는 그 메모리 공간의 주소를 가리키는 식별자
  • 즉, 자료를 저장할 수 있는 이름이 주어진 기억공간(referenece)
  • 변수를 생성하면, 메모리 주소 값과 식별자(변수이름)이 할당 됨

변수의 데이터 타입 종류

  • primitive 원시 타입

    • 단일 데이터 단 한개의 데이터만 저장
    • global 전역(코딩영역)에서 선언한 변수[a]는 데이터영역에서 값[4]을 참조함
    • boolean, null, undefined, number, string, syboml

  • Object 객체 타입

    • 복합 데이터 여러 개의 데이터를 저장. 원시타입 제외하고 다 객체 타입
    • global 전역(코딩영역)에서 선언한 객체[tv]는 heap 에서 주소값을 참조하는 객체내의 변수 값[channel, volume]이 존재
    • array, object, function, date, regex, etc,

  • 자바스크립트는 data는 따로 방이 만들어지고 주소값만 참조하기 때문에 어떤 형이든 자유롭게 들어 올 수있음

// 0x 16진법 
let hex = 0xb1; 
console.log(hex, typeof hex); //177 number

//자바스크립트는 숫자를 저장할수있는 메모리값이 고정되어있음. 넘어가면 지수로 변경이됨. 
let bigInt = 123232232332322322222222;
console.log(bigInt, typeof bigInt); //1.2323223233232232e+23 number

//만약, 지수로의 변경을 원치않으면 맨뒤에 n을 붙임
let bigInt2 = 123232232332322322222222n; 
console.log(bigInt2, typeof bigInt2); //123232232332322322222222n bigint
//다른 알파벳을 붙일 경우에는 숫자형이 아님.

산술연산자

  • console.log(10 + 3); : 덧셈 → 13

  • console.log(10 - 3); : 뺄셈 → 7

  • console.log(10 * 3); : 곱셈 → 30

  • console.log(10 / 3); : 몫 → 3.3333333333333335

    • 끝없이 가는 숫자는 마지막에 반올림을 시킴

  • console.log(10 % 3); : 나머지 → 1

  • console.log(10 ** 3); :거듭제곱 → 1000

  • console.log(Math.pow(10, 3)); : 거듭제곱 → 1000

  • console.log(0 / 10); : 0

  • console.log(10 / 0); : infinity

  • console.log(10 / -0); : -infinity

    • 음수 방향 무한 값

  • console.log(10 / 'string'); : NaN(Not a Number)

    • 숫자가 아님

  • console.log('string' == NaN); : false

    • typeof ‘string’ : string
    • typeof NaN : number

데이터 타입 : string

  • 아래의 코드는 모두 문자열 이다.
    동일하게 ‘문자열’ 결과 값을 가짐.
    let str = '문자열';
console.log(str);
str = '문자열';
console.log(str);
str = `문자열`; //백틱 또한 string 으로 봄
console.log(str);

문장 표현

let test = "'반갑습니다 해당 자료형은'" + str + '입니다.'; 
// 문자열 연결자 +
// - 를 쓰면 NaN가 됨; string - string = NaN
console.log(test);

// 특수문자 \n 줄바꿈 \t 탭키
test = "'반갑습니다 \n 해당 자료형은 \t '" + str + '입니다.'; 
// 각각으로 존재하는 문자열을 +로 묶어줌
console.log(test);

// 템플릿 리터럴
test = `"반갑습니다 \n 해당 자료형은' ${str} 입니다."`; 
// 백틱을 이용해 하나로 존재하는 문자열
console.log(test);

데이터 타입 : boolean

  • 식별자는 is형용사, 단어를 많이 사용함
let isActivated = false; //접속한 상태니?
let isMember = true;

console.log(isMember);

거짓으로 값으로 인식하는 데이터

  • 빈 문자열은 데이터 값을 참조할 것이 없기 때문에 false임
// 거짓 값으로 인식하는 데이터
console.log(!!0);
console.log(!!''); // 빈문자열
console.log(!!null);
console.log(!!undefined);
console.log(!!NaN);

참으로 값으로 인식하는 데이터

  • 자료형 데이터에 값이 존재하면 true
  • 빈 배열과 빈객체는 비어있어도 주소값(메모리공간)을 만들기 때문에 true 임.
console.log(!!10); // 0을 제외한 모든 숫자 타입 true
console.log(!!-3.14);
console.log(!!'String');
console.log(!![]);
console.log(!!{}); 
console.log(!!Infinity); // 무한대 = 값을 가짐 = true

Null 과 Undefined

  • Null
    • typeof null : ‘object’ 으로 객체 타입임
    • heap 영역에 객체로 만들어 졌지만, 객체 주소가 만들어 지지 않은 상태
    • 객체 타입으로 ‘비어 있는 값’을 의미. 변수의 값이 null로 할당 되어 있는 상태
  • Undefined
    • 변수가 선언만 되고 값이 할당이 안된 상태 (값의 ‘정의’가 안된 상태)
let animal; 
console.log(animal); //undefined ; 이게 무슨값인지 알지 못하는 상태

animal = null; // 빈주소값을 의미하는 객체 => null 객체의 주소값 할당
console.log(animal); //null ; animal 쓸건데 아직 그 값을 사용하지않은 상태. 

// typeof 키워드
console.log(typeof null); //object
console.log(typeof undefined); //undefined

animal = 'Dog'; // undefined 에서 값이 할당이 됨
console.log(typeof animal);// string

참조 타입 변수의 배열과 객체

객체_object 객체 타입 : 복합 데이터 타입

  • 메모리 공간이 동적으로 변하는 데이터 타입
  • 원시 타입과 다른 메모리 공간에 값을 할당
  • 식별자는 다른 메모리 공간에 있는 값의 주소 값을 할당

1. object 객체 타입 : 배열 Array

  • 같은 타입의 변수 여러 개를 저장하는 공간, Index 순서를 통해 값이 순서대로 들어감
let array = new Array(3); // 비어있는 공간이 3개인 배열의 생성자 함수
console.log(array); //[ <3 empty items> ]
array = new Array(1, 2, 3);
console.log(array); // [ 1, 2, 3 ]
array = Array.of(1, 2, 3, 4, 5); // of 를 사용해 배열을 생성
console.log(array); // [ 1, 2, 3, 4, 5 ]
  • 자바스크립트의 배열은 주소 값 만을 전달해주기 때문에 다른 타입도 들어가고 순서도 없음
  • 배열 인덱스마다 포인터로 주소값만들어감
    • 숫자 / 문자 / 객체 등 다양한 형식의 값 할당 가능
    • 순서의 제한이 없음
  • 배열명 === 식별자 (변수공간 메모리 주소값)
  • 인덱스 범위를 초과하면 undefined 값이 출력 → 다른 언어일경우에는 에러를 띔
// 값 추가
let subject = []; 
subject[0] = 'javascript';
subject[1] = 'html';
subject[2] = 'css';
subject[5] = 'java';
console.log(subject);  //[ 'javascript', 'html', 'css', <2 empty items>, 'java' ]
console.log(subject.length);  // 6

// 값 삭제
delete subject[1]; 
//원하는 배열 인덱스값을 삭제함; undefied으로 변경됨 (값만 삭제되고 메모리방은 empty == undefied)
console.log(subject); //[ 'javascript', <1 empty item>, 'css', <2 empty items>, 'java' ]

2. object 객체 타입 : Object

  • 서로 연관 있는 여러 종류의 데이터 타입을 한 개로 묶어주기 위해서 Object 타입 사용

  • object의 heap에 대한 데이터는 고정되지않고 유동적이다 = 동적이다

    • 객체의 key와 value값을 추가 삭제 수정가능하기 때문

  • 객체를 만드는법 2가지

    let obj1 = {}; // 객체 리터럴 -  비어있지만 true 값을 가짐
let obj2 = new Object(); // 생성자 함수

    - 식별자 = { key : value } ; key을 통해서 value 값을 받아 옴
    - 식별자.key ⇒ value 값
    - 식별자[’key’] ⇒ value 값

    - key : string, Number, Symbol
    - value : 원시데이터 타입, 객체, 함수

    let dog = {
	name: '멍멍이',
	age: 5,
	ownerName: 'yeonmi',
	};
// 값 접근 1
dog.isPet = true; 
// dog로 가서 isPet이라는 키가 있는지 확인 -> 있으면 수정 / 없으면 추가함
let rabbit = {
	name: '껑충이',
	age: 1,
	ownerName: null,
};
// 값 접근 2
rabbit['isPet'] = false;

  • 객체의 속성 값 = 프로퍼티(property)

깊은 복사 VS 얕은 복사

  • 깊은 복사(Deep Copy)
    • 원시타입 데이터는 새로운 주소에 값 자체가 복사됨
    • 새로운 값을 수정할 경우, 기존값에 영향 없음
  • 얕은 복사(Deep Copy)
    - 복합데이터 타입은 새로운 주소에 기존의 주소 값을 복사하는 것이며, 같은 주소를 참조함
    - 새로운 값 수정 시 기존 값에 영향 있음
//깊은 복사
let myName = '김원값';
let yourName = myName; // myName 값을 복사해옴
console.log('myName=', myName); //'김원값'
console.log('yourName=', yourName);//'김원값'

yourName = '김복사'; // 새로운 데이터 생성후, 새로운 데이터로 다시 주소를 참조함
console.log('myName=', myName); //'김원값' ; 변경 되지 않음
console.log('yourName=', yourName); //'김복사'

//얕은 복사 ( == 주속 복사)
//기존의 복사한 값에도 영향을 미침 
let arr = [1,2,3,4];
let newArr = arr;
arr[2] = 300;
console.log('arr= ', arr); // 'arr= ' [ 1, 2, 300, 4 ]
console.log('newArr= ', newArr); //'newArr= ' [ 1, 2, 300, 4 ]

let cat = {
	name: 'nabi',
};
console.log('복사 전 =', cat); //'복사 전 =' { name: 'nabi' }

let dog = cat;
dog.name = '멍멍이';
console.log('복사 후 cat=', cat); //'복사 후 cat=' { name: '멍멍이' }
console.log('복사 후 dog=', dog); //'복사 후 dog=' { name: '멍멍이' }

변수와 Scope

  • Scope : 범위, 영역
    • 식별자를 참조 할 수있는 유효한 범위
    • 변수이름을 접근 할 수 있는 유효한 범위
    • 종류
      • 블록스코프 : 모든 코드 블럭 {} 중괄호 영역
        • {}, if(){}, for(){}, function(){}
      • 함수스코프 : 함수 영역의 코드 블럭 {}을 의미
        • function(){}
      • 전역스코프 : 최상위 코드 블로으로 글로벌(global) 스코프 / 나머지는 전부 지역(local) 스코프
    • Global 전역스코프 > Function 함수스코프 > Block 블록스코프
  • let
    • 값의 재할당이 가능함
    • 블록 스코프 영역 (지역변수와 전역변수 구분 가능)
  • const
    • 최초 선언한 초기값 변경 불가능
    • 블록 스코프 영역 (지역변수와 전역변수 구분 가능)
  • var
    • 과거에 사용한 변수 키워드 (let과 유사)지만 사용 지양할 것
    • 함수 스코프만 인식 (전약변수와 지역변수가 동일하여 구분 불가)
    • 변수 선언 시 키워드가 없어도 에러발생안함 (변수선언인지 재할당인지 구분 어려움)
    • 값 덮어쓰기 가능 (디버깅 어려움)

우선순위

  • () 괄호가 제일 우선 연산자라는 것만을 기억하면됨

제어문

3항 연산자

  • 조건문을 ?와 :을 이용하여 간결하게 표현하는 방식
  • 조건 ? 조건이 참일 경우 실행 : 조건이 거짓일 경우 실행
  • Boolean() ? 선택문1 : 선택문2

let isPass = false;
let msg1 = isPass == false ? '합격' : '불합격';  
console.log(msg1); // 합격

let isPass2 = false;
let msg2 = isPass2 ? '불합격' : '합격'; 
console.log(msg2); //합격

for문

  • for(변수선언문;조건식;증감식) {코드블록};
  • 조건식이 false 가 되면 종료

break 와 continue

반복문 코드 블록 내부에서만 작동함

  • break
    • 반복문 코드 블록 실행문 안에서만 break 만나면 그 즉시 반복문 종료
    • 미리 조건식을 알 수 없을 때 사용
    • while 문 또는 for 문 내에 if(종료조건){break;} 로 사용
  • continue
    • 논리식이 반복문 코드 블록 실행 중에 쓰면 그 즉시 반복문 맨 처음으로 돌아감

함수

  • 호출할 때마다 같은 블록이 실행되기 대문에 재사용 가능 → 높은 가동성, 쉬운 유지보수
  • 하나의 함수에 한가지 기능만 하게 작은 단위의 코드 블록으로 생성
  • 함수가 어떤 일을 수행하는 지에 대한 의미 있는 동사 이름 값 사용

함수 구성요소

  • 함수 정의 키워드 function
  • 사용할 함수 이름
    • 함수 메모리 공간의 주소 값 식별자
  • 매개변수 parameter
    • 외부 인자 값을 초기값으로 사용하는 변수
    • 외부 값이 없을 경우 () 빈 소괄호 사용
  • 인자 argument
    • 함수를 호출 할때 함수로 전달 해주는 값
  • 반환값 retrun
    • 함수가 종료될때 호출한 곳으로 전달(반환)해주는 값

함수의 종류

  • 함수 선언문 : function 함수 이름 () {code};
    • 일반적인 함수의 형태
  • 무명함수 : function () {code} ;
    • 함수 이름이 없는 함수, 변수 값이나 매개변수 인자 값에 할당되는 함수
  • 함수표현식 : let 변수 이름 = function () {code};
    • 함수를 변수처럼 사용, 변수의 값으로 익명 함수를 할당
  • 화살표함수 : let 변수 이름 = () => {code};
    • 함수 키워드와 이름 생략, 콜백함수에서 많이 쓰임

    1. function 키워드 생략 후, () 소괄호 뒤에 = >를 붙임

    2. 매개변수가 한 개라면 () 소괄호 생략

    3. 함수의 유일한 내용이 한 줄 이면 {} 중괄호 생략

      let multiply = (a, b) => {
	return a * b;
  };
console.log(multiply(10, 20)); //200
 
let minus = (a, b) => a - b;
console.log(minus(10, 20)); // -10
  • 생성자함수 : let 변수 이름 = new 함수 이름 ();
profile
담
성실하게
이전 포스트

[엘리스 SW 엔지니어트랙] 6 Day

다음 포스트

1차 프로젝트회고록

0개의 댓글