JavaScript

LeeSeungEun·2023년 5월 9일

목록 보기

5/5

1. 개념

소프트웨어를 작성하기 위한 프로그래밍 언어

프로그래밍 : 프로그래밍 언어를 이용해 구체적인 컴퓨터 프로그램으로 구현하는 기술

개발자 -> 코드작성(고급언어) -> 컴파일러 -> 기계어( 저급언어) -> 컴퓨터

고급 언어 : 사람이 사용하는 프로그래밍 언어

저급 언어 : 컴퓨터가 이해하기 쉬운 프로그래밍 언어 ( 0과 1로만 이루어진 이진수 형태)

2. 문법

A. 값(Value)

더 이상 평가될 수 없는 하나의 식으로 자료형을 간단한 이루는 값

자료형 : 1(숫자) / 'A'(문자) / True(불리언(논리)) / 'ABC'(문자열)

a. 숫자열

JS는 부동소수점 숫자를 사용하고 있고 IEEE754(표준)을 이용

정수 (Integer)
- 자바스크립트에는 부동소수점(IEEE-754) 숫자만 존재
- 정수를 저장하는 2가지 방법
  1. 10진 소수가 없는 작은 숫자는 정수로 오래 유지 (예. 31비트)
  2. 비트 연산자를 이용 32비트 정수로 바꿔 반환
  - parseInt 함수 (정수로 변환) ✏️
- 소수점을 다루는 방법
```
//가장 가까운 정수로 내림
console.log(Math.floor(4.2)) // Result : 4

//가장 가까운 정수로 올림
console.log(Math.ceil(4.9)) // Result : 5

// 가장 가까운 정수로 반올림
console.log(Math.round(4.6)) // Result : 5
```
Infinity
- 너무 크거나 작다
- 지수 1023까지만 허용
- 오류는 아님
- Number.MAX_VALUE : 자바스크립트가 표현할 수 있는 제일 큰 양의 숫자 값 (1.7976931348623157e+308)
- Number.MAX_SAFE_INTEGER : 자바스크립트가 표현할 수 있는 제일 안전한 정수값 (9007199254740991)
Bigint
- number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53-1보다 큰 정수를 표현
- Number로 표현했을 때 Infinity가 되는 아주 큰 값도 BigInt로 정수 형태를 잃지 않고 표현할 수 있다
- 연산 시 Number 와 함께 연산할 수 없고, BigInt끼리만 연산할 수 있다
- BigInt의 연산을 위해서는 같은 자료형으로 변환해야 하며, BigInt가 Number로 바뀌면 정확성을 잃을 수 있다.
- max, min, abs등 Math 객체의 메서드를 사용할 수 없다.
```
const test = 9007199254740991n; // Result : 9007199254740991n
const test1 = BigInt(9007199254740991); // Result : 9007199254740991n  
```
Not a Number
- 숫자로 읽어낼 수 없다
- 잘못된 계산 결과식
- 정의 할 수 없는 결과식
- 문자열이 포함된 계산식 (덧셈 제외)

// 느슨하게 검사
isNaN({}); // Result : true
isNaN('문자열') // Result : true 

// ES2015+ (엄격하게 검사)
Number.isNaN({}); // Result : false
Number.isNaN('문자열'); // Result : false

* isNaN 보다 Number.isNaN 사용하는 것이 더 신뢰성이 있음

b. 문자열

mdn string 검색

종류

// 기본 : '', "", ``
const singleQuote = '1';
const doubleQuote = "2";
const empty = '';

// ES2015+
const backQoute = `3`;

// `` 의 경우 개행을 나타낼 때 사용

const backQoute1 = `1
2
3
4`;

console.log(backQoute1); 
// Result : 
1
2
3
4

ex1) \n을 통해 개행
function gen(name) {
  return '안녕하세요\n' + name + '님 반갑습니다';
}
console.log(gen('hello'))
ex2) ES2015+ `를 이용하여 개행 (안전)
function gen1(name) {
  return `안녕하세요
  ${name}
  님 반갑습니다`;
}
console.log(gen1('hello'))```

문자열과 배열

const world1 = 'HELLO, WORLD'.split(',');
console.log(world1) // Result : ['HELLO', ' WORLD']

const world2 = ['HE', 'LLO', 'WO', 'RLD'].join(',')
console.log(world2) // Result : HE,LLO,WO,RLD

const world3 = 'HELLO, WORLD';
console.log([...world3]); // Result : ['H', 'E', 'L', 'L', 'O', ',', ' ', 'W', 'O', 'R', 'L', 'D']

B. 변수(Variable)

다양한 값을 담을 수 있는 박스와 같은 컨테이너
값이 저장된 메모리 주소와 이름을 연결함
그 주소의 별칭

언어(변수명) <- = (할당연산자) <- 'JavaScript' 값
ex) const 언어 = 'JavaScript'

// 추천
// 선언과 동시에 할당

//선언
let lang;

//할당
lang = 'JS'

//재할당
lang = ='JS'

// 선언과 동시에 할당
const lang = 'JavaScript'

//복합 할당 연산자
//let이라는 키워드에 변수를 선언하고 count 이름을 매긴후 0이라는 문자열을 할당
leg count = 0;
count = count +1;

C. 식 (Expressin)

값을 만들어내는 표현식
값 자체도 식으로 인정하는 값 식
연산자를 포함하는 연산식

1(값식) +(연산자) 1(값식)

D. 연산자 (Operator)

값의 연산을 위해 사용되는 부호
연산의 대상이 되는 피연산자
연산을 부호로 표현하는 연산자

a. 비교 연산자

== : 느슨한 비교
=== : 염격한 비교
* 엄격한 비교를 사용 할 것

b. 산술 연산자

증가

x = x + 1; // Result : 2
x++; // Result : 2

감소

x = x - 1; // Result : 2
x--; // Result : 2

연산자 우선 순위 : 괄호를 사용하여 명확하게 표기 하기
3 + 10 2; // Result : 23
3 + (10 2); // Result : 23
(3 + 10) * 2; // Result : 26

c. AND / OR / NOT 연산자

AND 연산자 (&&)
- 모두 다 참일 때만 true/그 외에는 false 반환

var a1 = true && true; // t && t returns true
var a2 = true && false; // t && f returns false
var a3 = false && true; // f && t returns false
var a4 = false && 3 == 4; // f && f returns false
var a5 = "Cat" && "Dog"; // t && t returns Dog
var a6 = false && "Cat"; // f && t returns false
var a7 = "Cat" && false; // t && f returns false

OR 연산자(||)
- 하나라도 참이면 true/그 외에는 false 반환

var o1 = true || true; // t || t returns true
var o2 = false || true; // f || t returns true
var o3 = true || false; // t || f returns true
var o4 = false || 3 == 4; // f || f returns false
var o5 = "Cat" || "Dog"; // t || t returns Cat
var o6 = false || "Cat"; // f || t returns Cat
var o7 = "Cat" || false; // t || f returns Cat

NOT 연산자(!)
- 값을 반대로 반환

var n1 = !true; // !t returns false
var n2 = !false; // !f returns true
var n3 = !"Cat"; // !t returns false

ex1) // 나이가 20살
const age = 20
const genderType = 'GIRL'

const isAdult = age > 19
const isGirl = genderType === 'GIRL'

if (isAdult && isGirl) {
  console.log('나는 성인이다!'); // Result : 나는 성인이다 !
}

// 동일 식
if (isAdult) {
  if (isGirl){
    console.log('나는 성인이다!'); // Result : 나는 성인이다 !
  }
}

ex2) // 나이가 17살
const age = 17
const genderType = 'GIRL'

const isAdult = age > 19
const isGirl = genderType ==='GIRL'

// 17살로 isAdult가 false라서 false === false 로 출력
if (isAdult === false) {
  console.log('나는 성인이 아니다!'); // Result : 나는 성인이 아니다 !
}

//간소화
if (!isAdult) {
  console.log('나는 성인이 아니다!'); // Result : 나는 성인이 아니다 !
}

// !isAdult가 true라서 || 연산자에 의해 결과 출력
if (!isAdult || isGirl) {
  console.log('여학생이다'); // Result : 여학생이다
}

ex1) || 연산자 미사용
function getName(firstName, lastName){
  const fname = firstName === undefined ? '성 없음' : firstName;
  const lname = lastName === undefined ? '이름 없음' : lastName;
  
  return '저는' + fName + ' ' + lName + '입니다';
}

console.log(getName('장', )); 저는 장 이름 없음입니다

ex2) || 연산자 사용
function getName(firstName, lastName){
  const fname = firstName || '성 없음'
  const lname = lastName || '이름 없음'
  
  console.log(!!undefined) // Result : false
  console.log(!!'이름 없음'); // Result : true
  
  return '저는' + fName + ' ' + lName + '입니다';
}

console.log(getName('장', )); 저는 장 이름 없음입니다

d. 삼항 연산자

3개의 피연산자, 조건 연산자

//삼항 연산자와 if 문의 차이는 삼항 연산자에는 값식문 중 값과 식만 가능 , 문(함수)는 불가능
const val = (조건) ? 참일때 : 거짓일때

let val2;
if (조건) {
    val2 = 참일때;
} else {
    val2 = 거짓일때;
}

e. 비교 연산자

(대상) (비교연산자) (비교할 값) 이 순서로 사용하는 것이 용이

ex)
const aaa = {};
const bbb = [];
const ccc = function () {};

// instanceof : 객체의 instance 확인 할 때 사용 
console.log(aaa instanceof Object); // Reulst : true
console.log(bbb instanceof Array); // Reulst : true
console.log(ccc instanceof Function); // Reulst : true

// 객체의 최상위인 object로 비교하면 다 true가 나오긴 함
console.log(aaa instanceof Object); // Reulst : true
console.log(bbb instanceof Object); // Reulst : true
console.log(ccc instanceof Object); // Reulst : true
console.log(undefined instanceof Object); // Reulst : false
console.log(null instanceof Object); // Reulst : false

* typeof null; // Result : object (JS 초기 설계 오류지만 수정 없이 이렇게 쓰기로 결정)
* null instanceof Object; // Result : false

f. 기타연산자

쉼표 연산자(,,,)

가장 오른쪽 값을 출력함

* ex) console.log((123456, 'ABC', false)); // Result : false

void 연산자

표현식을 평가하고 undefined를 출력 / 표현식 결과를 버릴 때 사용

console.log(void 1); // Result : undefined
console.log(void 0); // Result : undefined
console.log(void 10 + 10); // Result : NaN ( (void 10) + 10 으로 묶여있음)

E. 문(Statement)

특정 작업을 위한 명령으로 프로그래밍의 흐름을 제어

조건문 (if)

if(식) {
  참일때 실행
} else {
  거짓일때 실행
}

반복문 (for, while)

  //for (초기화; 평가(참 => 실행, 거짓 => 다음으로); 매번 실행되는 평가식)

  for(식; 식; 식) {
    두번째 식의 결과가 참일때 실행
  }

ex1)
const array = [1, 2, 3]
for (let i = 0; i < array.length; i++) {
    console.log(array[i]); // Result : 1, 2, 3
}

if (array.length === 3) {
    for (let i = 0; i < array.length; i++) {
        if (array[i] === 1) {
            console.log(array[i]); // Result : 1
        }
    }
}

while
```
while(식) {
  참일때만 실행
}
```

F. 함수 (Function)

특정 일을 처리하는 코드 묶음

function func(num) {
	if (10 > num) {
		return 'Hello';
	}
}

console.log(func(1)); // Result : Hello

a. 일반적인 함수 선언문

function func(param1, param2) {
    return param1 + param2

}

//ex1과 2와 같이 순서 변경 시 마지막에 선언 된 함수가 호출됨 (위험)

ex1)
function func(param1, param2) {
    return param1 + param2

}

function func() {
    return 'param1 + param2';

}

console.log(func()); // Result : param1 + param2

ex2)

function func() {
    return 'param1' + 'param2';

}

function func(param1, param2) {
    return param1 + param2

}



console.log(func()); // Result : NaN

// 따라서 아래 방법 추천

b. 기명 함수 표현식

const func = function func() {
    return 'func'
}

console.log(func()) // Result : func

c. 익명 함수 표현식 (추천, 중복선언 방지 할 수 있음)

const func = function() {
    return 'func';
}

console.log(func()) // Result : func

d. Method 함수

일종의 객체의 perperty의 value가 함수일 때 이 함수는 method를 뜻함)

const obj = {
    prop : function() {

    }
}

e. 생성자 함수

이 생성자 함수는 특정 instance를 만들어 낼 수 있다는 함수
일반적인 convetion 으로 파스칼 케이스라고 해서 대문자로 시작하는 낙타케이스 방법을 사용함

function name() {

}

f. 화살표 함수

(ES2015+, ES6)
간단하게 표기 가능(모두 동일 식)
this 등 작동방식이 다름
그러나 화살표 함수에는 argument라는 객체가 없음

const arrowFunc = () --> '문자열'

function name() {
    return '문자열'
}

매개변수와 인자 다루기 다시 듣기 ✏️

argument

//매개 변수를 선언하지 않아도 함수 내부에 arguments를 선언하면 잘 동작함
function func4() {
    return arguments
}
console.log(func4(1)); // Result : Arguments(1) [1, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 
function func() {
    return arguments[0]
}
console.log(func(1)); // Result : 1

// 가변인자를 넘길 때 좋음, 정해지지 않은 인자를 넘겼을 때 유연하게 대처 가능
function func2() {
    return arguments[0]
}
console.log(func2(1, 2, 3)); // Result : 1

//배열이 아니기 떄문에 배열 method를 사용 불가. 따라서 배열로 형변환을 해줘야함
// 이렇게 수많은 인자들이 정해지지않은 규칙대로 막 들어올때 가변인자를 대체하기는 좋은 아규먼트 하지만 아규먼트 자체가 불안정하기 때문에 지양하는 것이 좋지만 아래와 같은 경우 유연하게 사용 가능
const func3 = function () {
    const convertArr = Array.from(arguments)
    return convertArr.reduce((prev, curr) --> prev + curr)
}
console.log(func3(1, 2, 3, 4, 5, 6, 7)); // Result : [1, 2, 3]

//화살표 함수에서는 작동 안함, 화살표 함수에는 arguments 객체가 없기 떄문

const func = () --> {
    return arguments[0]
}

console.log(func(1)); // Result : {}

rest parameter
- 나머지 매개변수는 배열로 동작가능 하기 때문에 형변환 필요없음
- 화살표 함수에서도 동작 가능
- 다른 매개변수랑 연관 지어 사용 가능
- 나머지 매개변수는 중간에 사용 불가, 항상 마지막 순서로 들어감
- 나머지 매개변수를 활용해서 가변인자를 다루는 것을 추천

ex1)
const func = (first, second, ...nums) --> {
    const convertArr = Array.from(nums);
    return convertArr.reduce((prev, curr) --> prev + curr)
}

console.log(func3(1, 2, 3, 4, 5, 6, 7)); // Result : 28

ex2)
const func = (first, second, ...nums) --> {
    console.log(first); // Result :  1
    console.log(second); // Result :  2
    console.log(Array.isArray(nums)); // Result : true

G. 객체

// 나라는 사람을 프로그래밍 언어로 표현한다면?
const withbeluga = {
	name: {
		first: 'with',
		last: 'beluga',
	},
	age: 5,
	gender: 'male',
	introduce: function () {
		return 'hello my name is withbeluga';
	},
	hobby: ['swim', 'sing'],
};

console.log(withbeluga['name']['first']); // Result : with
console.log(withbeluga.name.last); // Result : beluga
console.log(withbeluga.age); // Result : 5
console.log(withbeluga.introduce()); // Result : hello my name is withbeluga

참고
- 식별자(aka 예약어)
  - 문자열로 시작
  - 언어의 내장 예약어와 중복 피해야함

H. 배열

객체 중 하나

const arr = [1, 2, 3];
arr[0];
arr[1];
arr[2];
arr[3] = 4;
// 배열의 끝에 요소 추가
arr.push(5);
// 배열의 앞에 요소 추가
arr.unshift(8);
//배열의 끝 요소 지우기
arr.pop(5);
// 배열의 앞 요소 지우기
arr.shift(8);
// 배열의 특정 인덱스 요소 지우기 (a번째 index에서 n개 지움) (a, n)
arr.splice(2,3);

arr[9] = 10;

console.log(arr); // Result : [1, 2, …, 10]
console.log(arr[6]); // Result : undefined

// 배열에서 요소의 인덱스 찾기 (0에서 N순서)
console.log(arr.indexOf(10)); // Result : 9 (10이 존재하는 index 숫자)
console.log(arr.indexOf(6)); // Result : -1 (6이 배열에 속하지 않음)
// 배열에서 요소의 인덱스 찾기 (N에서 0순서)
console.log(arr.lastIndexOf(6)); // Result : -1 (6이 배열에 속하지 않음)
//배열에서 요소 포함 여부 확인 
console.log(arr.indexOf(10)); // Result : 9 (10이 존재하는 index 숫자)
console.log(arr.indexOf(6)); // Result : -1 (6이 배열에 속하지 않음)

배열의 length
- 배열의 개수

const arr = [1, 2, 3];

arr[9] = undefined;

console.log(arr); // Result : [1, 2, 3, …, undefined]
console.log(arr.length); // Result : 10

배열 순회

const arr = [1, 2, 3];

let i = 0;

if (i < arr.length;) {
    console.log(arr[i]);
    i++;
}

// 위의 if식과 동일
for (let i = 0; i < arr.length; i++){
    console.log(arr[i]);
}
//만약 for 문 안에 let 대신 var을 사용하면 i가 전역 변수가 되서 let을 사용해야함

let i = 0;

while (j < arr.length) {
    console.log(arr[j]); 1, 2, 3

    j = j + 1;
}

유사 배열 객체 (Array Like Object) : 배열과 비슷해보이지만 배열이 아님
arguments
nodeList

// JS에서 사용할 수 있는 배열인지 확인 하는 방법
console.log(Array.isArray(nodeList)) // Result : false

//배열로 변환 해주는 방법
const convertNodeList = Array.from(nodeList)
convertNodeList.push('oh')
console.log(convertNodeList) // Result : [li, li, li, li, li, li, 'oh!']

3. 원시 (불변, primitive) vs 객체 (레퍼런스, reference)

(원시) undefined / object / boolean / number / string / bigint / symbol

(객체) 그 외

//원시 예시1
var aaa = 'word';
aaa.toUpperCase();

console.log(aaa); // Result : world

//원시 예시2
const bool = false;

console.log(!bool); // Result : true
console.log(bool); false


//원시는 아래 예시와 같이 새롭게 담아야 변함
let bool = false;
bool = !bool;

console.log(bool); // Resutl : true

//객체 예시
const data = 'a';
const num = 0;
const boolean = true;

const arr = [data, num, boolean, 'name'];

arr[4] = 'Test';
arr[0] = '첫번째';
arr[1] = 'Second';
arr.push('마지막');
arr.unshift('첫번째 또 추가');

console.log(arr); // Result : ['첫번째 또 추가' , '첫번째' , 'Second' , true , 'name', 'Test' , '마지막']

4. 타입 변환

암시적 / 명시적 변환 있음

명시적 형변환 : Number(값) String(값) Boolean(값) Array.from()

//암시적인 형변환 
(문자열이 숫자열보다 우선이라서 string으로 변환 됨)
const result1 = 11 + '11' // Result : 1111
console.log(typeof result1)) // Result : string

const result3 = '2' * '2' // Result : 4
console.log(typeof result3) // Result : number

//명시적인 형변환 
const result1 = 11 + Number('11') // Result : 22
console.log(typeof result1) // Result : number

5. Truthy vs Falsy

// 모두 true로 출력
if (true) //boolean
if ({}) // 객체
if ([]) // 배열
if (42)  // 숫자
if ("0")  // 문자
if ("false") // 문자
if (new Date()) // 객체
if (-42) // 음수
if (12n)  bigint
if (3.14) // 실수
if (-3.14) // 실수
if (Infinity) // infinity
if (-Infinity) // infinity

// 모두 false로 출력
if (false)
if (null)
if (undefined)
if (0)
if (-0)
if (0n)
if (NaN)
if ("")

ex) null이 false이기 때문에 hello 출력 됨
if (null) {

} else {
    "Hello"
}

* undefined vs null
  * 근무 하는 회사에 맞는 rule을 사용 
    - undefined : 휴지 자체가 존재 하지 않음
    - null : 휴지를 다 쓰고 심지만 남음

6. Scope

변수 유효 범위

내부에서 외부로 접근 가능
외부에서 내부로는 접근 불가

ex1)
console.log(num); // Result : 0 (num이 내부에 있어서 찾을 수  없음)


function test() {
  var num = 123;
  
  return 'test';
}

ex2)
function test() {
	var num = 123;
	
	return num;
  }
  
  console.log(test()); // Result : 123

var => 함수 단위 유효 범위
let, const => 블럭 단위 유효 범위 (ES2015+)
- var 어디서나 접근 가능하기에 위험
- let, const 추천

//for 문에 var
var globalVal = '전역 변수';
var varVal = '함수-단위';
const constVal = '블럭-단위';

//var의 경우, 위의 식처럼 var index = 0; 로 인식 되어 아래 식에서 index를 찾을 수 있기에 값이 출력 됨
for (var index = 0; index < [0, 1, 2].length; index++) {}

function outerFunc() {
	console.log(globalVal); // Result : 전역 변수
	console.log(innerVal); // Result : innerVal is not defined (외부에서 내부로 접근 불가)

	function innerFunc() {
		var innerVal = '함수 내부 지역 변수';
		console.log(globalVal); // Result : 전역 변수
		console.log(index); // Result : 3
	}
	innerFunc();

	return num;
}

//for 문에 let
var globalVal = '전역 변수';
var varVal = '함수-단위';
const constVal = '블럭-단위';


//let의 경우, 블럭 단위로 아래 식에서 index를 찾을 수 없음
for (let = 0; index < [0, 1, 2].length; index++) {}

function outerFunc() {
	console.log(globalVal); // Result : 전역 변수

	function innerFunc() {
		var innerVal = '함수 내부 지역 변수';
		console.log(index); // Result : index is not defined
	}
	innerFunc();

	return num;
}

7. DOM (Document Object Model)

HTML이라는 문서를 JS로 모델링 한 것이 DOM
자바스크립트의 일부가 아님
node단위로 이루어져 있으며, 그 node가 tree 형태로 구조와 되어있음
* node : node는 수많은 property와 methods(객체의함수)를 가짐
HTML 태그를 DOM으로 모델링 하면 그 태그가 node로 바뀌고, 속성과 메써드를 가지게 됨

ex) 
//HTML 태그가 DOM 으로 표현되면 textcontent속성에 previouSibling(DOM의 property)를 가짐
//mark up
<li>_</li>
//DOM-property
tagName : "Li"
textcontent : "previouSibling"

DOM 선택
- Document.getElementById()
  - 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용
- Element.getElementsByClassName()
  - 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection 을 반환
- Document.getElementsByTagName()
  - 엘리먼트의 HTMLCollection 과 주어진 태그명을 반환
- Document.querySelector() (추천)
  - 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환. 일치하는 요소가 없으면 null을 반환
  - ID(#)/Class(.)/Tag name(문자열) 모두 가져올 수 있음
- Document.querySelectorAll() (추천)
  - 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환

ex)
const serchButton = document.querySelector('구글검색')

serchButton.classList.add('추가')

searchButton // Result : '구글검색추가'

8. 객체 생성 방법

// 싱글 리터럴 (literal) 객체
const object = {
    property: 'value',
    method: function () {},
}
console.log(object) // Result : {property: 'value', method: ƒ}

// 싱글 리터럴을 많이 만들어야 할 경우, 생성자 함수로 객체 생성
function NewObject(name) {
    this.name = name;
}

const newObject = new NewObject('jang') // Result() : NewObject { name: 'jang' }

//object.craeat 사용
//const newObject2 = Object.create(프로토 타입, 객체 서술자(기술자))
//*JS의 모든 객체는 프로토타입을 가지고 있음, 이 객체가 어디서부터 파생되었는지 설명이 들어 있는 객체
const newObject = new NewObject('jang');

const newObject2 = Object.create(
    Object.prototype,
    {
        name: { {value: 'jang'}
        value: 'jang',
        writable: false, // 덮어 쓸 수 있는지
        enumerable: true, // 열거가 가능한지
        configurable: true, // 객체 서술자를 수정할 수 있는지

        }
    }
)

newObject2.name = 'KIM';

console.log(newObject2); //Result : name: 'jang'

for (const key in newObject2) {
    console.log(key);
}

console.log(newObject2) // Result : {name: 'KIM'}


//객체의 key 열거 방법
const obj = {
    prop1: 'value1',
    prop2: 'value2',
    prop3: 'value3',
    prop4: 'value4',
}

const prop = 'prop'

obj.prop1
obj[prop + 1]

for (const key in obj){ // Result : {prop1: 'value1', prop2: 'value2', prop3: 'value3', prop4: 'value4',}
  console.log(key); // Result : prop1, prop2, prop3, prop4
  console.log(obj[key]); // Result : value1, value2, value3, value4
}

프로퍼티 조작

const person = {
    firstName: 'jang',
    location: 'korea',
};

// 추가
person.lastName = 'hyeonseok'
// 수정
person.lastName = 'hyeon-seoak'
// 삭제
delete person.location;


console.log(person); // Result : {firstName: 'jang', lastName: 'hyeon-seoak'}

프로퍼티 접근자
- 안전하게 프로퍼티 조작 (getter, setter)

const person = {
    _firstName: 'jang',
    location: 'korea',
    
    get firstName(){
    return this._firstName; // 같은 name 사용은 불가하므로 '_'를 통해 우회 필요
    },

    set firstName(newFirstName){
        if (typeof newFirstName === 'string'){
        this._firstName = 'undefined name';

        return;
        }
        this._firstName = newFirstName;
    },   
};



console.log(person.firstName); JANG
person.firstName = 12345; // Result : 12345

html semantic 봐보기
ex) ul>li>ul>li / ol>li

HTML(Mark UP) --> 브라우저
MD
Xlsx --> MS엑셀, 구글 스프레드시트
Docx --> MS워드, 구글 문서
PDF --> 수 많은 도구 뷰어
HWP --> 한컴

// ex1) 매개변수와 인자
// 이미 만든 매개변수를 조작을 할 수 없음, 순서가 중요
function func(p1, p2, p3, p4) {
    console.log(p2, p4); // Result : p2, p4
    console.log(undefined); // Result : undefined
    console.log(p1); // Result : undefined
    return
}

const result = func(undefined, 'p2', undefined, 'p4')

console.log(result);

//ex2)
function func(objp) {
	const p1 = objp.p1
	const p2 = objp.p2
	const p3 = objp.p3
	const p4 = objp.p4
	
	console.log(p2, p4); //Result : P2 P4
	
	return
}

const result = func({
	p2: 'P2',
	p4: 'P4',

})

//위와 동일 식
const obj = {
	p2: 'P2',
	p4: 'P4',
}

console.log(result); // Result : undefined

// 삭제 필요
// 일반

function func(param1, param2) {
    return param1 + param2

}

// 기명 함수 표현식
const func = function func() {
return 'func'
}
console.log(func()) // Result : func

// 익명 함수 표현식 (추천, 중복선언 방지 할 수 있음)

const func = function() {
    return 'func';
}

console.log(func()) // Result : func

// Method 함수 (일종의 객체의 perperty의 value가 함수일 때 이 함수는 method를 뜻함)

const obj = {
    prop : function() {

    }
}

// 생성자 함수

function name() {

}


// 화살표 함수 (ES2015+, ES6)

const arrowFunc = () --> '문자열'

function name() {
    return '문자열'
}

LeeSeungEun

이전 포스트

JavaScript

HTML, CSS, JavaScript(자바스크립트)

1. 개념

2. 문법

A. 값(Value)

a. 숫자열

b. 문자열

B. 변수(Variable)

C. 식 (Expressin)

D. 연산자 (Operator)

a. 비교 연산자

b. 산술 연산자

c. AND / OR / NOT 연산자

d. 삼항 연산자

e. 비교 연산자

f. 기타연산자

E. 문(Statement)

F. 함수 (Function)

a. 일반적인 함수 선언문

b. 기명 함수 표현식

c. 익명 함수 표현식 (추천, 중복선언 방지 할 수 있음)

d. Method 함수

e. 생성자 함수

f. 화살표 함수

G. 객체

H. 배열

3. 원시 (불변, primitive) vs 객체 (레퍼런스, reference)

4. 타입 변환

5. Truthy vs Falsy

6. Scope

7. DOM (Document Object Model)

8. 객체 생성 방법

SASS (Syntactically Awesome StyleSheets)

0개의 댓글