JS 복습

Debug-Life ·2023년 1월 24일

JavaScript

위 사진은 중간에 설명된 Exports Import에 대한 사진이다.

JS를 크게 값 & 식 & 문으로 구분하였는데, 중요한 식같은것은 마지막 부분인 문 단계에서 같이 서술하였다. 초반에 값 & 식 & 문에 대한 설명을 하니 섞여있더라도 이해하기엔 무리가 없을 것이다.

<문법>

1. let const

let : 재할당 가능
const : 재할당 불가.

둘 다 변수 선언에 사용되지만 const는 값을 재할당 할 수 없고 let은 할 수 있다. const는 선언과 동시에 초기화를 해줘야 하고, let은 그렇지 않아도 된다.
var 키워드는 모든 데이터 유형을 담을 수 있다. 특징은 let과 같다. 다만, 최신 JavaScript에서 오래된 것으로 간주되며 일반적으로 대신 let또는 const키워드를 사용하는 것이 좋다.

2. 값 & 식 & 문

한마디로 값은 그냥 하나의 값
식은 연결된 것. 그리고 표현식은 값으로 귀결될 수도 있다.
문은 중괄호로 감싸져 있는것. (무언가 인터프리터에게 명령하는것)

//값 (즉. 값 식)
1;
('문자열 값');
true;
false;
null;
undefined;
// ...레퍼런스 타입 값


// 값으로 귀결된 식 or 연산식
1 + 1;
1 > 2;
'안' + '녕' + '하세요';


// 문
// 인터프리터에게 명령한다. 그것을 지시문으로
let isFlag = false

if (1 + 1 > 0) {
  isFlag = true
}

if (isFlag) {
  return '성공'
}
if (식) {

}
for (식) {

}

3. 리터럴

리터럴은 그냥 데이터 값이고, 리터럴로 자바스크립트의 값을 표현 할 수 있는 것임.

 * 리터럴
 *
 * 데이터 값
 */

const obj = {
	name: 'jang',
};

123;

('jang'); // => new String('jang');

[1, 2, 3]; // => new Array(1, 2, 3);

4. use strict

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode
자바스크립트를 매우 엄격하게 관리해줌. 문자열로 선언하는게 끝.
globalVal = 10; 이 부분을 에러라고 알려줌 변수 선언이 안되있기 때문에.
그런데 다행히 2015부터는 자동으로 적용됨. 다만 그 이전버전의 js를 개발해야할떄는 꼭 써주는것이 안전하고 동작이 빠르다.

function func() {
	'use strict';

	globalVal = 10;
	console.log(this);

	return 'hello';
}

func();

<값>

1. 타입 시스템

만약 이 부분(원시값, 객체)이 이해가 안되면 8번으로 넘어가서 보충 설명을 확인하세요.

두가지로만 표현됨.

원시 값(Primitive)
객체 (Reference)

1.1 원시값 (Primitive)

불변한다.

typeof undefined;	//typeof가 원시값을 알려줌.
typeof true;
typeof 'string';
typeof 123;
typeof 9007199254740992n;
typeof Symbol();
typeof null;

위 사진처럼 원시값은 변하지 않음. 따라서 아래처럼 let으로 해서 값을 재할당 해주어야함.

let test = 'string';

console.log(test.toUpperCase());
console.log('string'.toUpperCase());

console.log(test);

let test1 = 'string';

test1 = test1.toUpperCase();

console.log(test1);


const bool = false;
console.log(!bool);
console.log(bool);


let bool2 = false;
bool2 = !bool2;

console.log(bool2);

1.2 객체 (Reference)

const obj = {
	name: 'jang',
	age: 11,
	arr: [],
	func: function () {},
	child: {},
};
const array = [[], 11, 'jang', function () {}];

function func() {}

console.log(obj instanceof Object);
console.log(func instanceof Function);
console.log(array instanceof Array);

console.log(Object.prototype.toString.call(func));
console.log(Object.prototype.toString.call(array));

console.log(typeof func);
console.log(typeof array);

const obj2 = {
	str: 'string',
};

obj2.str.toUpperCase();
obj2.num = 123;
obj2.bool = true;

const arr = [1, 2, 3];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

arr[3] = 100;

console.log(arr);

<식>

<문>

2. 함수

2-1. 화살표 함수

function multiply(number) {
  
}

const multiply = (number) => {
  return number * 2;
}

화살표 함수로 사용하면 this 키워드를 항상 정의한 객체를 나타내게 할 수 있음.
화살표 함수로 쓸 떄 인수 1개이면 괄호 생략가능.
return 문 하나면 return과 중괄호 생략 후 한 줄로 쓰기 가능.

const multiply = number => number *2;
console.log(multiply(2));

3. Exports Import

상속이라고 생각하면 편함.
오른쪽과 왼쪽의 차이는 전체를 내보낼것인지 일부만 선택적으로 내보낼지의 차이이고, 구분은 중괄호로 함.
동시에 작성하고 싶을땐, {baseData,clean} 처럼 사용한다.

4. class

4-1.

4-2. 생성자 함수 (constructor)

class 내부는 일단 프로퍼티와 함수가 들어갈 수 있음.
프로퍼티 : 클래스 내부의 변수같은 개념.
메서드 : 클래스 안에 정의한 함수
그리고 이제 생성자 함수는 클래스로 만든 인스턴스(객체)가 생성될떄마다 실행되는 함수이다.


class Human {
  constructor() {
  	this.gender = 'male';
  }
  
  printGender () {
  	console.log(this.gender);
  }
}

-------------------------------------

class Person extends Human {  	// extends로 상속 가능
  constructor() {				// 생성자 함수.
    super();					// 상속을 받는다면 반드시 상속받은 상위 클래스의 생성자 함수를 실행해야함.
    this.name = 'JW';
    this.gender = 'female';		// 만약 이 줄을 추가한다면 제일 아래에 나온 출력값은 male이 아니라 female이 나올 것임.
  }
  
  name = 'Max;					// 프로퍼티
  call = () => {....}			// 메서드
  
  printMyName() {
    console.log(this.name);
  }

const person = new Person();	// 인스턴스 생성.
person.printMyName();			// 인스턴스의 함수 실행. >> JW 출력이 될것임.
person.printGender();			// >> male이 출력 될 것이고
}

5. class, attribute, method

프로퍼티 : 클래스와 객체에 추가되는 변수같은 것.

메서드 : 클래스와 객체에 추가되는 함수 같은 것.

this : 프로퍼티와 생성자 함수를 설정하는 구문

그리고 생성자 함수를 사용하는것보다 괜찮은 구문 등장함. (차세대 ES7)

차세대 ES7

차세대 자바스크립트인 ES7 에서는 이제 class에 바로 프로퍼티를 할당 할 수 있다. (생성자 함수 호출 하지 않아도 됨)

메서드 : 값으로 함수를 저장하는 프로퍼티라고 생각하면 됨. (아래 오른쪽 주황색 배경 그림)
프로퍼티의 값으로 화살표 함수를 사용하기 떄문에 this 키워드를 사용하지 않아도 됨.
이것 때문에 이 구문을 사용하는 것임.

5-1. 기존 생성자 함수와 this 사용한 코드


class Human {
  constructor() {
  	this.gender = 'male';
  }
  
  printGender () {
  	console.log(this.gender);
  }
}

-------------------------------------

class Person extends Human {  	// extends로 상속 가능
  constructor() {				// 생성자 함수.
    super();					// 상속을 받는다면 반드시 상속받은 상위 클래스의 생성자 함수를 실행해야함.
    this.name = 'JW';
    this.gender = 'female';		// 만약 이 줄을 추가한다면 제일 아래에 나온 출력값은 male이 아니라 female이 나올 것임.
  }
  
  name = 'Max;					// 프로퍼티
  call = () => {....}			// 메서드
  
  printMyName() {
    console.log(this.name);
  }

const person = new Person();	// 인스턴스 생성.
person.printMyName();			// 인스턴스의 함수 실행. >> JW 출력이 될것임.
person.printGender();			// >> male이 출력 될 것이고
}

5-2. 차세대 ES7 적용

Human 클래스에서 생성자 함수와 this 삭제
기존 메서드를 화살표 함수로 변경


class Human {  
  gender = 'male';				// 프로퍼티 바로 사용

  printGender = () => {				// 화살표 함수로 변경
  	console.log(this.gender);
  }
}

-------------------------------------

class Person extends Human {  	
  	name = 'JW';			// 상속을 받더라도 생성자 함수가 필요없으니 super(); 삭제
	gender = 'female';		// this 키워드 삭제
							
    							



  name = 'Max;					
  call = () => {....}			
  
  printMyName = () => {			// 화살표 함수로 변경
    console.log(this.name);
  }

const person = new Person();	
person.printMyName();			
person.printGender();			
}

6. 스프레드, 나머지 연산자

spread :
배열의 원소나 객체의 프로퍼티를 나누는데 사용됩니다. 그래서 배열이나 객체를 펼쳐 놓습니다. 예를 들어 oldArray가 있는데 이 oldArray배열에 있는 모든 원소들을 새로운 배열에 추가하고, 그리고 거기에 원소 1과 2를 더 추가하고 싶다면, 여기 있는 이 첫 번째 구문을 사용하게 될 것입니다.
객체의 경우도 마찬가지로 newProp과 함께 중괄호를 사용해서 새 객체를 만드는데 ...oldObject로 oldObject의 모든 프로퍼티와 값을 꺼내서 새 객체의 키 값으로 추가합니다.
참고로 만약 oldObject가 새로운 프로퍼티를 갖게 되면 여기 있는 newProp:5로 덮어쓰여질 것입니다. 그래서 우리가 갖고 있는 프로퍼티가 우선권을 갖습니다

rest :
함수의 인수 목록을 배열로 합치는데 사용됩니다. sortArgs는 매개변수를 무제한으로 받습니다. 매개변수가 몇 개이든 우리는 ...args라고 씁니다, 1개 이상의 매개변수를 갖게 되어도 모두 배열로 통합될 것입니다. 그런 다음 매개변수 목록에 배열 메소드를 적용하거나 무엇이든 원하는 편한 방법으로 매개변수를 저장할 수 있습니다

실제 예시.

7. 구조분해할당(Destructuring)

Destructuring:
디스트럭쳐링은 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 해주는데요
처음 들었을 때는 아마 스프레드 연산자와 같은 것이라고 생각할 수 있는데 사실 이 둘은 다른 것들입니다
스프레드는 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체 또는 여러분이 사용하는 어떤것에 전달함. 하지만 디스트럭쳐링은 원소나 프로퍼티를 하나만 가져와서 변수에 저장합니다.

위 그림에서 마치 배열을 새로 생성하는 것 같지만 그렇지 않습니다, 변수 a와 b에 Hello와 Max를 각각 할당했습니다

<실제코드 >
const numbers = [1,2,3];
[n1, ,n3] = numbers;
console.log(n1, n3);		// 1, 3 출력 2가 빠진 것은 중간에 빈공백이기 떄문

객체의 디스트럭쳐링:
왼쪽에 {name}를 넣고, 오른쪽 객체의 name 프로퍼티를 대상으로 합니다. 객체에서 이 age를 추출하지 않기 때문에 undefined로 나옴.

8. 참조형, 원시형 데이터 타입

값 부분에 1번에 대한 보충 설명이다. 조금 더 풀어서 이해가 가게 설명을 해보겠다.

우선 자료형은 기본형과 참조형 두가지로 나뉜다.

기본형 : 복사 할 때 원본을 그대로 복사한다.

참조형 : 복사 할 때 원본이 아닌 주소값(포인터)을 복사한다.

기본형은 number, string, boolean 이런 것들은 이 있고, 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사한다

참조형 : 객체와 배열이 있다. 값을 복사하는것이 아니라 주소값을 복사한다. 즉, 원본을 복사하는것이 아니다. 아래에 풀어서 설명하겠다.

객체 person을 생성했고 name 프로퍼티를 갖습니다, 그런 다음 secondPerson을 생성한 다음 값으로 person을 할당합니다. colsole.log로 실행하면 첫 번째 person과 같은 값을 출력하는데, 사실 객체 person을 복사한 것은 아니고, 대신 객체 person은 메모리에 저장되어 있고, 상수 person에는 메모리에 있는 주소를 가리키는 포인터를 저장합니다.
그래서 person을 secondPerson에 할당하면 포인터가 복사될 것입니다.
만약 복사된 것을 가진 다음에 person.name을 Manu로 바꾼다면 여전히Max가 출력될 거라고 생각하는데, person을 복사해서 secondPerson에 저장했기 때문에 이름이 바뀔 거라 생각합니다. 하지만 코드를 실행해 보면 name에 Manu가 출력된 것을 볼 수 있습니다, 심지어 저는 secondPerson을 출력했는데도 말이예요, 그래서 secondPerson의 이름도 바뀌었는데, 그 이유는 단지 포인터를 복사했고 person이 가리키는 메모리에 있는 동일한 객체를 가리키기 때문입니다.
그래서 person의 name을 변경하면 자동적으로 secondPerson의 이름도 바뀝니다.
그러니까 객체 자체가 바뀐거니까, 출력도 바뀌는것임.

위 그림을 아래 그림으로 해석을 해보자면,
객체 ps(person)은 메모리에 저장되고, 그 안에 프로퍼티로 name:'Max' 만 존재해.
그리고 constp1(const person)은 메모리에 저장되어있는 주소를 가리키는 포인터를 저장하잖아.
그리고 이 constp1(const person)을 복사한게 constp2(const secondPerson)이다. 그러면 객체를 복사한거라고 생각할 수도 있는데, 그게 아니야. 우리는 객체를 복사한게 아니라, 포인터를 복사한거야. 그러니까 이 둘은 다르지만, 같은곳을 바라보고 있다. 그러니까 바라보는 곳을 바꾸면(바라보고 있는 ps(person)객체를 바꾸면 이 둘의 값도 동일하게 바뀐다.)
그리고 배열도 마찬가지로 적용된다.

8-1. 객체 자체를 복사.

스프레드를 사용하면 포인터가 아닌 객체 자체를 복사할 수 있다.
따라서 console.log를 찎어보면 Manu가 아닌 Max가 나오는 걸 확인 할 수 있다.

결론은 객체와 배열이 참조형 자료형 타입이라는것.
만약 재할당 한다면, 값이 아닌 포인터를 복사하는 것이고,
포인터가 아니라 객체를 그대로 복사하고 싶다면, 새로운 객체를 생성해서 전체 객체를 복사하는 것이 아니라 프로퍼티를 복사해야 한다.

9. 배열 함수

여러가지가 있지만 map을 예로 하나만 설명하겠다.

number배열에 map()을 호출하는데 map()는 내장된 배열 메소드입니다 입력으로 함수를 받는데
여기서는 화살표 함수를 받고 있지만 일반 함수가 될 수도 있습니다.
배열의 각 원소에서 이 함수가 실행되는데, 배열의 원소인 숫자 1,2,3에서 말이죠. 그래서 결국 이 화살표 함수로 얻게 되는 것은 숫자입니다. 하지만 매개변수의 이름은 원하는 대로 결정하면 됩니다. 그리고 return 키워드를 입력해 줍니다. 이 내부함수가 수행해야 하는 작업은 사용하는 함수에 따라 달라질 것입니다.
map()함수는 예전 값을 새 값으로 반환합니다, 그래서 num*2를 반환합니다, 그리고 모든 원소들에 대해 실행했기 때문에 2,4,6을 반환하고, map()메소드는 모든 값을 새로운 배열로 반환합니다

배열 관련 함수들은 각 원소들에서 실행되는 함수들을 갖고 있으며, 차세대 자바스크립트는 아니고 일반적인 자바스크립트입니다

공식 문서에서 배열 메서드를 확인할 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Debug-Life

인생도 디버깅이 될까요? 그럼요 제가 하고 있는걸요

이전 포스트

DP - 12번일지 - Splash image delay

다음 포스트

JS 복습

<문법>

1. let const

2. 값 & 식 & 문

3. 리터럴

4. use strict

<값>

1. 타입 시스템

1.1 원시값 (Primitive)

1.2 객체 (Reference)

<식>

<문>

2. 함수

2-1. 화살표 함수

3. Exports Import

4. class

4-1.

4-2. 생성자 함수 (constructor)

5. class, attribute, method

차세대 ES7

5-1. 기존 생성자 함수와 this 사용한 코드

5-2. 차세대 ES7 적용

6. 스프레드, 나머지 연산자

7. 구조분해할당(Destructuring)

8. 참조형, 원시형 데이터 타입

8-1. 객체 자체를 복사.

9. 배열 함수

공식 문서에서 배열 메서드를 확인할 수 있다.

DP - 12번일지 - Splash image delay

JS 복습

0개의 댓글

관련 채용 정보