Java script 아마추어

What I Do/프로그래밍

Java script 아마추어

1Millisecond 2022. 11. 14. 22:55

프론트엔드 공부 및 웹을 좀 알고 싶어서 시작함.

나는 참고로 C, JAVA, Python의 기본기는 있다고 판단되어서, 나중에 내가 기억하기 쉽도록 유사하지 않는 것들 위주로 정리함.

혹시 누군가 나와 같은 사람이 있다면 아래 노트만 한번 훑으면 대충 자바 스크립트에 대한 이해가 될수 있지 않을까 생각함.

* 동영상 강의는 유튜브 강의 에서 3시간 반짜리인데 1.5배속으로 훑었음.

(언어에 대해서 빠르게 훑어주는 것 처럼 보이는 강의를 찾던 도중 적절한 길이로 생각되서 보게 되었음)

https://www.youtube.com/watch?v=adioo1lv8fs

* 강좌에 대한 내용은 https://github.com/woorim960/modern-javascript-from-amateur-to-pro/ github에 있음.

(예제들을 잘 만들어놔서 예제만 봐도 바로 무슨 의미인지 알아서 좋다.)

으... 이렇게 아마추어까지 다 봤는데, 주니어, 시니어, 프로에 대한 부분 아직 없네...ㅠㅠ 후딱 보기 좋았는데... 아쉽다.

시작

html 내에서 java script 실행을 위한 코드

...
<script scr="file.js"></script>
...

데이터 타입

원시 타입
- Number
- String
  "", '', ``(백틱)으로 감싸서~
  python의 f''와 유사하게 쓸수 있음. 단, `${}` 이렇게 달러 표시 있으니 유의.
- Boolean
- undefined
  var a;
  -> undefined
- null
  typeof null -> object
  null의 비교는 a === null
- Symbol
  ES6에서 도입 : 다른 식별자와 중복되지 않는 유일키를 만들 때? 객체 타입의 프로퍼티 키를 만들때...?? : 첨보네...
  var sym = Symbol("key");
  var sym2 = Symbol("key");
객체 타입

var obj = {};
var person = {
	name: "하이",
    age: 7,
    say: function() {
    	console.log("하이 there");
    }
}

console.log(person.name);

연산자

나눗셈은 python과 동일함. / 만하면 소수점 나옴

+"123" 이라는 형태의 string to int가 신기함

// 문자열로 감싸진 숫자의 형변환
console.log(+"123") // 123
console.log(typeof "123") // string
console.log(typeof +"123") // number

// 숫자가 아닌 문자열의 형변환
console.log(+"Hello") // NaN
console.log(typeof +"Hello") // number

// Boolean 타입의 형변환
console.log(+true) // 1
console.log(+false) // 0
console.log(typeof +true) // number
console.log(typeof +false) // number

연쇄 할당

var a = b = c = d = e = 1

연산자

비교 연산자가 다른 언어와 좀 다른게 특이함.

===와 !==와 같은 현산자가 있음.

// 동등 비교
// 숫자와 문자열의 비교
1 == '1' // true
1 != '1' // false

0 == ''; // true
0 == '0'; //true

// 일치 비교
false == 0; // true
false == '0'; // true
false == ''; // false
false == null; // false
false == undefined; // false

1 === 1; // true
1 === '1'; // false

0 === ''; // false
0 === '0'; // false

false === 0; // true
false === '0'; //false

// NaN의 비교
NaN === NaN; // false

isNaN(NaN); // true

isNaN(1); // false
isNaN("1"); // false

NaN === Nan;의 비교는 false 다ㅎㅎ

논리 연산자

피연산자가 Boolean이 아니면 boolean으로 타입 변환하고 논리 연산을 진행한 후에 결과 값을 반환함.

영상 저자가 좋은 예시를 많이 들어 놨다.

정리하면 마지막에 판단에 쓰였던 값을 리턴하는 거라 볼 수 있겠다.

&& 연산에서 선행하는 항이 false에 해당하는 그 항이 마지막에 판단된 것일 것이고,

|| 연산에서 선행하는 항이 true이면 그에 해당하는 항이 마지막에 판단된 것이다.

// 두 피연산자의 타입 변환 값이 모두 true인 경우는 뒤의 피연산자를 반환한다.
true && true; // true
true && 1; // 1
1 && true; // true
1 && 3; // 3
3 && 1; // 1
1 && 'Hello'; // 'Hello'
'Hello' && 'World'; // 'World'

// 두 피연산자의 타입 변환 값 중 하나만 true인 경우는 false인 피연산자를 반환한다.
true && false; // false
false && true; // false
1 && false; // false
1 && 0; // 0
0 && 'Hello'; // 0
null && 'woorimIT'; // null
'subscribe' && undefined; // undefined
'' && 1; // ''
NaN && 1; // NaN

// 두 피연산자의 타입 변환 값이 모두 false인 경우는 앞의 피연산자를 반환한다.
false && false; // false
false && 0; // false
0 && false; // 0
null && 0; // null
'' && undefined; // ''
NaN && ''; // NaN

유사한 예다.

// 두 피연산자의 타입 변환 값이 모두 true인 경우는 앞의 피연산자를 반환한다.
true || true; // true
true || 1; // true
1 || true; // 1
1 || 3; // 1
3 || 1; // 3
1 || 'Hello'; // 1
'Hello' || 'World'; // 'Hello'

// 두 피연산자의 타입 변환 값 중 하나만 true인 경우는 true인 피연산자를 반환한다.
true || false; // true
false || true; // true
1 || false; // 1
1 || 0; // 1
0 || 'Hello'; // Hello
null || 'woorimIT'; // woorimIT
'subscribe' || undefined; // subscribe
'' || 1; // 1
NaN || 1; // 1

// 두 피연산자의 타입 변환 값이 모두 false인 경우는 뒤의 피연산자를 반환한다.
false || false; // false
false || 0; // 0
0 || false; // false
null || 0; // 0
'' || undefined; // undefined
NaN || ''; // ''

typeof 연산자

결과는 문자열로 반환한다. ex) 'object'

제어문

블록문 / 조건문 / 반복문

python에서는 없었던 switch statement가 있음.

C, JAVA와 같은 스타일임.

for 있고, while 있음. do while 있음. (python에는 없는 그것)

반복문

for in
for of
forEach()

반복문 for in

for (변수 선언문 in 객체) {
  // 실행문
}

var object = {
  name: "철수",
  age: 20,
  height: 178,
  weight: 70
};

for (var propertyKey in object) {
  console.log(`${propertyKey}: ${object[propertyKey]}`);
}

// name: 철수
// age: 20
// height: 178
// weight: 70

참고. 아래와 같이 key라는 프로퍼티를 "값"으로 생성할 수도 있음.

배열에 추가하는게 아니라 배열이 객체이므로 배열 객체의 프로퍼티에 추가되는 것임.

그리고 배열은 숫자가 아닌 프로퍼티 키는 length에서 제외되기 때문에 5가 출력됨.

var array = ["안녕", "나는", "철수야", true, 123];
array.key = "값"; // 배열도 객체이므로 프로퍼티를 추가할 수 있다.

for (var index in array) {
    console.log(`${index}: ${array[index]}`);
}
// 0: 안녕
// 1: 나는
// 2: 철수야
// 3: true
// 4: 123
// key: 값

console.log(array.length); // 5

반복문 for of

참고. 프로퍼티는 열거되지 않으며, 배열의 요소만 열거되는 것을 알 수 있다.

var array = ["안녕", "나는", "철수야", true, 123];
array.key = "값"; // 배열도 객체이므로 프로퍼티를 추가할 수 있다.

for (var element of array) {
  console.log(element);
}

반복문 forEach

새거다 forEach 내부에 function을 줄수 있음.

프로퍼티는 열거되지 않으며, 배열의 요소 개수만큼 반복함.

// forEach는 배열이 가지고있는 메서드 중 하나이다.
배열.forEach(function (요소, 인덱스, this) {
  // 실행문
});

var array = ["안녕", "나는", "철수야", true, 123];
array.key = "값"; // 배열도 객체이므로 프로퍼티를 추가할 수 있다.

array.forEach(function (element, index, arr) {
  console.log(`요소: ${element}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`);
});

// 요소: 안녕, 인덱스: 0, this: ["안녕","나는","철수야",true,123]
// 요소: 나는, 인덱스: 1, this: ["안녕","나는","철수야",true,123]
// 요소: 철수야, 인덱스: 2, this: ["안녕","나는","철수야",true,123]
// 요소: true, 인덱스: 3, this: ["안녕","나는","철수야",true,123]
// 요소: 123, 인덱스: 4, this: ["안녕","나는","철수야",true,123]

array.forEach( (e) => {
	console.log(e);
});

자바의 람다식과 같은거 같음

참고. prompt()

prompt(); // 웹 브라우저에서 입력 받음.ㅎㅎ

타입 변환

암묵적 타입 변환

java script에서의 implicit type convertion은 각 언어별로 꼭 기억해야할 포인트임.

5 + true; // 6

// 암묵적 타입 변환 예시
// 문자열로 변환
1 + '1'; // "11"
-1 + ''; // "-1"
NaN + ''; // "NaN"
Infinity + ''; // "Infinity"

// 숫자로 변환
+'0'; // 0
+'1'; // 1
+'string'; // NaN

명시적 타입 변환

// 명시적 타입 변환 예시
// 문자열로 변환
String(1); // "1"
true.toString(); // 'true'

// 숫자로 변환
Number('135.12'); // 135.12
Number('Hello'); // NaN
Number(true); // 1
parseInt('123'); // 123
10 - '5'; // 5
10 * '5'; // 50
10 / '2'; // 5
2 % '5'; // 2

객체

프로퍼티의 집합. 자바스크립트의 함수는 "일급 객체"???? 일급 객체란 말이 뭐지? ㅎㅎ

일반 객체지향 언어와 같은 class도 도입되었지만 조금 다름.

다양한 객체 생성 방법

// 객체 리터럴
var obj = {}

// Object 생성자 함수
var person = new Object();

// 생성자 함수
function Person(name) {
    this.name = name;
}
var john = new Person('john');
var jane = new Person('jane');

// Object.create 메소드
var person = Object.create(Object.prototype);

// 클래스 (ES6 도입)
class Person {
	constructor(name) {
    	this.name = name;
    }
    say() {
        console.log("하이");
    }
}
var john = new Person('john');

프로퍼티와 메소드

프로퍼티의 키는 모든 문자열로 가능

var person = {
  firstName: '철수',
  'last-name': '김' // 식별자 네이밍 규칙을 따르지 않을 경우 문자열로 선언해야한다.
};
console.log(person); // { firstName: '철수', 'last-name': '김' }

변수를 프로퍼티 키로 사용할 수 있음.

변수임을 알리기 위해서 [ 와 ]로 묶어주는 것으로 보임. (묶지 않으면 변수명으로 그냥 프로퍼티 키가 되어 버리니..)

// 빈 문자열
var person = {
  '': "Hello World"
};
console.log(person); // { '': 'Hello World' }
console.log(person['']); // Hello World

// 암묵적 타입 변환
var person = {
  1: "숫자!",
  true: "불리언!",
  undefined: "undefined!",
  null: "null!",
  우리밋: "우리밋"
};
console.log(person); // { '1': '숫자!', true: '불리언!', undefined: 'undefined!', null: 'null!', '우리밋': '우리밋' }
console.log(person["1"]); // 숫자!
console.log(person["true"]); // 불리언!
console.log(person["undefined"]); // undefined!
console.log(person["null"]); // null!
console.log(person["우리밋"]); // 우리밋!

// 변수 프로퍼티 키 
var key1 = 'name';
var key2 = 'age';

var person = {
  [key1]: '철수'
};
person[key2] = 20;

console.log(person); // { name: '철수', age: 20 }
console.log(person[key1]); // '철수'
console.log(person['name']); // '철수'
console.log(person[key2]); // 20
console.log(person['age']); // 20

함수

python과 동일하게 return type에 대해서는 정의하지 않음.

python 처럼 여러개의 값을 return 할 수 있지는 않음.

함수의 종류

함수 리터럴
Function 생성자 함수
ES6 화살표 함수
즉시 실행 함수
재귀 함수
중첩 함수
콜백 함수
순수 함수와 비순수 함수

아마추어편에서는 안해준다네...ㅠㅠ

arguments

새로운 것!!!

// arguments를 이용한 최적화
function add() {
  return Array.from(arguments).reduce((acc, con) => acc + con);
}
add(1, 2, 3, 4, 5, 6); // 21

// "나머지 매개변수"를 이용한 최적화
function add(...numbers) {
  return numbers.reduce((acc, con) => acc + con);
}
add(1, 2, 3, 4, 5, 6); // 21

// 배열 객체를 이용한 최적화
function add(numbers) {
  return numbers.reduce((acc, con) => acc + con);
}
add([1, 2, 3, 4, 5, 6]); // 21

배열

배열 리터럴

var array = [1, 2, "한글"];

참고. typeof array => 'object'

Array 생성자 함수

var array = new Array(1,2,3);

요소 접근, 추가, 수정, 삭제

var numbers = [5, 6, 7];
numbers[2]; // 7

// 존재하지 않는 인덱스에 접근하여 값을 할당하면 새로운 요소를 추가 할 수 있다.
numbers[3] = 10;
console.log(numbers); // [5, 6, 7, 10]

numbers[2] = 1;
console.log(numbers); // [5, 6, 1, 10]

// 삭제
delete numbers[1];
console.log(numbers); // [ 5, <1 empty item>, 7 ]
// 배열의 길이에는 영향을 주지 않는다.
console.log(numbers.length); // 3

삭제

var numbers = [0, 1, 2, 3, 4, 5, 6, 7];

// numbers[3]부터 4개를 삭제한다.
numbers.splice(3, 4);
console.log(numbers); // [ 0, 1, 2, 7 ]

// 배열의 개수에 영향을 미친다.
console.log(numbers.length); // 4

밀집 배열 / 희소 배열

java script는 희소배열, empty가 있음

'What I Do > 프로그래밍' 카테고리의 다른 글

keras에서 layer의 weight를 업데이트하지 않고 고정하기 (0)	2023.01.26
grep을 쓰다 보면 매칭된 부분의 위, 아래 몇 줄을 더 보고 싶을 때가 있다. (0)	2023.01.17
ValueError: too many values to unpack (expected 2) request.post(data=params) (0)	2023.01.17
pandas] DataFrame vs. Series (0)	2023.01.17

현재글Java script 아마추어

데이트, 유니스트, 파이썬, 강릉 여행, python, 베트남 여행, 다낭, 맛집, 동화가든, 속초 여행, 맥북, JMT, 가성비, 베트남, 구영리, 내돈내산, 내돈내산 리뷰, ubuntu, 호이안, 인스타맛집,

Today :
Yesterday :

오늘, 기록