230227 - 객체, 표현식, 연산자

백승연·2023년 2월 27일

JavaScript

국비지원 프론트엔드 과정

목록 보기

20/97

🚩 Javascript

객체(object)

📝 설명

데이터, 함수의 묶음 (그룹핑) / 복합데이터
실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다
이름(name)과 값(value)으로 구성된 프로퍼티(property)의 집합. 프로퍼티의 값으로 함수가 올 수도 있는데, 이 값을 메소드(method)라고 한다.
객체의 값은 재설정이 가능하다.

프로퍼티(property)

cat.name = "나비"
cat.family = "코리안 숏 헤어"
cat.age = 0.1
cat.weight = 300

메소드(method)

cat.mew()
cat.eat()
cat.sleep()
cat.play()

✒️ 사용법

입력

// let name = "apple";
// let color = "red";
// let display = "🍎";

let apple = {
  name: "apple",
  color: "red",
  display: "🍎",
};

console.log(apple); // { name: 'apple', color: 'red', display: '🍎' }
console.log(apple.name); // apple
console.log(apple.color); // red
console.log(apple.display); // 🍎


let banana = {
  name: "banana",
  color: "yellow",
  display: "🍌",
};
console.log(banana); // { name: 'banana', color: 'yellow', display: '🍌' }
console.log(banana.color); // yellow

banana.color = "green";
console.log(banana.color); // green

출력

이미지로 대체

참조 (reference)

📝 설명

자바스크립트에서 객체를 참조하는 방법이다.
객체는 변수와 달리 같은 주소값을 가지기 때문에 독립적이지 않다.

✒️ 사용법

입력

// 원시타입 - 값이 전달되어 복사됨
let a = 1;
let b = a;
console.log("변수 a는?", a); // 1
console.log("변수 b는?", b); // 1

b = 2023;
console.log("b 재할당 후 변수 a는?", a); // 1
console.log("b 재할당 후 변수 b는?", b); // 2023 // 독립적

//객체타입은 참조값(메모리 주소, 레퍼런스)가 복사되어 전달 됨
let apple = {   //주소 0x123456
  name:'apple', 
  color:'red', 
  display : '🍎'
}
let hotdog = apple; //주소 0x123456가 복사되어짐
console.log('오브젝트 apple는? ',apple); // { name: 'apple', color: 'red', display: '🍎' }
console.log('오브젝트 hotdog는? ',hotdog); // { name: 'apple', color: 'red', display: '🍎' }

hotdog.display = '🌭';   
console.log('hotdog.display 바꾼뒤 오브젝트 apple는? ',apple); // { name: 'apple', color: 'red', display: '🌭' }
console.log('hotdog.display 바꾼뒤 오브젝트 hotdog는? ',hotdog); // { name: 'apple', color: 'red', display: '🌭' }

//한 곳에서 값이 업데이트 되어도 둘 다 업데이트 됨

/* 
  object는 독립적이지 않음
  주소값에 매칭되어있기 때문에 변경하면 원본도 같이 변경됨. (같은 주소값을 가짐)
*/

참조 (reference)

📝 설명

자바스크립트에서 객체를 참조하는 방법이다.
객체는 변수와 달리 같은 주소값을 가지기 때문에 독립적이지 않다.

✒️ 사용법

입력

// 원시타입 - 값이 전달되어 복사됨
let a = 1;
let b = a;
console.log("변수 a는?", a); // 1
console.log("변수 b는?", b); // 1

b = 2023;
console.log("b 재할당 후 변수 a는?", a); // 1
console.log("b 재할당 후 변수 b는?", b); // 2023 // 독립적

//객체타입은 참조값(메모리 주소, 레퍼런스)가 복사되어 전달 됨
let apple = {   //주소 0x123456
  name:'apple', 
  color:'red', 
  display : '🍎'
}
let hotdog = apple; //주소 0x123456가 복사되어짐
console.log('오브젝트 apple는? ',apple); // { name: 'apple', color: 'red', display: '🍎' }
console.log('오브젝트 hotdog는? ',hotdog); // { name: 'apple', color: 'red', display: '🍎' }

hotdog.display = '🌭';   
console.log('hotdog.display 바꾼뒤 오브젝트 apple는? ',apple); // { name: 'apple', color: 'red', display: '🌭' }
console.log('hotdog.display 바꾼뒤 오브젝트 hotdog는? ',hotdog); // { name: 'apple', color: 'red', display: '🌭' }

//한 곳에서 값이 업데이트 되어도 둘 다 업데이트 됨

/* 
  object는 독립적이지 않음
  주소값에 매칭되어있기 때문에 변경하면 원본도 같이 변경됨. (같은 주소값을 가짐)
*/

typeof

📝 설명

자바스크립트에서 데이터의 타입을 확인할 수 있다.
c언어의 경우 int variable = ""; 처럼 선언할 때 정의해야 하지만 js는 동적임. 선언할 때 정의하지 않고 이후 타입을 변경할 수 있다.

✒️ 사용법

입력

let variable;
console.log(variable); // undefined

variable = "";
console.log(typeof variable); // string(문자열)

variable = 1004;
console.log(typeof variable); // number(숫자열)

variable = "1004";
console.log(typeof variable); // string

🔗 참고 링크 & 도움이 되는 링크

Javascript

🚩 표현식 (Expression)

Literal / Statement

📝 설명

값으로 평가될 수 있는 식을 뜻한다.

리터럴 (literal)

: 코드에서 값을 나타내는 표기법 (123, "123", true, {}, [])

템플릿 리터럴(Templete Literal)
- ``(백틱), ${}
함수 리터럴
- function() {}

문/문장 (statement)

: 최소 실행 단위

선언문
할당문
조건문
반복문
표현식 : 값으로 평가될 수 있는 문장

✒️ 사용법

입력

let aa; // 선언문
aa = 1005; // 할당문, 표현식

// let bb = let aa; - 선언문을 변수에 다시 할당할 수 없다

let bb = aa = 1006; // let bb = (aa = 1006); 과 같다. (뒤에서부터 할당)
console.log(bb); // 1006

🚩 연산자

산술연산자 (arithmatic operator)

📝 설명

간단한 수학 계산을 하기 위한 연산자이다.
'+ (덧셈) - (뺄셈) * (곱셈) / (나눗셈)'
% : 나머지값
** : 지수(거듭제곱)

✒️ 사용법

입력

console.log(5 / 2); // 2.5
console.log(5 % 2); // 1(나머지)
console.log(10 % 2); // 0(나머지)

console.log(5 ** 3); // 125 // 5*5*5 - es7에 추가된 방식 
console.log(Math.pow(5, 3)); // 125 // 이전 방식
console.log();

// + 연산자 주의점
let text = "두개의" + "문자를 연결";
console.log(text); // 두개의문자를 연결
text = "1" + 1; // 숫자열과 문자열을 더하면 문자열로 변환
console.log(text); // 11

단항연산자 (Unary operator)

📝 설명

연산에 필요한 값이 한개인 연산자를 뜻한다.
- (양) - (음) ! (부정) 연산자들이 해당된다.
ex) boolean값

✒️ 사용법

입력

let a = 5;
a = -a; // -1 * 5
console.log("a = -a : ", a); // -5

a = -a; // -1 * -5
console.log("-a : ", a); // 5

a = +a;
console.log("+a : ", a); // 5

console.log();

let bool = true;
console.log("bool : ", bool); // true
console.log("!bool : ", !bool); // false
console.log("!!bool : ", !!bool); // true
console.log("!!!bool : ", !!!bool); // false
console.log("!!!!bool : ", !!!!bool); // true
// 이미 boolean값인 경우는 !! - 부정의 부정(긍정)값이 출력됨


// +를 앞에 써주면, 숫자가 아닌 타입들을 숫자로 변환시켜 어떤값이 나오는지 확인 가능
console.clear(); // 이전 내용들을 터미널에서 안보이도록 함

console.log("+false: ", +false); // 0(false는 0으로 간주)
console.log("+null : ", +null); // 0
console.log("+ :", +""); // 0
console.log("+true : ", +true); // 1
console.log("+'문자열' : ", +"문자열"); // NaN (Not a Number)
console.log("+undefined : ", +undefined); // NaN (Not a Number)

console.log(!!1005); // true // !! - 값을 boolean 타입으로 변환

할당(대입)연산자 (Assigment operator)

📝 설명

변수에 값을 할당(저장)하는데 사용되는 연산자

✒️ 사용법

입력

let a = 1;
a = a + 2;
console.log("a : ", a); // 3
// 산술 연산자와 병행

a += 2; // a = a + 2
console.log("a : ", a); // 5

a -= 3; // a = a - 3
console.log("a : ", a); // 2

a *= 4; // a = a * 4
console.log("a : ", a); // 8

console.log();

let b = 10;
b %= 4; // b = b % 2
console.log("b : ", b); // 2

b **= 3; // b = b * b * b
console.log("b : ", b); // 2 * 2 * 2 = 8

console.log("+false: ", +false); // 0(false는 0으로 간주)
console.log("+null : ", +null); // 0
console.log("+ :", +""); // 0
console.log("+true : ", +true); // 1
console.log("+'문자열' : ", +"문자열"); // NaN (Not a Number)
console.log("+undefined : ", +undefined); // NaN (Not a Number)

console.log(!!1005); // true // !! - 값을 boolean 타입으로 변환

증감연산자 (Increment & Decrement Operator)

📝 설명

피연산자를 1씩 증가 혹은 감소시킬 때 사용하는 연산자이다.
변수 앞이나 뒤에 ++ or --를 붙여 사용한다.

✒️ 사용법

입력

let a = 0;
a++; // a = a + 1
console.log(a); // 1

a--; // a = a - 1
console.log(a); // 0

console.log();
/*
  ** 주의 **  
  a++ : 필요한 연산을 먼저 하고 값을 증가시킴
  ++a : 값을 먼저 증가시키고 필요한 연산을 함
*/

a = 0;
let b = a++;
console.log("b : ", b); // 0
console.log("a : ", a); // 1
// a를 b에 먼저 할당한 후 a가 증가됨

console.log();

let c = 0;
let d = ++c;
console.log("c : ", c); // 1
console.log("d : ", d); // 1
// c가 먼저 증가된 후 d에 할당됨

비교연산자 (Relational Operator)

📝 설명

값을 비교할 때 사용하는 연산자. true/false로 결과값이 출력됨

✒️ 사용법

입력

/*
  > : 크다
  < : 작다
  >= : 크거나 같다
  <= : 작거나 같다
*/

console.log(2 > 3); // false
console.log(2 < 3); // true
console.log(2 >= 3); // false
console.log(2 <= 3); // true

동등비교관계연산자 (Equality Operator)

📝 설명

값이나 타입이 같은지 확인할 때 사용하는 연산자.

✒️ 사용법

입력

/*
  == : 값이 같음
  != : 값이 다름
  === : 값과 타입이 둘 다 같다
  !== : 값과 타입이 다르다
*/

console.log("2 == 2", 2 == 2); // true
console.log("2 != 2", 2 != 2); // false
console.log("2 === 3", 2 === 3); // false
console.log("2 != 3", 2 != 3); // true

console.log("2 == '2'", 2 == "2"); // true 타입이 달라도 2가 같음
console.log("2 === '2'", 2 === "2"); // false 타입이 다름
console.log("true == 5", true == 5); // false - true는 숫자 1로 표현됨
console.log("true == 1", true == 1); // true
console.log("true === 1", true === 1); // false
console.log("false == 0", false == 0); // true
console.log();

const obj1 = {
  name: 1004,
};
const obj2 = {
  name: "1004",
};
console.log("obj1 == obj2", obj1 == obj2); // 메모리 주소가 다르기 때문에 false
console.log("obj1 === obj2", obj1 === obj2); // 메모리 주소가 다르기 때문에 false
console.log("obj1.name == obj2.name", obj1.name == obj2.name); // true - 1004가 같기 때문에 true
console.log("obj1.name === obj2.name", obj1.name === obj2.name); // false - 타입이 다름(number, string)

🚩 연산자 우선순위(priority)

연산자 우선순위 비교

📝 설명

연산자들도 산수처럼 우선순위가 있다.
우선순위가 높은 연산 먼저 실행한다.

✒️ 사용법

입력

let a = 2;
let b = 3;

let result = a + b * 4; // 곱셈, 나눗셈 먼저 계산
console.log(result); // 14

result = (a + b) * 4; // 괄호 먼저 계산
console.log(result); // 20
console.log();

result = a++ + b + 4; // 필요한 연산 후 증감연산자 실행 result : 2 + 3 + 4 = 9 -> a++ -> a = 3
console.log(result); // 9
console.log("a : ", a); // 3

console.log();

result = a++ + b * 4; // result : (위에서 하나 증가되었기 때문에 a가 3이 됨)3 + 3 * 4 = 15 -> a++ -> a = 4
console.log(result); // 15
console.log("a : ", a); // 4
console.log();

result = (a++ + b) * 4; // result : (위에서 하나 증가되었기 때문에 a가 4가 됨)(4 + 3) * 4 = 28 -> a++ -> a = 5
console.log(result); // 28
console.log("a : ", a); // 5

출력

이미지로 대체

🔗 참고 링크 & 도움이 되는 링크

Javascript 연산자 우선순위

백승연

공부하는 벨로그

이전 포스트

230224 - 변수 타입

다음 포스트

230227 - 객체, 표현식, 연산자

국비지원 프론트엔드 과정

🚩 Javascript

객체(object)

📝 설명

프로퍼티(property)

메소드(method)

✒️ 사용법

입력

출력

참조 (reference)

📝 설명

✒️ 사용법

입력

참조 (reference)

📝 설명

✒️ 사용법

입력

typeof

📝 설명

✒️ 사용법

입력

🔗 참고 링크 & 도움이 되는 링크

🚩 표현식 (Expression)

Literal / Statement

📝 설명

리터럴 (literal)

문/문장 (statement)

✒️ 사용법

입력

🚩 연산자

산술연산자 (arithmatic operator)

📝 설명

✒️ 사용법

입력

단항연산자 (Unary operator)

📝 설명

✒️ 사용법

입력

할당(대입)연산자 (Assigment operator)

📝 설명

✒️ 사용법

입력

증감연산자 (Increment & Decrement Operator)

📝 설명

✒️ 사용법

입력

비교연산자 (Relational Operator)

📝 설명

✒️ 사용법

입력

동등비교관계연산자 (Equality Operator)

📝 설명

✒️ 사용법

입력

🚩 연산자 우선순위(priority)

연산자 우선순위 비교

📝 설명

✒️ 사용법

입력

출력

🔗 참고 링크 & 도움이 되는 링크

230224 - 변수 타입

230228 - if문, 삼항조건연산자

0개의 댓글