JavaScript-Basic

Basic Javascript

Word count: 1.1kReading time: 7 min

 2023/02/07   Share

왜?

회사에서 react를 하게되었다.

javascript

참고

https://ko.javascript.info/

시작

let, const, var

var는 쓰지말자(호이스팅문제, 전역변수문제, 변수설정안해도 할당되는문제 등등)

let : 동적 값 할당

const: 정적 값 할당

자료형

기본적으로 값을 할당할때 뭘하냐에 따라 타입 typeof 가 바뀜

숫자형
BigInt형
문자형
boolen형
null형(empth나 nothing나 unknown나타냄)
undefined형(변수선언했지만 값할당안함)
Object형(복잡한 개체를 표현가능)
symbol형(unique identifier)

원시형

원시형 값입니다.
원시형의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined형으로 총 일곱 가지 입니다.

객체

프로퍼티에 다양한 종류의 값을 저장할 수 있습니다.
{name : "John", age : 30}와 같이 대괄호 {}를 사용해 만들 수 있습니다. 자바스크립트에는 여러 종류의 객체가 있는데, 함수도 객체의 일종입니다.

${ }

let name = "John"

alert(`Hello, ${name}!`); // 변수사용하여 반환됨

alert(`the result is ${1+2}`); // 계산되어 3출력됨.

${…} 안에는 name 같은 변수나 1 + 2 같은 수학 관련 표현식을 넣을 수 있습니다. 물론 더 복잡한 표현식도 넣을 수 있죠. 무엇이든 들어갈 수 있습니다. 이렇게 문자열 중간에 들어간 변수나 표현식은 평가가 끝난 후 문자열의 일부가 됩니다.

반드시 백틱() 안에서 변수 참조를 해야한다.

alert, prompt, confirm

Object

java의 hashmap과같다.
따라서 key는 반드시 문자열이다.
new Object() 또는 { }로 객체 생성해줄수있다.

let obj = new Object();
obj.first = "wss";
obj.second = {
    name: 'carrot',
    num: 23
}

console.log(obj.first, obj.second.name, obj.second.num)

>>>hello ssss
testjs.js:3
true
testjs.js:4
wss carrot 23

다음과 같이 활용한다.

객체 프로토타입과 프로토타입의 인스턴스 생성

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 객체를 정의합니다.
var you = new Person('You', 24);
// "You"라는 이름의 24세인 새로운 사람을 생성 중입니다.

console.log(you, you.name, you.age, you["name"] , you["age"])

원시타입은 당연히 값을가지지만 원시타입이 아닌 객체는 참조에 의해 복사됨.→ 즉 참조값만 갖고있다.

메서드와 this

객체 프로퍼티에 함수를 만들고 할당할수있다. 객체 프로퍼티에 할당된 함수를 method라고한다.

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHi = function (){
        return  this.name;
    }
}
let you = new Person("sw", 42);
console.log(you.sayHi());

this는 현재 객체로 접근할수있다.

응용으로 다음과같이 this는 객체를 가르킨다

참고로 this는 객체에 할당안해도 동작은 한다. 전역 객체를 참조하기떄문이다.

js는 런타임에 this를 결정한다.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

new

잠깐! 모든 함수는 생성자 함수가 될 수 있다는 점을 잊지 마시기 바랍니다.

new를 붙여 실행한다면 어떤 함수라도 위에 언급된 알고리즘이 실행됩니다. 이름의 ‘첫 글자가 대문자’인 함수는 new 를 붙여 실행해야 한다는 점도 잊지 마세요. 공동의 약속이니까요.

형 변환

https://ko.javascript.info/type-conversions

화살표 함수

// 매개변수가 없는 경우
var foo = () => console.log('bar');
foo(); // bar

// 매개변수가 하나인 경우
var foo = x => x;
foo('bar'); // bar

// 매개변수가 여려개인 경우
var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다.
foo(1, 2); // 3

var foo = (a, b) => { return a + b };
foo(1, 2); // 3

var foo = (a, b) => { a + b }; // "{}"를 사용했는데 return이 없을 때
foo(1, 2); // undefined

var foo = (a, b) => { // 여러줄 썼을 때
	var c = 3;
	return a + b + c;
}
foo(1, 2, 3) // 6
/*
"{}"를 사용하면 값을 반환할 때 return을 사용해야합니다.
"{}"를 사용하지 않으면 undefied를 반환합니다.
"{}"을 사용할 때는 여러줄을 썼을 때 사용합니다.
*/

// 객체를 반환할 때
var foo = () => ( { a: 1, b: 2, c: 3 } );
foo(); // { a: 1, b: 2, c: 3 };

… 구문 표현

“Javascript … 문법

const numbers = [1, 2, 3, 4, 5];
const copyNumbers = [...numbers];

var { a1, a2, ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
console.log(a1); // 10
console.log(a2); // 20
console.log(rest_a); // { a3: 30, a4: 40 }

복사의 개념으로도 사용할 수 있다. numbers 를 바로 대입하는 것과는 달리 위 코드는 각각의 값이 복사된 전혀 새로운 객체가 할당된다.

깊은 복사

const user = {
    name: '배진오',
    age: 24,
};
console.log({
    age: 99,
    ...user,
});

이런식으로 한다면, …기준에서 덮어써진다.

기본연산자와 수학

비교연산자

if 와 ?이용한 처리(삼항 연산자)

‘물음표(question mark) 연산자’라고도 불리는 ‘조건부(conditional) 연산자’를 사용하면 위 예시를 더 짧고 간결하게 변형할 수 있습니다.

조건부 연산자는 물음표?로 표시합니다. 피연산자가 세 개이기 때문에 조건부 연산자를 ‘삼항(ternary) 연산자’

1	let result = condition ? value1 : value2;

평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환됩니다.

물음표 연산자? 를 여러 개 연결하면 복수의 조건을 처리할 수 있습니다.

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

논리연산자

while 문과 for

함수

함수는 어떤 동작 을 수행하기 위한 코드를 모아놓은 것입니다. 따라서 함수의 이름은 대개 동사입니다. 함수 이름은 가능한 한 간결하고 명확해야 합니다. 함수가 어떤 동작을 하는지 설명할 수 있어야 하죠

콜백함수

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

함수 ask의 인수, showOk와 showCancel은 *콜백 함수* 또는 *콜백*이라고 불립니다.

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 “나중에 호출(called back)”하는 것이 콜백 함수의 개념입니다. 위 예시에선 사용자가 “yes”라고 대답한 경우 showOk 가 콜백이 되고, “no”라고 대답한 경우 showCancel 가 콜백이 됩니다.

함수 표현식 vs 함수 선언문

함수 표현식과 선언문의 차이에 대해 알아봅시다.

첫 번째는 문법입니다. 코드를 통해 어떤 차이가 있는지 살펴봅시다.

함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다.
1
2
3
4
// 함수 선언문
function sum(a, b) {
return a + b;
}
함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었습니다.
1
2
3
4
// 함수 표현식
let sum = function(a, b) {
return a + b;
};

두 번째 차이는 자바스크립트 엔진이 언제 함수를 생성하는지에 있습니다.

함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있습니다.

위 예시를 이용해 설명해 보도록 하겠습니다. 스크립트가 실행되고, 실행 흐름이 let sum = function…의 우측(함수 표현식)에 도달 했을때 함수가 생성됩니다. 이때 이후부터 해당 함수를 사용(할당, 호출 등)할 수 있습니다.

하지만 함수 선언문은 조금 다릅니다.

함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있습니다.

세 번째 차이점은, 스코프입니다.

엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있습니다. 하지만 블록 밖에서는 함수에 접근하지 못합니다.

선언문은 코드 블록안에서만 유효

함수 표현식은 할당되는 스크립트 이후에는 사용가능

Next Post

SpringMVC2-CH01(스프링 thymeleaf)
Previous Post

Html-JQuery

