JavaScript_Study_#1

김동혁·2023년 7월 6일
JavaScriptdeepdive
0

□ 04. 변수

ㅁ 변수란?

  • 값을 저장하기 위해확보한 메모리공간
  • 식별자

ㅁ 식별자

  • 변수의 '이름'이다.
  • 식별자는 변수가 아니라 메모리 주소를 기억하고있다.

ㅁ 변수 이름의 저장위치

  • 변수이름을 비롯한 식별자는 [execution context]에 등록된다.

    [execution context]
    자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행결과를 관리하는 영역이다.
    이를통해, 식별자와 스코프를 관리한다.

ㅁ 변수선언의 실행시점과 변수 호이스팅

  • 자바스크립트 엔진은 변수선언이 소스코드의 어디에 있든 가장 먼저 실행된다. (런타임 이전)
  • 이를 [hoisting] 이라고 한다.
  • ex) var, let, const, function, class 키워드를 사용해 선언하는 모든 식별자

[hoisting]
인터프리터가 변수와 함수의 메모리공간을 선언 전에 미리 할당하는 것을 의미한다.
var 로 선언시, undefined로 변수를 초기화 하지만,
let, const의 경우 호이스팅 시 변수를 초기화하지 않는다.

ㅁ 값의 할당

  • 변수 선언은 런타임 이전에 실행되지만, 값의 할당은 런타임 시점에 실행된다.

□ 05. 표현식과 문

ㅁ 리터럴

  • 사람이 이해할수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법.
  • 런타임시, 리터럴의 값을 평가해 값을 생성한다.

ㅁ 표현식

  • 값으로 평가될수 있는 statement다.
  • 평가를 하면, '값' 이 된다.

ㅁ 문

  • 프로그램을 구성하는 기본단위이자 최소실행단위이다.
  • 토큰이란 문법적으로 더이상 나눌수 없는 코드의 기본요소이다.
  • 선언문, 할당문, 조건문, 반복문으로 구분할 수있다.

□ 06. 데이터타입

ㅁ 데이터 타입

  • 원시타입
  • number, string, boolean, undefined, null, symbol (es6), 객체타입

ㅁ 템플릿 리터럴

  • ``(백틱) 을 통해 편리한 문자열 처리를 제공한다
  • \ (백슬래시)로 시작하는 이스케이프시퀀스를 사용할 수있다.

ㅁ 심벌타입

  • 다른 값과 중복되지 않는 유일무이한 값이다.
  • var a = Symbol('abc') / var b = Symbol('abc') > a <> b

ㅁ 동적 타이핑

  • C/Java의 경우 정적타입언어이다. (명시적 타입선언)
  • 정적타입 언어의 경우 컴파일 시점에 타입체크를 수행한다.
  • 동적타입 언어인 javascript는 선언시점이 아닌 할당시점에 타입이 결정된다.

□ 07. 연산자

ㅁ 그 외의 연산자

  • ?. 옵셔널 체이닝 연산자
  • ?? null 병합 연산자
  • delete 프로퍼티 삭제
  • new 인스턴스 생성연산자
  • instanceof 좌변의 객체가 우변의 생성자함수와 연결된 인스턴스인지 판별
  • in 프로퍼티존재 확인

□ 08. 제어문

ㅁ 블록문

ㅁ 조건문

  • if else
  • switch

ㅁ 반복문

  • for문
  • while 문
  • do ~ while문
  • break문

□ 09. 타입변환과 단축 평가

ㅁ 타입변환이란?

  • 의도적으로 타입을 변환하는 것을 [명시적 타입변환] / [타입캐스팅] 이라고 한다.
  • 의도와는 상관없이 v8엔진에 의해 타입이 변환되는 것을 [암묵적 타입변환] / [타입강제변환] 이라고 한다.

ㅁ 암묵적 타입변환

  • 문자열, 숫자, 불리언과 같은 원시 타입중 하나로 타입을 자동 변환한다.
  • ex) 1 + '10' = 11 / 1 - '1' = 0 등

ㅁ 명시적 타입변환

  • 개발자의 의도에 따라 명시적으로 타입을 변경하는 방법이다.

  • built-in method를 사용하는 방법,

  • 생성자 (new 연산자) 없이 호출하는 방법

  • 문자열 연결 연산자를 활용하는 방법

  • ex1) 생성자 > String(1) => "1"

  • ex2) built-in method > (1).toString() => "1"

  • ex3) 문자열 > 1 + "" => "1"

ㅁ 단축평가

  • 논리 연산자를 사용한 단축평가
  • ex) 'Cat' && 'Dog' => "Dog" (논리 곱)
  • ex) 'Cat' && 'Dog' => "Cat" (논리 합)

※ [null] or [undefined] 가 아닌지 확인하고 프로퍼티 참조할때

var elem = null;
var value = elem.value; // type error

var elem = null
var value = elem && elem.value;
// elem값이 true면 elem.value 값을 사용한다.
// elem값이 false면 elem 값을 사용한다.

※ 옵셔널 체이닝 연산자

  • 좌항 연산자가 null이나 undefined면 undefined를 반환하고 아니면 우항의 값을 참조한다.
var elem = null
var value = elem?.value;
console.log(value); // undefined

※ null 병합 연산자

  • ?? 좌항의 연산자가 null 또는 undefined 인 경우 우항의 연산자를 반환한다.
var foo = null ?? 'default string';
console.log(foo);

□ 10.객체 리터럴

ㅁ 객체란?
자바스크립트는 객체 기반의 프로그래밍 언어이며, 원시값을 제외한 나머지값은 모두 객체다.

객체는 프로퍼티로 구성된 집합이며, 프로퍼티는 key / value 로 구성된다.

  • [인스턴스]

[instance]
클래스에 의해 생성되어 메모리에 저장된 실체.

ㅁ 프로퍼티

  • 객체는 프로퍼티의 집합이며, 키와 값으로 구성된다.

ㅁ 메서드

  • 프로퍼티의 값이 함수인 경우, 일반함수와 비교하기 위해 메서드라고 부른다.

ㅁ 프로퍼티의 접근

  • 마침표 표기법 (ex. person.name)
  • 대괄호 표기법 (ex. person['name'])

□ 11.원시값과 객체의 비교

ㅁ 원시타입 값 (primitive type)

  • 변경 불가능한 값이다. (immutable value)
  • 원시값을 변수에 할당하면 변수에는 실제값이 저장된다.

ㅁ 객체(참조) 타입 값 (object / reference type)

  • 변경 가능한 값 (mutable value)
  • 객체값을 변수에 할당하면 참조 값이 저장된다.

원시값을 갖는 변수를 다른 변수에 할당하면 [값에 의한 전달]
참조값을 갖는 변수를 다른 변수에 할당하면 [참조에 의한 전달]

ㅁ 값에 의한 전달

  • 엄격하게 표현하면 값이 전달되는 것이 아니라 메모리주소가 전달된다.
  • 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

ㅁ 객체

  • 얕은복사
    객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 단 한 단계까지 복사하는 것을 말한다.
  • 깊은 복사
    재귀적으로 원시값이 나올때까지 복사하는 것.
  • ※ 정리
    원시값은 복사할때, 복사값을 다른 메모리에 할당하기 때문에, 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다.

EX) Shallow Copy

-- 원시값 복사시
const a = 1;
let b = a;

b = 2;
console.log(a) // 1;
consoel.log(b) // 2;
-- 참조값 복사시
const a = {number :1};
let b = a;
b.number = 2

console.log(a); // number : 2
console.log(b); // number : 2
  • 얕은복사 하는방법
  1. Object.Assign() - 첫번재로 들어온 객체에 다음인자로 들어온 객체를 복사해준다.
ex)
const obj = {
	a : 1;
    b : {
    	c: 2,
    },
};

const copiedObj = Object.assign({},obj);
copiedObj.b.c = 3;
obj === copiedObj // false
obj.b.c === copiedObj.b.c // true
  • 깊은 복사하는 방법
ex - 1) 
const obj = {
	a: 1;
    b: {
    	c: 2,
    },
};

function copyObj(obj) {
  const result = {};

  for (let key in obj) {
    if (typeof obj[key] === 'object') {
      result[key] = copyObj(obj[key]);
    } else {
      result[key] = obj[key];
    }
  }

  return result;
}

const copiedObj = copyObj(obj);

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c //false 
ex - 2)
const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = _.cloneDeep(obj);

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c //false

□ 12.함수

ㅁ 함수란

  • 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행단위로 정의한 것이다.

ㅁ 함수 생성시점과 함수 호이스팅

  • 모든 선언문이 그렇듯, 함수 선언문도 코드가 한줄씩 순차적으로 실행되는 시점인 런타임이전에 실행된다.
ex) 
console.dir(add);
console.dir(sub);

function add(x, y) {
	return x + y;
} // f add(x, y)

var sub = function(x, y){
	return x - y;
} // 변수 선언이되기때문에 함수실행x

ㅁ Function 생성자 함수

ex) 
var add1 = new Function('x','y', 'return x+y')
var add2 = function (x, y) { return x + y; }
console.log(add(2,5));

// 거의 안쓴다. (클로저를 생성하지 않고, 선언문/표현식과 다르게 동작한다.

ㅁ 화살표 함수

  • ES6부터 도입된 함수. / 항상 익명함수로 정의한다.

ㅁ 다양한 함수의 형태

  • 즉시실행함수
    익명 함수를 사용하는 것이 일반적이다.
    즉시 실행되며, 단 한번만 호출되며 다시 사용할 수 없다.

  • 재귀함수
    자신을 호출 하는 함수를 재귀함수라고 한다.

    ex) 
function countdown(n) {
	if (n < 0) return;
   countdown(n - 1);
}

  • 중첩함수
    함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 한다.

ex)
function outer() {
	var x = 1;
    function inner() {
    	var y = 2;
       	console.log(x + y) ; // 3
    }
    inner () ;
outer();
  • 콜백함수
    함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 [콜백함수] 라고 하며,
    매개 변수를 통해, 함수의 외부에서 콜백함수를 전달받은 함수를 고차함수 라고한다.
    콜백함수는 비동기 처리뿐 아니라, 배열 고차함수에도 사용된다.
profile
김동혁
이전 포스트

dfd

다음 포스트

JavaScript_Study_#4

0개의 댓글