✔ LikeLion Core Curriculum React PGL 준비의 일환으로 Coding Angma 자바스크립트 기초 강좌를 수강하며 정리한 내용이다.
Coding Angma JavaScript Basic 100min >
웹 사이트 구성 요소
- HTML(Hyper Text Markup Language) : 웹사이트의 뼈대를 맡는다.
- CSS(Cascading Style Sheet) : 웹사이트의 디자인을 맡는다.
- JS(Java Script) : 크로스플랫폼(Cross Platform, 여러 종류의 플랫폼에서 동작)이며, 객체지향스크립트언어로 웹사이트의 동작을 담당한다.
변수 Variable
name = "Mike";
age = 30;
// 세미콜론을 생략가능하지만 붙이도록하자.변수명 선언 규칙.
- 변수명으로는 문자, 숫자, $, _ 만 사용할 수 있다.
- 첫글자는 숫자가 올 수 없다.
- 예약어는 변수명으로 사용이 불가능하다.
- 상수명은 관례상 대문자로 표기하도록한다.
- 변수명은 이해하기 쉽도록 선언하자.
출력 함수
- alert() : 경고창을 띄우는 함수
- console.log() : 콘솔창에 출력하는 함수
- prompt(text, default value) : 창을 띄워 값을 입력받는 함수.
- confirm() : 창을 띄워 확인받는 함수. 확인은 true, 취소는 false 를 반환한다.
기본 창을 띄워 출력하는 함수들은 사용이 매우 쉽고 간편하다는 장점이있지만, 동작시에 사용자가 액션을 취할 때 까지 스크립트가 일시정지된다는 것과 스타일링이 불가능하다는 단점이 있다.
선언
- let : 유일한 변수 선언. 기존에 한 번 선언된 변수명을 let으로 다시 선언하는 경우 에러. 값 자체는 변경 가능하며, let을 사용하지 않고 값을 변경해주면 된다.
- const : 절대 바뀌지 않는 상수 값을 선언할때 이용하며, 따라서 구분에 용이하도록 주로 대문자로 작성한다. Tip : 처음에는 모든 변수를 const로, 그리고 값의 변화가 필요한 변수만 let을 이용하여 선언하도록 하자.
자동 형변환
자바스크립트에도 자동형변환이 존재하며 이는 뜻하지 않은 오류를 일으킬 수 있으므로 유의하도록 한다.
명시적 형변환
자동형변환으로 인한 오류를 피하기 위해서, 더 이해하기 쉬운 코드를 위해서 명시적 형 변환이 필요하다. (특히 prompt를 통해서 입력받은 값은 문자형이기 때문에 숫자 값 등을 입력받을때에도 많이 사용된다.)
- string() : 문자형으로 변환
- Number() : 숫자형으로 변환
- Number(“text”) -> NaN
- Number(true) -> 1
- Number(false, null) -> 0
- Number(undefined) -> NaN
- Boolean() : 논리형으로 변환 + Boolean(Everything) -> true + Boolean(0, “”, null, undefined, NaN) -> false
비교연산자
- == 동등연산자 : 값만 비교한다. 1 == “1”
- === 일치연산자 : 타입까지 비교한다. 1 != “1”
&& AND
|| OR
! NOT
조건문
if( 조건1 ) {
code;
} else if( 조건2 ) {
code;
} else {
code;
}반복문
- for문 주로 사용되는 반복문이다.
for (선언; 조건; 증감){
code;
}
- do-while문 적어도 1회 코드가 실행된다는 차이가 있다.
do {
code;
} while (
조건
)
분기분
- break : 반복을 멈추고 반복문 자체를 빠져나온다.
- continue : 이번 반복을 멈추고 다음 반복으로 넘어간다.
switch case
switch(평가){
case A :
// A일때 코드
break; // break를 붙여주지 않으면 case A는 아래 경우의 코드까지 모두 실행하므로 꼭 넣기.
case B :
// B일때 코드
break;
case C :
// B일때 코드
break;
default :
// default 코드
}
함수 선언문
function funcName(parm1, parm2, parm3...){
console.log(`Hello, ${변수 또는 식}`);
// javascript의 fstring과 유사한 문법을 가지고 있다.
}
지역변수 존재. 함수 내에서 선언한 변수는 함수 내에서만 사용할 수 있다. let을 이용해서 동일한 변수명을 가진 변수 선언이 불가하다고 하였으나, 함수 내에서 지역변수로의 선언은 오류를 일으키지 않는다(전역변수와 지역변수 서로 간섭하지 않음)
자바스크립트만의 강력한 OR(||) Operator
자바스크립트의 OR 연산은 “첫 번째 TRUTH를 찾고 원래 값을 반환”한다.
OR 연산 자체는 가장 왼쪽부터 오른쪽 순서로 피연산자를 boolean 형으로 변환한 후 평가하고 결과를 반환하는 것이 기본이다. 여기에서 자바스크립트는 반환시 boolean으로 변환하기 전 형태를 반환하는데 이는 다음과 같이 사용할 수 있다.
function sayHello(name){
let newName = name || 'friend';
}
위의 코드에서 ||연산자는 name을 먼저 평하가여 참(입력)일 경우 해당 값을 반환, 거짓(undefined, 미입력)일 경우 그 다음 값인 ‘friend’(true)를 평가하여 ‘friend’를 리턴하게 된다.
결과적으로 미입력시 ‘friend’를 default값으로 가져가는 코드가 되는 것이다.
return
모든 함수는 return을 통해 별도로 지정하지 않아도 undefined를 default로 반환한다.
return문은 실행 즉시 오른쪽의 값을 반환하고 종료하기 때문에 함수 종료 목적으로도 사용된다.
힘수 TIP
- 하나의 함수가 한 작업만 실행할 수 있도록 쪼개어 사용하기.
- 변수 명과 마찬가지로 읽기 쉽고 어떠한 기능을 하는지 예측할 수 있는 이름 짓기.
함수 표현식
이름이 없는 함수를 만들고 변수에 해당 함수를 할당한다. 사용하는 방식은 함수 선언문과 동일하지만, 차이점은 호출할 수 있는 타이밍이다.
javascript는 인터프리터언어(위에서 한 줄씩 순차적으로 실행되는 언어)이지만, 함수 선언문은 어디에서나 호출 가능하다. 이는 Hoisting 때문인데,
Hoisting : javascript는 초기화 단계에서 코드 내 선언된 함수를 찾아 생성해둔다.
함수표현식은 이렇게 실행되지 않는다. 코드가 한 줄씩 실행되며 해당 표현식에 도달하여야 함수가 생성된다.
화살표함수(arrow function)
화살표 함수는 ES6이후 활발하게 이용되고 있다.
const name = (parm1, parm2) => {
code;
return value;
}
const name = parm1 => value
const name = () => (value)파라미터가 하나일 경우 괄호 생략 가능.
코드 없이 리턴문만 있을경우 소괄호 이용 가능
리턴문이 한줄이라면 소괄호마저 생략 가능
변수 없을 경우 괄호 생략 불가능.
객체(Object)
const objectName = {
key1 = value1,
key2 = value2, //마지막 줄에도 쉼표 넣는게 코드 작성 및 수정에 용이.
...
}점이나 대괄호를 이용하여 접근 및 추가 가능하다.
// 접근
object1.key1;
object1['key1'];
// 추가
object1.key1=value1;
object1['key1']=value1;
//삭제
delete object1.key1;
{
name : name,
age : age,
hobby : 'football',
}
//위 코드는 아래와 같이 축약하여 사용가능하다.
{
name,
age,
hobby : 'football'
}
property1 in Object1
// property가 Object내에 존재하는지 확인 가능한 in
if(!('age' in user)||user.age<20>)
//user 객체에 'age' property가 없거나 20 미만인 경우.
for(x in Object1){
console.log(Object1[x])
}
//Object내 모든 key들의 value를 출력하는 코드
메소드(Method)
객체에 property로 할당된 함수를 말한다.
const object1 = {
fly : function(){
code;
}
}
//function 키워드 생략 가능
const object1 = {
fly(){
code;
}
}this : 현재 객체 호출
const user = {
name : 'mike',
sayHello(){
console.log(`Hello, I'm ${this.name}`);
}
}
user.sayHello();
//호출시 sayHello() 앞의 user가 this가 된다. this는 Runtime에 의해 결정.this가 포함된 함수를 선언할 때에 함수 선언문을 사용하면 정상 동작하지만 화살표함수를 사용하여 선언했다면 동작이 달라짐을 유의한다.
화살표함수는 this를 가지고 있지 않으므로, this를 외부에서 전역객체를 호출한다.
ex) 브라우저에서 전역객체는 window, Node js에서 전역객체는 global
따라서 객체 내에서 함수를 선언할때에는 화살표 함수를 사용하지 않는 것이 좋다.
배열(Array)
배열은 순서가 있는 리스트이다.
let arrayName = ['value1', 'value2', 'value3', ...];- 대괄호와 쉼표를 사용해 나타내고, 각 순서는 Index라는 고유 번호를 통해 관리되며, 0부터 시작한다.
- 배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등이 포함될 수 있으며 하나의 배열 자료형이 통일되지 않아도 된다.
- array.length : 배열의 길이
- push() : 배열 제일 뒤에 요소를 추가
- pop() : 배열 끝 요소 제거
- shift() : 배열 맨 앞 요소 제거
- unshift() : 배열 맨앞에 요소를 추가 *push 와 unshift는 여러 요소를 한 번에 추가할 수 있다.
for(let value of array){
code;
}
// for ~ of 구문은 배열 내를 돌며 사용하는 대표적인 구문.
// index를 사용한 기본적인 for문으로 활용했을 때 보다 간단하지만 index를 얻을 수 없는 것이 단점이다.